Jsconfig. json Document in Chinese

Original English document address

What is jsconfig.json?

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

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

Jsconfig. json is derived from the TypeScript configuration file tsconfig.json. Json with the allowJs property set to true

Why do I need the jsconfig.json file?

Visual Studio Code’s JavaScript support can be run in two different modes:

• File scope – No jsconfig.json: 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 import or CommonJS modules), there is no common project context between the two files

• Json: JavaScript projects are defined through the jsconfig.json file, whose presence in the directory indicates that the directory is the root of the JavaScript project. The files themselves can choose to list files that belong to the project, files to exclude from the project, compiler options, etc. (see below)

The JavaScript experience is improved when you have a jsconfig.json file in your workspace that defines the context of your project. Therefore, we provide a prompt to create a jsconfig.json file when opening a JavaScript file in a new workspace

Jsconfig. The location of the json

By creating a jsconfig.json file, we define this part of the code (the client side of the site) as a JavaScript project. Place the file in the root directory of your JavaScript code, as shown below

In more complex projects, multiple Jsconfig.json files may be defined in the workspace. This will need to be done so that IntelliSense does not incorrectly prompt code in one project to code in another. Below is a project with client and Server folders showing two separate JavaScript projects

Note: IntelliSense means intelligent code prompt in vscode environment, which will not be translated below

The instance

By default, the JavaScript language service will analyze and provide IntelliSense to all the files in your JavaScript project, and you need to specify the files to exclude or include to provide the appropriate IntelliSense

Use the exclude attribute

The exclude attribute (glob pattern) tells the language service which files do not belong to the source code, which keeps performance high. If IntelliSense is slow, try adding some files (clips) to the exclude list (VS Code will prompt you to do this if it detects slowness)

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

Tip: It is recommended to exclude files generated by the build process (such as the dist directory), which would otherwise cause the recommendations to be displayed twice and slow down IntelliSense

Use the include attribute

In addition, files can be explicitly set in a project using the include attribute (global mode). If the include attribute is not present, all files in the directory and subdirectories are included by default. When the include attribute is specified, only those files specified are included. Here is an example with an explicit include attribute

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

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

jsconfig Options

Here are the jsConfig compilerOptions for configuring JavaScript language support

Tip: Don’t get fooled by compilerOptions. This property exists because jsconfig.json comes from tsconfig.json, which is used to compile TypeScript

You can read more about available compilerOptions in the TypeScript compilation options documentation

Use the Webpack alias

In order for IntelliSense to use the Webpack alias, you need to specify paths using the global schema

For example, for the alias ClientApp

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

Then use the alias

import Something from 'ClientApp/foo'
Copy the code

Best practices

If possible, exclude files that contain JavaScript code but are not part of the project source code (folder)

If jsconfig.json is not present in the workspace, VS Code will exclude the node_modules folder by default

The following table is a list of common project components to their installation folders, which are recommended to be excluded:

When JavaScript projects get too big and performance degrades, it’s usually due to library folders (such as node_modules). If VS Code detects that the item is too large, it will prompt you to edit the Exclude list