jsconfig.json到底是做什么的

什么是 jsconfig.json？#

jsconfig.json目录中存在文件表明该目录是 JavaScript 项目的根目录。该jsconfig.json文件指定了JavaScript 语言服务提供的功能的根文件和选项。

提示：如果您不使用 JavaScript，则无需担心jsconfig.json.

提示： jsconfig.json是tsconfig.json的后代，它是 TypeScript 的配置文件。jsconfig.json是tsconfig.json与"allowJs"属性设置为true。

为什么我需要一个 jsconfig.json 文件？#

Visual Studio Code 的 JavaScript 支持可以在两种不同的模式下运行：

• 文件范围 - 无 jsconfig.json：在此模式下，在 Visual Studio Code 中打开的 JavaScript 文件被视为独立单元。只要文件a.js没有b.ts明确引用文件（使用import或CommonJS modules），两个文件之间就没有共同的项目上下文。
• 显式项目 - 使用 jsconfig.json：JavaScript 项目是通过jsconfig.json文件定义的。目录中存在此类文件表明该目录是 JavaScript 项目的根目录。文件本身可以选择列出属于项目的文件、要从项目中排除的文件以及编译器选项（见下文）。

当您jsconfig.json的工作区中有一个定义项目上下文的文件时，JavaScript 体验会得到改善。因此，jsconfig.json当您在新工作区中打开 JavaScript 文件时，我们会提供创建文件的提示。

jsconfig.json 的位置#

我们通过创建jsconfig.json文件将代码的这部分（我们网站的客户端）定义为一个 JavaScript 项目。将文件放在 JavaScript 代码的根目录下，如下所示。

在更复杂的项目中，您可能jsconfig.json在一个工作空间内定义了多个文件。您将希望这样做，以便不建议将一个项目中的代码作为 IntelliSense 在另一个项目中进行编码。下图是一个带有client和server文件夹的项目，显示了两个独立的 JavaScript 项目。

例子#

默认情况下，JavaScript 语言服务将为 JavaScript 项目中的所有文件分析并提供 IntelliSense。您需要指定要排除或包含的文件以提供正确的 IntelliSense。

使用"exclude"属性#

该exclude属性（全局模式）告诉语言服务哪些文件不属于您的源代码。这使性能保持在高水平。如果 IntelliSense 速度很慢，请将文件夹添加到您的exclude列表中（如果检测到速度变慢，VS Code 会提示您执行此操作）。

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6"
  },
  "exclude": ["node_modules"]
}

提示：您将需要exclude由构建过程生成的文件（例如，一个dist目录）。这些文件会导致建议显示两次，并且会降低 IntelliSense。

使用"include"属性#

或者，您可以使用include属性（全局模式）显式设置项目中的文件。如果不存在include属性，则默认为包含包含目录和子目录中的所有文件。当一个include指定的属性，只有那些文件都包括在内。这是一个带有显式include属性的示例。

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

提示：exclude和include中的文件路径相对于jsconfig.json.

jsconfig 选项#

下面是jsconfig "compilerOptions"配置 JavaScript 语言支持。

提示：不要被 混淆compilerOptions，因为 JavaScript 不需要实际编译。此属性存在是因为它jsconfig.json是 的后代tsconfig.json，用于编译 TypeScript。

选项	描述
noLib	不包含默认库文件 (lib.d.ts)
target	指定要使用的默认库 (lib.d.ts)。值为“es3”、“es5”、“es6”、“es2015”、“es2016”、“es2017”、“es2018”、“es2019”、“es2020”、“esnext”。
module	生成模块代码时指定模块系统。值是“amd”、“commonJS”、“es2015”、“es6”、“esnext”、“none”、“system”、“umd”。
moduleResolution	指定如何解析模块以进行导入。值是“节点”和“经典”。
checkJs	对 JavaScript 文件启用类型检查。
experimentalDecorators	为提议的 ES 装饰器启用实验性支持。
allowSyntheticDefaultImports	允许从没有默认导出的模块中默认导入。这不会影响代码发出，只是类型检查。
baseUrl	用于解析非相关模块名称的基目录。
paths	指定相对于 baseUrl 选项计算的路径映射。

您可以compilerOptions在TypeScript compilerOptions 文档中阅读有关可用的更多信息。

使用 webpack 别名#

为了让 IntelliSense 使用 webpack 别名，您需要paths使用 glob 模式指定键。

例如，对于别名“ClientApp”：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "ClientApp/*": ["./ClientApp/*"]
    }
  }
}

然后使用别名

import Something from 'ClientApp/foo';

最佳实践#

只要有可能，您应该排除包含不属于项目源代码的 JavaScript 文件的文件夹。

提示：如果您jsconfig.json的工作区中没有 ，VS Code 将默认排除该node_modules文件夹。

下面是一个表格，将常用项目组件映射到建议排除的安装文件夹：

零件	要排除的文件夹
node	排除node_modules文件夹
webpack, webpack-dev-server	排除内容文件夹，例如dist.
bower	排除bower_components文件夹
ember	排除tmp和temp文件夹
jspm	排除jspm_packages文件夹

当您的 JavaScript 项目增长过大而性能下降时，通常是因为node_modules. 如果 VS Code 检测到您的项目增长过大，它会提示您编辑exclude列表。

文章来自vscode文档