jsconfig.json

什么是 jsconfig.json？

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

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

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

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

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

• 文件作用域 - 无 jsconfig.json：在此模式下，在 Visual Studio Code 中打开的 JavaScript 文件被视为独立的单元。只要文件 a.js 没有显式引用文件 b.ts（无论是使用 import 还是 CommonJS 模块），这两个文件之间就没有共同的项目上下文。

• 显式项目 - 使用 jsconfig.json：JavaScript 项目通过 jsconfig.json 文件定义。目录中存在此类文件表明该目录是 JavaScript 项目的根目录。文件本身可以选择性地列出属于该项目的文件、要从项目中排除的文件以及编译器选项（见下文）。

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

jsconfig.json 的位置

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

在更复杂的项目中，您可能在工作区内定义了多个 jsconfig.json 文件。您需要这样做，以使一个项目中的代码不会作为 IntelliSense 建议给另一个项目中的代码。下图说明了一个包含 client 和 server 文件夹的项目，显示了两个独立的 JavaScript 项目。

示例

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

使用 "exclude" 属性

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

{
  "compilerOptions": {
    "module": "CommonJS",
    "target": "ES6"
  },
  "exclude": ["node_modules"]
}

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

使用 "include" 属性

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

{
  "compilerOptions": {
    "module": "CommonJS",
    "target": "ES6"
  },
  "include": ["src/**/*"]
}

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

jsconfig 选项

以下是用于配置 JavaScript 语言支持的 jsconfig "compilerOptions"。

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

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

使用 webpack 别名

为了使 IntelliSense 与 webpack 别名一起工作，您需要使用 glob 模式指定 paths 键。

例如，对于别名 'ClientApp'

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

然后使用别名

import Something from 'ClientApp/foo';

最佳实践

在可能的情况下，您应该排除包含 JavaScript 文件的文件夹，这些文件不是您项目源代码的一部分。

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

下表列出了常见项目组件及其建议排除的安装文件夹

当您的 JavaScript 项目变得太大且性能下降时，通常是因为像 node_modules 这样的库文件夹。如果 VS Code 检测到您的项目变得太大，它将提示您编辑 exclude 列表。