The presence of a jsconfig.json file in the directory indicates that the directory is the root of the JavaScript project. The Json file specifies options for the root file and features provided by the JavaScript language service.

Tip: If you don’t use JavaScript, you don’t need to worry about jsconfig.json.

Tip: Jsconfig. json is a descendant of tsconfig.json, which is a TypeScript configuration file. Json is tsconfig. Json with the “allowJs” property set to true.

Why do I need a jsconfig.json file

Because VsCode’s JavaScript support can run in two different modes:

  • In this mode, JavaScript files opened in Visual Studio Code are treated as separate units. As long as file A.js does not explicitly reference file b.ts (using the import or CommonJS module), there is no common project context between the two files.

  • Explicit Project-with jsconfig.json: JavaScript projects are defined by jsconfig.json files. The presence of such a file in the directory indicates that the directory is the root of the JavaScript project. The files themselves have the option of listing files that belong to the project, files to exclude from the project, and compiler options (see below).

The JavaScript experience is improved when you have a jsconfig.json file in your workspace to define the project context. For this reason, we prompt you to create a jsconfig.json file when you open a JavaScript file in a brand new workspace.

Location of jsconfig.json

We define this part of our code by creating a jsconfig.json file, the client for our website, as a JavaScript project. Place the file in the root directory of your JavaScript code, as shown below.

In more complex projects, you might have multiple jsconfig.json files defined in your workspace. You want to do this so that code in one project is not recommended to be coded as IntelliSense in another project. Below is a project with client and server folders showing two separate JavaScript projects.

example

By default, the JavaScript language service will analyze and provide IntelliSense for all files in your JavaScript project. To provide proper intellisense, you need to specify which files to exclude or include.

use"Exclude"

The Exclude attribute (glob pattern) tells the language service which files are not part of the source code. This keeps performance at a high level. If IntelliSense is slow, add folders to the exclusion list (VS code will prompt you to do so if slowness is detected).

{
  "compilerOptions": {
    "module": "commonjs"."target": "es6"
  },
  "exclude": ["node_modules"]}Copy the code

Tip: You want to exclude files generated by the build process (for example, the dist directory). These files will cause suggestions to be displayed twice and will slow intellisense.

use"Include"

Alternatively, you can explicitly set the files in the project using the include attribute (Glob mode). Without the include attribute, all files in the include directory and subdirectories are included by default. If the include attribute is specified, only these files are included. Here is an example with an explicit include attribute.

{
  "compilerOptions": {
    "module": "commonjs"."target": "es6"
  },
  "include": ["src/**/*"]}Copy the code

Tip: The location of the file paths in exclude and include relative to jsconfig.json

Jsconfig Options Options

Below is jsConfig “compilerOptions” to configure JavaScript language support.

compilerOptions

Tip: Don’t get confused by compilerOptions. This property exists because jsconfig.json is a descendant of tsconfig.json, which is used to compile typescript.

attribute describe
nolib Do not include default library files (lib.d.ts)
target Specify the default library to use (lib.d.ts). Value is “es3 es5”, “”,” es6 “, “es2015”, “es2016”, “es2017”, “es2018”, “es2019”, “es2020”, “esnext”.
module Specify the module system when generating module code. The value is “AMD”, “commonJS”, “ES2015”, “ES6”, “ESNext”, “None”, “System”, “UMD”.
moduleResolution Specifies how the import module is resolved. Values “Node” and “classic”
checkJs Enable type checking for JavaScript files
experimentalDecorators Provide experimental support for the proposed ES decorator
allowSyntheticDefaultImports Allows default imports from modules that do not have default exports. This doesn’t affect the code, just type checking
baseUrl The base directory for resolving non-related module names
paths Specifies the path map computed relative to the baseUrl option

You can documentation in TypeScript compilerOptions. Learn more about available compilerOptions in the documentation.

Use the Webpack alias

To use the Webpack alias, intellisense needs to specify the path key using glob mode.

For example, using the ClientApp alias:

{
  "compilerOptions": {
    "baseUrl": "."."paths": {
      "ClientApp/*": ["./ClientApp/*"]}}}Copy the code

And use an alias.

import Something from 'ClientApp/foo';
Copy the code

The best use scheme

Whenever possible, exclude folders that contain JavaScript files that are not part of the project’s source code.

Tip: If you don’t have jsconfig.json in your workspace, VS Code will exclude the node_modules folder by default.

Here is a table that maps common project components to recommended exclusion installation folders:

component Excluded list
node To rule outnode_modulesFile directory
webpack webpack-dev-server To rule outdistFile directory
bower To rule outbower_componentsFile directory
ember To rule outtmpandtempFile directory
jspm To rule outjspm_packagesFile directory

When your JavaScript project gets too big and performance degrades, it’s usually because of library folders like node_modules. If the VS code detects that the item is getting too large, it will prompt you to edit the exclude.