jsconfig.json的作用

分类:技术来源:bobo最近更新:2022-06-27浏览:2002


### 什么是 jsconfig.json?

~~jsconfig.json~~目录中存在文件表明该目录是 JavaScript 项目的根目录。该jsconfig.json文件指定了JavaScript 语言服务提供的功能的根文件和选项。

**

提示:如果您不使用 JavaScript,则无需担心jsconfig.json.

提示: jsconfig.json是tsconfig.json的后代,它是 TypeScript 的配置文件。jsconfig.json是tsconfig.json与"allowJs"属性设置为true。

**### 为什么我需要一个 jsconfig.json 文件?

第一次了解 jsconfig.json,是为了解决Visual Studio Code 按Ctrl健检索不到webpack配置的别名。

Visual Studio Code 的 JavaScript 支持可以在两种不同的模式下运行:

-

文件范围 - 无 jsconfig.json:在此模式下,在 Visual Studio Code 中打开的 JavaScript 文件被视为独立单元。只要文件a.js没有b.ts明确引用文件(使用import或CommonJS modules),两个文件之间就没有共同的项目上下文。

-

显式项目 - 使用 jsconfig.json:JavaScript 项目是通过jsconfig.json文件定义的。目录中存在此类文件表明该目录是 JavaScript 项目的根目录。文件本身可以选择列出属于项目的文件、要从项目中排除的文件以及编译器选项(见下文)。

__

当您jsconfig.json的工作区中有一个定义项目上下文的文件时,JavaScript 体验会得到改善。因此,jsconfig.json当您在新工作区中打开 JavaScript 文件时,我们会提供创建文件的提示。

### jsconfig 选项

| 选项  | 描述

| 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  | 指定如何解析模块以进行导入。值是“节点”和“经典”。

| checkJs  | 对 JavaScript 文件启用类型检查。

| experimentalDecorators  | 为提议的 ES 装饰器启用实验性支持。

| allowSyntheticDefaultImports  | 允许从没有默认导出的模块中默认导入。这不会影响代码发出,只是类型检查。

| baseUrl  | 用于解析非相关模块名称的基目录。

| paths  | 指定相对于 baseUrl 选项计算的路径映射。

其中paths选型就是我们解决别名问题的属性,推荐配置如下:

```javascript
/* 主要作用是vscode导入使用别名时可以自动化提示文件路径 */
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@/*": ["src"],
"components/*": ["src/components/*"],
"pages/*": ["src/pages/*"],
"assets/*": ["src/assets/*"]
},
"allowSyntheticDefaultImports": true
},
"exclude": ["node_modules", "dist"]
}
```