jsconfig.json
什么是 jsconfig.json?
目录中存在 jsconfig.json
文件表明该目录是 JavaScript 项目的根目录。jsconfig.json
文件指定根文件以及由 JavaScript 语言服务 提供的功能的选项。
提示: 如果您不使用 JavaScript,则无需担心
jsconfig.json
。
提示:
jsconfig.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
的后代,后者用于编译 TypeScript。
选项 | 描述 |
---|---|
noLib |
不包含默认库文件 (lib.d.ts) |
target |
指定要使用的默认库 (lib.d.ts)。值包括 "ES3"、"ES5"、"ES6"、"ES2015"、"ES2016"、"ES2017"、"ES2018"、"ES2019"、"ES2020"、"ES2021"、"ES2022"、"ES2023"、"ESNext"。 |
module |
指定模块系统,用于生成模块代码。值包括 "AMD"、"CommonJS"、"ES2015"、"ES2020"、"ES2022"、"ES6"、"Node16"、"NodeNext"、"ESNext"、"None"、"System"、"UMD"。 |
moduleResolution |
指定如何解析导入的模块。值包括 "Node"、"Classic"、"Node16"、"NodeNext"、"Bundler"。 |
checkJs |
对 JavaScript 文件启用类型检查。 |
experimentalDecorators |
启用对提议的 ES 装饰器的实验性支持。 |
allowSyntheticDefaultImports |
允许从没有默认导出的模块进行默认导入。这不影响代码输出,仅影响类型检查。 |
baseUrl |
解析非相对模块名称的基本目录。 |
paths |
指定相对于 baseUrl 选项计算的路径映射。 |
您可以在 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
文件夹。
下表列出了常见项目组件与其建议排除的安装文件夹的映射
组件 | 要排除的文件夹 |
---|---|
node |
排除 node_modules 文件夹 |
webpack ,webpack-dev-server |
排除内容文件夹,例如 dist 。 |
bower |
排除 bower_components 文件夹 |
ember |
排除 tmp 和 temp 文件夹 |
jspm |
排除 jspm_packages 文件夹 |
当您的 JavaScript 项目变得太大且性能下降时,通常是因为像 node_modules
这样的库文件夹。如果 VS Code 检测到您的项目变得太大,它会提示您编辑 exclude
列表。