jsconfig详解

一、为什么需要 jsconfig.json

JavaScript 项目通过 jsconfig.json 文件定义。目录中出现这样的文件表明该目录是 JavaScript 项目的根目录。
文件本身可以选择列出属于项目的文件、要从项目中排除的文件以及编译器选项(见下文)。
当工作区中有一个 jsconfig.json 文件来定义项目上下文时，JavaScript 体验会得到改善。

默认情况下，jsconfig.json 将为您的 JavaScript 项目文件提供 IntelliSense 配置，包括提供正确的智能感知，指定要排除或包含哪些文件等。

二、jsconfig.json 的位置

jsconfig.json

{
  "compilerOptions": {
    // 用于解析非相关模块名称的基目录。
    "baseUrl": "./",
    // 指定相对于 baseUrl 选项计算的路径映射。
    "paths": {
        "@/*": ["src/*"]
    }
  },
  // 该exclude属性（全局模式）告诉语言服务哪些文件不属于您的源代码。这使性能保持在高水平。
  "exclude": ["node_modules", "dist"]
}

在更复杂的项目中，您可能在工作区中定义了多个 jsconfig.json 文件，这样一个项目中的代码就不会被建议作为 IntelliSense 在另一个项目中进行编码。

三、配置说明

3.1、compilerOptions

jsconfig.json 使用 compilerOptions 来配置 JavaScript 语言支持，该配置具有以下属性：

属性  描述
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                指定如何解析导入模块。值为“node”和“classic”
checkJs 启用 JavaScript       文件的类型检查
experimentalDecorators        为提议的 ES 装饰器提供实验支持
allowSyntheticDefaultImports    允许从没有默认导出的模块进行默认导入。这不影响代码，只是进行类型检查
baseUrl                       指定模块基础目录
paths                           指定相对于模块路径别名映射

提示: 不要被 compilerOptions 搞糊涂了。这个属性之所以存在，是因为 jsconfig.json 是 tsconfig.json 的后代，后者用于编译打字稿。

3.2、exclude属性

Exclude 属性(glob 模式)告诉语言服务哪些文件不是源代码的一部分。这使性能保持在一个高水平。如果 IntelliSense 速度慢，则向排除列表添加文件夹(如果检测到速度慢，VS 代码将提示您这样做)。

{
    "exclude": [
        "node_modules",
        "dist"
    ]
}

以上就排除了构建过程依赖文件（node_modules）和生成的文件(dist 目录)，这些文件将导致建议显示两次，并将减缓智能感知，排除了这些文件可以提高 vscode 的性能。

3.3、include属性

同样，您可以使用 include 属性(glob 模式)显式地设置项目中的文件。

如果没有 include 属性，则默认情况下包含包含目录和子目录中的所有文件。如果指定了 include 属性，则只包含这些文件。下面是一个带有明确 include 属性的示例。

{
    "include": [
        "src/**/*"
    ]
}

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

3.4、配置 webpack 别名

要使用 webpack 别名。，智能感知需要使用 glob 模式指定路径键。
在 paths 配置下设置 @component 别名。

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

然后在项目中引用别名。

import '@/styles/index.scss'

参考：
https://www.typescriptlang.org/docs/handbook/tsconfig-json.html

暂无