关于前端:jsconfigjson到底是做什么的

52次阅读

共计 2794 个字符,预计需要花费 7 分钟才能阅读完成。

什么是 jsconfig.json?#

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

提醒:如果您不应用 JavaScript,则无需放心jsconfig.json.

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

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

Visual Studio Code 的 JavaScript 反对能够在两种不同的模式下运行:

  • 文件范畴 – 无 jsconfig.json:在此模式下,在 Visual Studio Code 中关上的 JavaScript 文件被视为独立单元。只有文件 a.js 没有 b.ts 明确援用文件(应用 importCommonJS modules),两个文件之间就没有独特的我的项目上下文。
  • 显式我的项目 – 应用 jsconfig.json:JavaScript 我的项目是通过 jsconfig.json 文件定义的。目录中存在此类文件表明该目录是 JavaScript 我的项目的根目录。文件自身能够抉择列出属于我的项目的文件、要从我的项目中排除的文件以及编译器选项(见下文)。

当您 jsconfig.json 的工作区中有一个定义我的项目上下文的文件时,JavaScript 体验会失去改善。因而,jsconfig.json当您在新工作区中关上 JavaScript 文件时,咱们会提供创立文件的提醒。

jsconfig.json 的地位 #

咱们通过创立 jsconfig.json 文件将代码的这部分(咱们网站的客户端)定义为一个 JavaScript 我的项目。将文件放在 JavaScript 代码的根目录下,如下所示。

在更简单的我的项目中,您可能 jsconfig.json 在一个工作空间内定义了多个文件。您将心愿这样做,以便不倡议将一个我的项目中的代码作为 IntelliSense 在另一个我的项目中进行编码。下图是一个带有 clientserver文件夹的我的项目,显示了两个独立的 JavaScript 我的项目。

例子 #

默认状况下,JavaScript 语言服务将为 JavaScript 我的项目中的所有文件剖析并提供 IntelliSense。您须要指定要排除或蕴含的文件以提供正确的 IntelliSense。

应用 "exclude" 属性 #

exclude 属性(全局模式)通知语言服务哪些文件不属于您的源代码。这使性能放弃在高水平。如果 IntelliSense 速度很慢,请将文件夹增加到您的 exclude 列表中(如果检测到速度变慢,VS Code 会提醒您执行此操作)。

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6"
  },
  "exclude": ["node_modules"]
}

提醒:您将须要 exclude 由构建过程生成的文件(例如,一个 dist 目录)。这些文件会导致倡议显示两次,并且会升高 IntelliSense。

应用 "include" 属性 #

或者,您能够应用 include 属性(全局模式)显式设置我的项目中的文件。如果不存在 include 属性,则默认为蕴含蕴含目录和子目录中的所有文件。当一个 include 指定的属性,只有那些文件都包含在内。这是一个带有显式 include 属性的示例。

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6"
  },
  "include": ["src/**/*"]
}

提醒:excludeinclude 中的文件门路绝对于jsconfig.json.

jsconfig 选项 #

上面是 jsconfig "compilerOptions" 配置 JavaScript 语言反对。

提醒:不要被 混同 compilerOptions,因为 JavaScript 不须要理论编译。此属性存在是因为它jsconfig.json 是 的后辈tsconfig.json,用于编译 TypeScript。

选项 形容
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 选项计算的门路映射。

您能够 compilerOptions 在 TypeScript compilerOptions 文档中浏览无关可用的更多信息。

应用 webpack 别名 #

为了让 IntelliSense 应用 webpack 别名,您须要 paths 应用 glob 模式指定键。

例如,对于别名“ClientApp”:

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

而后应用别名

import Something from 'ClientApp/foo';

最佳实际 #

只有有可能,您应该排除蕴含不属于我的项目源代码的 JavaScript 文件的文件夹。

提醒:如果您 jsconfig.json 的工作区中没有,VS Code 将默认排除该 node_modules 文件夹。

上面是一个表格,将罕用我的项目组件映射到倡议排除的装置文件夹:

整机 要排除的文件夹
node 排除 node_modules 文件夹
webpack, webpack-dev-server 排除内容文件夹,例如dist.
bower 排除 bower_components 文件夹
ember 排除 tmptemp文件夹
jspm 排除 jspm_packages 文件夹

当您的 JavaScript 我的项目增长过大而性能下降时,通常是因为 node_modules. 如果 VS Code 检测到您的我的项目增长过大,它会提醒您编辑exclude 列表。

文章来自 vscode 文档

正文完
 0