VScode的jsconfig.json配置文件说明

沐溪兮
4,794 阅读4分钟

什么是jsconfig.json？

  "compilerOptions": {
    "target": "esnext",
    "checkJs": false,
    "strict": true,
    "allowSyntheticDefaultImports": true,
    "baseUrl": ".",
    "module": "commonjs",
    "paths": {
      "@/*": ["./src/*"],
      "@components/*": ["src/components/*"],
      "@views/*": ["src/views/*"]
    }
  },
  "exclude": ["node_modules", "dist", "temp"],
  "include": ["src/**/*", "types/**/*"]
}

如果你的项目中有一个 jsconfig.json文件的话,这个文件的配置可以对你的文件所在目录下的所有js代码做出个性化支持。
jsconfig.json的配置是tsconfig.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（使用///引用指令或CommonJS模块），两个文件之间就没有共同的项目上下文。
  • 显式项目 - 使用jsconfig.json：JavaScript项目是通过jsconfig.json文件定义的。 目录中存在此类文件表示该目录是JavaScript项目的根目录。 文件本身可以选择列出属于项目的文件，要从项目中排除的文件，以及编译器选项（见下文）。

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

jsconfig.json的位置

我们通过创建jsconfig.json文件将我们代码的这一部分（我们网站的客户端）定义为JavaScript项目。 将文件放在JavaScript代码的根目录下，如下所示

image.png

在更复杂的项目中，您可能在工作空间中定义了多个jsconfig.json文件。 您将需要执行此操作，以便不将一个项目中的代码建议为IntelliSense以在另一个项目中进行编码。 下面的插图是一个带有客户端和服务器文件夹的项目，显示了两个单独的JavaScript项目

image.png

jsconfig选项

下面是jsconfig“compilerOptions”来配置JavaScript语言支持。

提示：不要被compilerOptions混淆。 此属性的存在是因为jsconfig.json是tsconfig.json的后代，后者用于编译TypeScript。

。string- 选项描述noLib不包括默认库文件 lib.d.tstarget指定要使用的默认库 lib.d.ts，可选 es3 / es5 / es6 / es2015 / es2016 / es2017 / es2018 / es2019 / es2020 / esnextmodule指定模块系统（生成模块代码时），可选 amd / commonJS / es2015 / es6 / esnext / none / system / umdmoduleResolution指定如何解析模块以进行导入，可选 node / classiccheckJs对 JavaScript 文件启用类型检查experimentalDecorators为ES装饰器提案提供实验支持allowSyntheticDefaultImports允许从模块进行默认导入而没有默认导出。这不影响代码生成，仅影响类型检查baseUrl基本目录，用于解析非相对模块名称paths指定要相对于 baseUrl 选项计算的路径映射

选项描述类型默认
noLib默认不包含默认库文件（lib.d.ts）string-
target指定要使用的默认库（lib.d.ts）。 值是“es3”，“es5”，“es6”，“es2015”，“es2016”，“es2017”，“es2018”，“esnext”。string-
checkJs启用JavaScript文件的类型检查booleantrue
experimentalDecorators为拟议的ES装饰器提供实验支持string-
allowSyntheticDefaultImports允许从没有默认导出的模块进行默认导入。 这不会影响代码发出，只会影响类型检查。booleantrue
baseUrl用于解析非相对模块名指定相对于baseUrl选项计算的路径映射称的基目录string-
paths指定相对于baseUrl选项计算的路径映射string-
experimentalDecorators为拟议的ES装饰器提供实验支持string-

使用webpack别名

要使IntelliSense使用webpack别名，您需要使用[glob模式]指定paths键。
例如，对于别名'ClientApp'(或@)：

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

然后使用别名

import Something from 'ClientApp/foo'
// 或 import Something from '@/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检测到您的项目变得过大，则会提示您编辑排除列表

只要有可能，您应该使用不属于项目源代码的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检测到您的项目变得过大，则会提示您编辑排除列表

原文：jsconfig.json Reference (visualstudio.com)

avatar
文章
阅读
粉丝