在 typescript 项目的根目录中存在一个 tsconfig.json，通常指定了一些 typescript 的编译器选项与项目根目录路径。
而在 javascript 开发中则可以使用 jsconfig.json 来进行替代，它的作用与 tsconfig.json 基本完全相同，但默认启用了一些 JavaScript 相关的编译器选项。

tips：jsconfig.json 源于 tsconfig.json，相当于 tsconfig.json 的 allowJs 属性设置为 true。

jsconfig.json 存在的意义

jsconfig.json 可以改善 JavaScript 项目的开发体验。

当工作目录中存在 jsconfig.json 文件时，该文件所在的目录将会被指定为 JavaScript 项目的根目录。同时它可以指定项目应包含哪些文件或是排除哪些文件，为编辑器提供语法提示或性能提升。

当不存在该文件时，工作目录内所有的 JavaScript 文件被视为独立的单元。只要两个 JavaScript 文件没有显示的通过 CommonJS 或 ESmodule 引入，那么他们就不存在公共的上下文。

配置项相关解释

exclude

默认情况下，JavaScript 会为工作目录中的所有文件提供 IntelliSense 支持，这显然不是我们需要的。部分庞大或没有必要的目录将会显著影响 IntelliSense 的性能，例如 node_modules、dist。

exclude 告诉 IntelliSense 哪些文件不属于项目源代码，从而对其进行排除，提高的编译性能。

IntelliSense 为语言感知，通常指代为代码智能提示。
一些编辑器会自动地排除 node_modules，如 Vscode。

1
2
3

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

include

除了 exclude 属性外，同样也可以使用 include 属性来显示的指定项目所包含的文件。当未指定此属性时，将会默认包含目录和子目录的全部文件。

1
2
3

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

tips：exclude 与 include 的路径相对于 jsconfig.json 所在的位置。

路径解释

• /**：匹配任意多级路径。例如 /asuka/** 可以匹配 /asuka/mari、/asuka/sakura、/asuka/kokoro/koishi
• /*：匹配任意一级路径。例如 /asuka/* 可以匹配 /asuka/mari、/asuka/sakura
• /?：匹配任意一级路径且最多只有一个字符。例如 /asuka/? 可以匹配 /asuka/a、/asuka/b。

1
2
3
4
5
6
7
8
9
10

// jsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "exclude": ["node_modules", "dist", "build"]
}

compilerOptions

compilerOptions 名字源自 tsconfig.json，对于 TypeScript 来说，该属性用于编译 TypeScript。而 JavaScript 中则仅用来优化开发体验与 IntelliSense 性能。

下面是用于配置 jsconfig 所支持的 compilerOptions，这里仅列出部分常用属性。可前往 tsc CLI Options 查看更多详细属性。

path

为了 IntelliSense 能够为 webpack 的路径别名提供智能提示，需要根目录下的 jsconfig.json 配置 paths 参数。

例如，对于如下 webpack 配置：

1
2
3
4
5
6
7
8

// webpack.config.js
module.exports = {
    resolve: {
    alias: {
      '@': resolve(__dirname, './src')
    },
  }
}

可对 paths 进行如下配置

1
2
3
4
5
6
7
8
9

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

tips：jsconfig.json 中仅为语法提示提供支持，并未提供真正的路径别名配置。本质还是依靠诸如 webpack 等打包工具中的路径别名配置。因此若仅配置了 jsconfig.json，虽然拥有了智能提示，但启动项目时会报错。