资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/vscode中的 jsconfig.json

vscode中的 jsconfig.json

genedna / 1273人阅读

摘要：使用属性属性模式告诉语言服务哪些文件是什么文件，而不是源代码的一部分。这些文件会导致建议显示两次，并会降低的速度。例如，对于别名或然后使用别名或最佳实践只要有可能，您应该使用不属于项目源代码的文件排除文件夹。值为，，，，，显示诊断信息。

问题源头：webpack模板里import路径中@符号是什么意思？



什么是jsconfig.json？

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

提示：如果您不使用JavaScript，则无需担心jsconfig.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代码的根目录下，如下所示。

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

例子

默认情况下，JavaScript语言服务将分析并为JavaScript项目中的所有文件提供IntelliSense(智能感知)。 您需要指定要排除或包含的文件，以便提供正确的IntelliSense。

使用“exclude”属性

exclude属性（glob模式）告诉语言服务哪些文件是什么文件，而不是源代码的一部分。 这使性能保持在较高水平。 如果IntelliSense速度很慢，请将文件夹添加到排除列表中（如果检测到速度减慢，VS代码将提示您执行此操作）。

{
    "compilerOptions": {
        "target": "es6"
    },
    "exclude": [
        "node_modules"
    ]
}
提示：您将要排除由构建过程生成的文件（例如，dist目录）。 这些文件会导致建议显示两次，并会降低IntelliSense的速度。
使用“包含”属性

或者，可以使用include属性（glob模式）显式设置项目中的文件。如果不存在include属性，则默认为包含目录和子目录中的所有文件。如果指定了include属性，则只包括这些文件。下面是一个具有显式include属性的示例。

{
    "compilerOptions": {
        "target": "es6"
    },
    "include": [
        "src/**/*"
    ]
}
提示：exclude和include中的文件路径是相对于jsconfig.json的位置。
jsconfig选项

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

提示：不要被compilerOptions混淆。 此属性的存在是因为jsconfig.json是tsconfig.json的后代，后者用于编译TypeScript。
选项 描述 类型 默认
noLib 不包含默认库文件（lib.d.ts） string -
target 指定要使用的默认库（lib.d.ts）。 值是“es3”，“es5”，“es6”，“es2015”，“es2016”，“es2017”，“es2018”，“esnext”。 string -
checkJs 启用JavaScript文件的类型检查。 boolean true
experimentalDecorators 为拟议的ES装饰器提供实验支持。 string -
allowSyntheticDefaultImports 允许从没有默认导出的模块进行默认导入。 这不会影响代码发出，只会影响类型检查。 boolean true
baseUrl 用于解析非相对模块名称的基目录。 string -
paths 指定相对于baseUrl选项计算的路径映射。 object 见demo
使用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检测到您的项目变得过大，则会提示您编辑排除列表。

提示：有时无法正确选择更改配置，例如添加或编辑jsconfig.json文件。 运行Reload JavaScript Project命令应重新加载项目并获取更改。
使用TypeScript编译器进行低级编译

当tsc用于将ES6 JavaScript向下级编译为旧版本时，jsconfig.json中的以下编译器选项适用：

选项 描述
module 指定模块代码生成。 值为“commonjs”，“system”，“umd”，“amd”，“es6”，“es2015”
diagnostics 显示诊断信息。
emitBOM 在输出文件的开头发出UTF-8字节顺序标记（BOM）。
inlineSourceMap 使用源映射发出单个文件，而不是使用多带带的文件。
inlineSources 在单个文件中将源与源图一起发出; 需要设置--inlineSourceMap。
jsx 指定JSX代码生成：“保留”或“反应”?。
reactNamespace 指定在针对"react"JSX发出的目标时为createElement和__spread调用的对象。
mapRoot 将位置指定为字符串中的uri，其中调试器应该找到映射文件而不是生成的位置。
noEmit 不发起输出。
noEmitHelpers 不在编译输出中生成自定义辅助函数，如__extends。
noEmitOnError 如果报告任何类型检查错误，不发起输出。
noResolve 不将三斜杠引用或模块导入目标解析为输入文件。
outFile 连接并将输出发送到单个文件。
outDir 将输出结构重定向到目录。
removeComments 不向输出发出注释。
rootDir 指定输入文件的根目录。用于通过--outDir控制输出目录结构。
sourceMap 生成相应的".map"文件。
sourceRoot 指定调试器应该找到JavaScript文件而不是源位置的位置。
stripInternal 不为具有"@internal"注释的代码发出声明。
watch 监听输入文件。
emitDecoratorMetadata 在源中为装饰声明发出设计类型元数据。
noImplicitUseStrict 不在模块输出中发出“use strict”指令。 
这个文档有用么？
参考：
JavaScript语言服务
TypeScript tsconfig.json
glob模式
glob (programming))
webpack模板里import路径中@符号是什么意思？

翻译：Xindot
原文：https://code.visualstudio.com...

专线服务 超融合服务器 vscode vscode webrtc vscode asp 阿里云服务器vscode

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101393.html

相关文章

  • 不再手写import - VSCode自动引入Vue组件和Js模块

    摘要：如要自动引入组件，首先需安装拓展自动引入组件和普通模块在根目录添加。使用自动引入中的安装拓展配置输入命令后选择引入包其他自动引入组件和模块后，按住点击路径可直接跳到该文件文章原始发布于我的博客 如要自动引入Vue组件，首先需安装VSCode拓展： Vetur 自动引入Vue组件和普通Js模块 在根目录添加 jsconfig.json 。 每次修改jsconfig.json后需重启该V...

    LiuRhoRamen 评论0 收藏0

  • 介绍vue项目中jsconfig.json概念及使用步骤

    　 先为大家介绍在vue项目中 jsconfig.json　　官方说明：当您在工作空间中有一个定义项目上下文的jsconfig.json文件时，JavaScript体验会得到改进。　　概述　　目录中存在tsconfig.json文件表明该目录是 TypeScript 项目的根目录。该tsconfig.json文件指定编译项目所需的根文件和编译器选项。　　JavaScript 项目可以使用jscon...

    3403771864 评论0 收藏0

  • 我的VS CODE

    摘要：对文件提供语法高亮和自动补全对小程序文件提供补全和语法高亮只需要键入就会有微信的提示使用做路径感知当我们在项目中集成的时候，经常会使用。 在日常开发中，我使用的编辑器是 VS CODE。不仅界面简洁好看，而且插件丰富，是前端开发的首选工具之一。这些插件和工具的目的是为了提高我们的开发效率，下面就我日常开发切身使用到和感受到有帮助的插件和方法做个总结。 VS CODE 常用的个人在用的插...

    X1nFLY 评论0 收藏0

  • [译] 帮你高效使用 VS Code 的秘诀

    摘要：当你处于文件管理器中，你可以像在的中那样用相同的快捷键进行常规操作，比如用方向键导航用键给文件或文件夹重命名用打开当前文件等。 原文地址：Tips to use VSCode more efficiently 原文作者：sudolabs 译文出自：掘金翻译计划 本文永久链接：github.com/xitu/gold-m… 译者：Baddyo 校对者：xionglong58, hzdaqo ...

    cgspine 评论0 收藏0

  • 解决JS文件引用路径多层查找

    摘要：但是在下编辑有点问题智能路径提示不能用了解决方案添加定位模块解决方案使用插件然后使用相当于 一 问题 路径结构 0 0-1 0-1-0 0-1-2 0-1-2-0 0-1-2-0-0 0-2 0-2-0 如过0-1-2-0-0里面的文件引用0-2-0里面的文件：（1）相对路径写法 ....

    罗志环 评论0 收藏0

发表评论

登陆后可评论

0条评论

genedna

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<