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 模块),这两个文件之间就没有公共的项目上下文。 -
显式项目 - 有 jsconfig.json:JavaScript 项目通过
jsconfig.json
文件定义。目录中存在此文件表示该目录是 JavaScript 项目的根目录。该文件本身可以选择列出属于项目的文件、要从项目中排除的文件以及编译器选项(参见下文)。
当你的工作区中包含定义项目上下文的 jsconfig.json
文件时,JavaScript 体验会得到改善。因此,当你首次在全新的工作区中打开 JavaScript 文件时,我们会提示你创建一个 jsconfig.json
文件。
jsconfig.json 的位置
通过创建 jsconfig.json
文件,我们将这部分代码,即我们网站的客户端,定义为一个 JavaScript 项目。将该文件放在 JavaScript 代码的根目录下,如下所示。
在更复杂的项目中,你可能在一个工作区内定义了多个 jsconfig.json
文件。你需要这样做,以便一个项目中的代码不会作为智能感知建议出现在另一个项目中的代码中。下面是一个项目示例,其中包含 client
和 server
文件夹,展示了两个独立的 JavaScript 项目。
示例
默认情况下,JavaScript 语言服务将分析并为你的 JavaScript 项目中的所有文件提供智能感知。你需要指定要排除或包含哪些文件,以便提供正确的智能感知。
使用 "exclude"
属性
exclude
属性(一个 glob 模式)告诉语言服务哪些文件不属于你的源代码。这有助于保持高性能。如果智能感知速度缓慢,请将文件夹添加到 exclude
列表中(如果检测到速度变慢,VS Code 会提示你执行此操作)。
{
"compilerOptions": {
"module": "CommonJS",
"target": "ES6"
},
"exclude": ["node_modules"]
}
提示:你可能需要
exclude
构建过程生成的文件(例如dist
目录)。这些文件会导致建议重复出现,并降低智能感知速度。
使用 "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 别名
为了使智能感知与 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
列表。