2023年7月7日发(作者：)

VsCode的配置⽂件说明详解功能简单说明：有了它，可以对⽂件⽬录检索做智能提⽰，宝宝再也不⽤两眼发酸的丑⽬录写引⼊⽂件的地址了，⼀路上下键选择回车搞定。是什么？如果你的项⽬中有⼀个 ⽂件的话,这个⽂件的配置可以对你的⽂件所在⽬录下的所有js代码做出个性化⽀持。的配置是的⼦集。webpack aliases的⽀持如果我们在我们的webpack⾥⾯配置的路径的别名,⼼细的⼩朋友就发现了. 我们的vscode不能根据别名路径导⼊的包跳转⽂件了.所以我们还需要的⽀持。{ "compilerOptions": { "baseUrl": ".", "paths": { "@component": ["./src/component"] } }}以下详细说明：⽬录中出现 ⽂件表明该⽬录是 JavaScript 项⽬的根⽬录。 Json ⽂件指定了根⽂件和 JavaScript 语⾔服务提供的特性的选项。提⽰: 如果你不使⽤ JavaScript，你不需要担⼼ 。提⽰: 是 的后代，后者是 TypeScript 的配置⽂件。 Json 是 ，“ allowJs”属性设置为 true。为什么我需要⼀个 ⽂件因为VsCode的 JavaScript ⽀持可以在两种不同的模式下运⾏:Scope-no : ⽂件在这种模式下，在 Visual Studio Code 中打开的 JavaScript ⽂件被视为独⽴的单元。 只要⽂件 没有显式引⽤⽂件 (使⽤ import 或 CommonJS 模块) ，这两个⽂件之间就不存在通⽤的项⽬上下⽂。Explicit Project-with : JavaScript 项⽬通过 ⽂件定义。 ⽬录中出现这样的⽂件表明该⽬录是 JavaScript 项⽬的根⽬录。 ⽂件本⾝可以选择列出属于项⽬的⽂件、要从项⽬中排除的⽂件以及编译器选项(见下⽂)。当⼯作区中有⼀个 ⽂件来定义项⽬上下⽂时，JavaScript 体验会得到改善。 出于这个原因，我们提⽰您在⼀个全新的⼯作区中打开⼀个 JavaScript ⽂件时创建⼀个 ⽂件。Location of 我们通过创建⼀个 ⽂件来定义我们代码的这⼀部分，我们⽹站的客户端，作为⼀个 JavaScript 项⽬。 将⽂件放在 JavaScript代码的根⽬录下，如下所⽰。image在更复杂的项⽬中，您可能在⼯作区中定义了多个 ⽂件。 您希望这样做，这样⼀个项⽬中的代码就不会被建议作为 IntelliSense在另⼀个项⽬中进⾏编码。 下⾯是⼀个带有客户端和服务器⽂件夹的项⽬，展⽰了两个独⽴的 JavaScript 项⽬。image例⼦默认情况下，JavaScript 语⾔服务将为您的 JavaScript 项⽬中的所有⽂件分析并提供 IntelliSense。 为了提供正确的智能感知，您需要指定要排除或包含哪些⽂件。使⽤

“exclude”Exclude 属性(glob 模式)告诉语⾔服务哪些⽂件不是源代码的⼀部分。 这使性能保持在⼀个⾼⽔平。 如果 IntelliSense 速度慢，则向排除列表添加⽂件夹(如果检测到速度慢，VS 代码将提⽰您这样做)。{ "compilerOptions": { "module": "commonjs", "target": "es6" }, "exclude": ["node_modules"]}提⽰: 您希望排除由构建过程⽣成的⽂件(例如，dist ⽬录)。 这些⽂件将导致建议显⽰两次，并将减缓智能感知。使⽤

“include”或者，您可以使⽤ include 属性(glob 模式)显式地设置项⽬中的⽂件。 如果没有 include 属性，则默认情况下包含包含⽬录和⼦⽬录中的所有⽂件。 如果指定了 include 属性，则只包含这些⽂件。 下⾯是⼀个带有明确 include 属性的⽰例。{ "compilerOptions": { "module": "commonjs", "target": "es6" }, "include": ["src/**/*"]}提⽰: exclude 和 include 中的⽂件路径相对于 的位置jsconfig Options 选项下⾯是 jsconfig“ compilerOptions”来配置 JavaScript 语⾔⽀持。compilerOptions提⽰: 不要被 compilerOptions 搞糊涂了。 这个属性之所以存在，是因为 是 的后代，后者⽤于编译打字稿。属性nolibtarget不要包含默认的库⽂件()描述指定要使⽤的默认库()。值为 "es3", "es5", "es6", "es2015", "es2016", "es2017","es2018", "es2019", "es2020", "esnext".在⽣成模块代码时指定模块系统。值为“ amd”、“ commonJS”、“ es2015”、“ es6”、“esnext”、“ none”、“ system”、“ umd”指定如何解析导⼊模块。值为“node”和“classic”启⽤ JavaScript ⽂件的类型检查为提议的 ES 装饰器提供实验⽀持modulemoduleResolutioncheckJsexperimentalDecoratorsallowSyntheticDefaultImportsbaseUrlpaths允许从没有默认导出的模块进⾏默认导⼊。这不影响代码，只是进⾏类型检查解析⾮相关模块名称的基础⽬录指定相对于 baseUrl 选项计算的路径映射您可以在TypeScript compilerOptions documentation .⽂档中了解有关可⽤ compilerOptions 的更多信息。使⽤ webpack 别名要使⽤ webpack 别名，智能感知需要使⽤ glob 模式指定路径键。例如，使⽤

ClientApp 别名:{ "compilerOptions": { "baseUrl": ".", "paths": { "ClientApp/*": ["./ClientApp/*"] } }}然后⽤化名import Something from 'ClientApp/foo';最佳的使⽤⽅案只要有可能，就应该排除包含不属于项⽬源代码的 JavaScript ⽂件的⽂件夹。提⽰: 如果您的⼯作区中没有 ，VS Code 将默认排除

node_modules ⽂件夹。下⾯是⼀个表格，将常见的项⽬组件映射到建议排除的安装⽂件夹:组件nodewebpack webpack-dev-serverboweremberjspm排除的⽬录排除 node_modules ⽂件⽬录排除 dist ⽂件⽬录排除 bower_components ⽂件⽬录排除 tmp 及 temp ⽂件⽬录排除 jspm_packages ⽂件⽬录当你的 JavaScript 项⽬变得太⼤⽽且性能降低时，通常是因为类似node_modules的库⽂件夹。 如果 VS 代码检测到项⽬变得太⼤，它将提⽰您编辑exclude。提⽰：有时⽆法正确选择更改配置，例如添加或编辑⽂件。 运⾏Reload JavaScript Project命令应重新加载项⽬并获取更改。使⽤TypeScript编译器进⾏低级编译当tsc⽤于将ES6 JavaScript向下级编译为旧版本时，中的以下编译器选项适⽤：选项modulediagnosticsemitBOMinlineSourceMapinlineSourcesjsxreactNamespacemapRootnoEmitnoEmitHelpersnoEmitOnErrornoResolveoutFileoutDirremoveCommentsrootDirsourceMapsourceRootstripInternal描述指定模块代码⽣成。 值为“commonjs”，“system”，“umd”，“amd”，“es6”，“es2015”显⽰诊断信息。在输出⽂件的开头发出UTF-8字节顺序标记（BOM）。使⽤源映射发出单个⽂件，⽽不是使⽤单独的⽂件。在单个⽂件中将源与源图⼀起发出; 需要设置--inlineSourceMap。指定JSX代码⽣成：“保留”或“反应”?。指定在针对'react'JSX发出的⽬标时为createElement和__spread调⽤的对象。将位置指定为字符串中的uri，其中调试器应该找到映射⽂件⽽不是⽣成的位置。不发起输出。不在编译输出中⽣成⾃定义辅助函数，如__extends。如果报告任何类型检查错误，不发起输出。不将三斜杠引⽤或模块导⼊⽬标解析为输⼊⽂件。连接并将输出发送到单个⽂件。将输出结构重定向到⽬录。不向输出发出注释。指定输⼊⽂件的根⽬录。⽤于通过--outDir控制输出⽬录结构。⽣成相应的'.map'⽂件。指定调试器应该找到JavaScript⽂件⽽不是源位置的位置。不为具有'@internal'注释的代码发出声明。watch选项监听输⼊⽂件。在源中为装饰声明发出设计类型元数据。不在模块输出中发出“use strict”指令。描述emitDecoratorMetadatanoImplicitUseStrict