mobile wallpaper 1
mobile wallpaper 2
mobile wallpaper 3
mobile wallpaper 4
941 字
3 分钟
配置jsconfig.json改进js开发体验
2022-12-13

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

tips:jsconfig.json 源于 tsconfig.json,相当于 tsconfig.jsonallowJs 属性设置为 true

jsconfig.json 存在的意义#

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

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

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

配置项相关解释#

exclude#

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

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

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

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

include#

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

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

tips:excludeinclude 的路径相对于 jsconfig.json 所在的位置。

路径解释#

  • /**:匹配任意多级路径。例如 /asuka/** 可以匹配 /asuka/mari/asuka/sakura/asuka/kokoro/koishi
  • /*:匹配任意一级路径。例如 /asuka/* 可以匹配 /asuka/mari/asuka/sakura
  • /?:匹配任意一级路径且最多只有一个字符。例如 /asuka/? 可以匹配 /asuka/a/asuka/b
jsconfig.json
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
}
},
"exclude": ["node_modules", "dist", "build"]
}

compilerOptions#

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

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

属性描述
baseUrl基本目录,用于解析非相对模块名称
paths指定要相对于 baseUrl 选项计算的路径映射,通常用于为 webpack 等路径别名提供支持
target指定要使用的默认库 lib.d.ts,可选属性: es3 / es5 / es6 / es2015 / es2016 / es2017 / es2018 / es2019 / es2020 / es2021 / es2022 / esnext
module用于生成模块代码时指定模块系统,可选 amd / commonJS / es2015 / es6 / es2020 /es2022 / esnext / none / system / umd
checkJs对 JavaScript 文件启用类型检查
experimentalDecoratorsES装饰器 提案提供实验支持
allowSyntheticDefaultImports允许从模块进行默认导入而没有默认导出。这不影响代码生成,仅影响类型检查

path#

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

例如,对于如下 webpack 配置:

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

可对 paths 进行如下配置

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

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

分享

如果这篇文章对你有帮助,欢迎分享给更多人!

配置jsconfig.json改进js开发体验
https://marrydream.top/posts/web前端/配置jsconfigjson改进js开发体验/
作者
茉铃
发布于
2022-12-13
许可协议
CC BY-NC-SA 4.0

部分信息可能已经过时

目录