文档教程【免费下载链接】vscode-docsPublic documentation for Visual Studio Code项目地址https://gitcode.com/gh_mirrors/vs/vscode-docs点击查看免费下载本指南深入讲解 Visual Studio Code 中基于 TypeScript 语言服务的 JavaScript 高级特性覆盖智能补全IntelliSense与类型声明的自动获取、jsconfig.json项目上下文的建立、利用 TypeScript 对.js文件进行类型检查、通过 Tasks 集成tsc与 Babel 构建流程以及浏览器/虚拟文件系统场景下的 Partial IntelliSense 模式。读完本文你将掌握在 VS Code 中为 JavaScript 项目配置出接近 TypeScript 的开发体验的完整方法。核心机制JavaScript 语言服务VS Code 的 JavaScript 支持并非独立的解析器而是完全复用 TypeScript 团队开发的JavaScript language service见 docs/languages/javascript.md 的说明。这意味着 VS Code 可以在.js文件中提供与.ts文件同级别的智能补全IntelliSense、参数信息parameter info、引用搜索references search等高级语言特性。JavaScript IntelliSense 的工作方式包括类型推断type inference语言服务从代码本身推断类型JSDoc 注解当推断不足以表达意图时通过param、returns、type等注解显式补充类型信息VS Code 支持的标准 JSDoc 注解集合可参考 TypeScript 对 JavaScript 文件的类型检查文档TypeScript 声明文件通过.d.ts类型声明为库与框架提供精确的类型JS/TS 混编项目JavaScript 与 TypeScript 可以在同一项目中共存并互相感知类型。除对象、方法、属性补全外JavaScript IntelliSense 窗口还提供当前文件内符号的基础单词补全word completion。IntelliSense 的通用概念与完整特性可进一步参考 IntelliSense 文档。类型声明文件与 Automatic Type Acquisition库与框架的 IntelliSense 由 TypeScript 类型声明typings文件驱动。声明文件以 TypeScript 编写能够表达参数与函数的数据类型使 VS Code 以高性能方式提供丰富的智能感知体验。声明文件从哪里来随库分发许多流行库自带类型声明文件如lodash安装后无需任何配置即可获得 IntelliSense自动获取对于未自带 typings 的库VS Code 的Automatic Type AcquisitionATA会自动从社区安装维护的类型声明文件。ATA 依赖npmjsNode.js 包管理器随 Node.js 运行时一起分发。类型声明文件由 VS Code 针对项目中package.json列出的依赖、或在 JavaScript 文件中导入的包自动下载与管理。以package.json中声明lodash依赖为例IntelliSense 即可自动生效{ dependencies: { lodash: ^4.17.0 } }也可以显式在jsconfig.json中用typeAcquisition.include指定需要获取声明文件的包{ typeAcquisition: { include: [ jquery ] } }大多数常见 JavaScript 库要么自带声明文件要么有现成的社区类型声明可用。修复 npm not installed 警告ATA 通过 npm 安装和管理类型声明文件。若收到 npm 未安装的警告首先确认 npm 可用npm --versionnpm 随 Node.js 运行时安装下载当前 LTS 版本即可npm 可执行文件默认加入系统 PATH。如果 npm 已安装但仍出现警告可通过设置js/ts.tsserver.npm.path显式告知 VS Code npm 的完整路径。该设置不要求与工作区中管理包所使用的 npm 版本一致且需要TypeScript 2.3.4。Windows 下在settings.json中示例{ js/ts.tsserver.npm.path: C:\\Program Files\\nodejs\\npm.cmd }设置文件的完整说明见 Settings 文档。JavaScript 项目与 jsconfig.json目录中存在jsconfig.json即表明该目录是一个JavaScript 项目的根目录。jsconfig.json指定项目根文件以及 JavaScript 语言服务提供的语言特性选项。对于常见场景jsconfig.json并非必需但以下情况应添加并非所有文件都属于项目例如需要将某些文件从 IntelliSense 中排除前端与后端代码混放时尤其常见工作区包含多个项目上下文此时应在每个项目的根文件夹分别放置一个jsconfig.json使用 TypeScript 编译器对 JavaScript 源码做降级编译down-level compile。jsconfig.json 的放置位置在 JavaScript 代码根部创建jsconfig.json即可定义项目。一个 JavaScript 项目应只包含源文件不应包含派生或打包产物如dist目录。复杂项目中工作区内可以有多个jsconfig.json使不同项目的源码互不干扰一个项目的代码不会出现在另一个项目的 IntelliSense 建议中补充说明依据 jsconfig.json 文档VS Code 的 JavaScript 支持存在两种模式——无 jsconfig.json 的文件作用域模式打开的文件被当作独立单元除非显式import或使用 CommonJS 模块否则文件之间没有共享项目上下文与有 jsconfig.json 的显式项目模式。在全新的工作区打开 JavaScript 文件时VS Code 会提示创建jsconfig.json以建立项目上下文。可用JavaScript: Go to Project Configuration命令检查当前文件属于哪个jsconfig.json。编写 jsconfig.json基础模板如下它将 JavaScripttarget设为ES6并通过exclude排除node_modules{ compilerOptions: { module: CommonJS, target: ES6 }, exclude: [ node_modules, **/node_modules/* ] }关键属性说明exclude告诉语言服务哪些文件不属于源码。若 IntelliSense 变慢应向exclude列表添加目录VS Code 检测到补全缓慢时会主动提示。应排除构建过程生成的产物如dist目录否则会导致建议重复出现并拖慢 IntelliSenseinclude显式指定项目文件。缺省时包含所在目录及子目录的全部文件一旦指定则只包含所列文件。路径均相对于jsconfig.json所在位置{ compilerOptions: { module: CommonJS, target: ES6 }, include: [ src/**/* ] }最佳实践是使用include配合单一src文件夹这也是最不易出错的方式。include/exclude采用 glob 模式语法**匹配任意层级路径段、*匹配单个路径段内任意字符等详见 Glob Patterns 参考。其他常用compilerOptions依据 jsconfig.json 文档选项说明target指定使用的默认库lib.d.tsES3、ES5、ES6、ES2015…ES2023、ESNextmodule生成模块代码时使用的模块系统AMD、CommonJS、ES2015、ES2020、ES2022、ES6、Node16、NodeNext、ESNext、None、System、UMDmoduleResolution模块解析策略Node、Classic、Node16、NodeNext、BundlercheckJs对 JavaScript 文件启用类型检查noLib不引入默认库文件lib.d.tsexperimentalDecorators启用对提议中 ES 装饰器的实验性支持allowSyntheticDefaultImports允许从没有默认导出的模块导入默认成员只影响类型检查不影响代码输出baseUrl解析非相对模块名的基准目录paths相对于baseUrl计算的路径映射可与 webpack alias 配合使import Something from ClientApp/foo获得 IntelliSense提示无需因 compiler 字样而困惑JavaScript 并不需要实际编译该属性名是因为jsconfig.json是tsconfig.json的后代即allowJs: true的tsconfig.json。完整选项见 jsconfig 文档。从 JavaScript 迁移到 TypeScriptJavaScript 与 TypeScript 可以混编。开始迁移时将jsconfig.json重命名为tsconfig.json并把allowJs设为true即可。更多细节可参考 TypeScript 官方迁移指南。注意jsconfig.json与tsconfig.json本质相同只是jsconfig.json默认将allowJs设为true。对 JavaScript 进行类型检查VS Code 允许在普通 JavaScript 文件中利用 TypeScript 的类型检查与错误报告能力这是捕获常见编程错误的有效手段同时还会解锁一些 JavaScript Quick Fixes如Add missing import与Add missing property。TypeScript 在.js文件中的类型推断方式与.ts一致无法推断时可用 JSDoc 注释显式标注。JavaScript 类型检查是**可选、显式启用opt-in**的可与 ESLint 等既有校验工具并行使用。按文件启用// ts-check在文件顶部添加// ts-check即可启用// ts-check let itsAsEasyAs abc itsAsEasyAs 123 // Error: Type 123 is not assignable to type string适合只想在少数文件中试用、暂不覆盖整个代码库的场景。按设置启用checkJs不修改任何代码、对所有 JavaScript 文件启用类型检查在用户或工作区设置中添加js/ts.implicitProjectConfig.checkJs: true该设置作用于不属于任何jsconfig.json/tsconfig.json项目的 JavaScript 文件。文件级豁免方式// ts-nocheck let easy abc easy 123 // no error也可用// ts-ignore忽略单行错误置于出错行的前一行let easy abc // ts-ignore easy 123 // no error按项目启用jsconfig/tsconfig 的 checkJs对属于项目的文件启用类型检查在项目的compilerOptions中加入checkJs: truejsconfig.json{ compilerOptions: { checkJs: true }, exclude: [ node_modules, **/node_modules/* ] }tsconfig.json混编项目{ compilerOptions: { allowJs: true, checkJs: true }, exclude: [ node_modules, **/node_modules/* ] }此后项目中所有 JavaScript 文件都会被类型检查单个文件仍可用// ts-nocheck关闭。注意JavaScript 类型检查需要TypeScript 2.3及以上。不确定工作区当前激活的 TypeScript 版本时可运行TypeScript: Select TypeScript Version命令查看需先打开一个.js/.ts文件打开 TypeScript 文件时版本显示在编辑器右下角。全局变量与类型检查处理依赖全局变量或非标准 DOM API 的遗留代码时// ts-check会报出大量全局变量不存在的错误。例如window.onload function() { if (window.webkitNotifications.requestPermission() CAN_NOTIFY) { window.webkitNotifications.createNotification(null, Woof!, ).show() } else { alert(Could not notify) } }上述代码会依次报出第 2 行 ——Property webkitNotifications does not exist on type Window.第 2 行 ——Cannot find name CAN_NOTIFY.第 3 行 ——Property webkitNotifications does not exist on type Window.若确信这些并非实际问题需要让 TypeScript 认识这些全局量。先在项目根部创建jsconfig.json{ compilerOptions: { }, exclude: [ node_modules, **/node_modules/* ] }然后重新加载 VS Code使改动生效——jsconfig.json的存在让 TypeScript 知道这些 JS 文件属于更大的项目。接着在工作区某处创建globals.d.tsinterface Window { webkitNotifications: any; } declare var CAN_NOTIFY: number;.d.ts是类型声明文件。此例中globals.d.ts告知 TypeScript全局存在CAN_NOTIFY且window上存在webkitNotifications属性。.d.ts不会改变 JavaScript 的运行行为仅用于提供更好的语言支持。使用任务集成构建工具使用 TypeScript 编译器降级编译TypeScript 的核心能力之一使用最新 JavaScript 语言特性编写代码并输出到尚不支持这些新特性的运行时可执行的代码。由于 JavaScript 与 TypeScript 共享同一语言服务JavaScript 同样可以利用该能力。tsc可将 JavaScript 文件从 ES6 降级编译到其他语言级别。在jsconfig.json中配置好选项后用-p参数让tsc读取该配置文件tsc -p jsconfig.json降级编译的编译器选项详见 jsconfig 文档。运行 BabelBabel 转译器将 ES6 文件转为可读的 ES5 JavaScript 并附带 Source Maps。将以下配置加入工作区.vscode目录下的tasks.json即可把 Babel 接入工作流group使该任务成为默认的Task: Run Build Task手势isBackground告知 VS Code 让该任务在后台持续运行{ version: 2.0.0, tasks: [ { label: watch, command: ${workspaceFolder}/node_modules/.bin/babel, args: [src, --out-dir, lib, -w, --source-maps], type: shell, group: { kind: build, isDefault: true }, isBackground: true } ] }配置完成后运行Run Build Taskkb(workbench.action.tasks.build)即可启动 Babel将src目录下所有文件编译到lib目录。提示示例使用 Babel CLI 选项CLI 帮助参见 Babel 官方文档任务系统的完整机制见 Tasks 文档。禁用内置 JavaScript 支持若偏好 Flow 等其他 JavaScript 语言工具可以禁用 VS Code 内置的 JavaScript 支持——即禁用内置的TypeScript and JavaScript Language Features扩展vscode.typescript-language-features它同时提供 JavaScript 与 TypeScript 语言支持。操作步骤打开扩展视图kb(workbench.view.extensions)→ 在...更多操作下拉中选择Show Built-in Extensions过滤内置扩展 → 输入 typescript → 选中TypeScript and JavaScript Language Features→ 点击Disable。内置扩展无法卸载、只能禁用且可随时重新启用。补充依据 JavaScript 文档 FAQFlow 的部分类型/错误检查特性可能与内置 JavaScript 支持相互干扰这正是上述禁用功能的典型使用场景。Partial IntelliSense 模式VS Code 通常为 JavaScript/TypeScript 提供项目级IntelliSense这是自动导入auto-imports与Go to Definition等功能的前提。但在某些场景下VS Code 只能基于当前打开的文件工作无法加载项目的其他文件在 vscode.dev 或 github.dev 等浏览器环境中运行 VS Code从虚拟文件系统打开文件例如使用 GitHub Repositories 扩展项目正在加载中——加载完成后即恢复项目级 IntelliSense。此时 IntelliSense 进入partial mode部分模式尽力为打开的文件提供补全但无法提供跨文件能力。受影响的功能以下为部分模式中被禁用或功能受限的特性非完整清单所有打开的文件被视为单个项目jsconfig/tsconfig的配置如target不被尊重只报告语法错误不报告语义错误如访问未知属性、向函数传入错误类型针对语义错误的 Quick Fixes 被禁用符号只能在当前文件内解析从其他文件导入的符号一律视为any类型Go to Definition与Find All References仅作用于已打开文件node_modules下安装的包符号无法解析工作区符号搜索只包含已打开文件自动导入被禁用重命名被禁用大量重构被禁用。在vscode.dev与github.dev上Automatic Type Acquisition目前也不受支持见上文 类型声明与 ATA。检查是否处于部分模式将鼠标悬停在状态栏的JavaScript或TypeScript语言状态项上若当前文件处于部分模式状态项会显示Partial mode。总结围绕同一套 TypeScript 语言服务VS Code 为 JavaScript 提供了从开箱即用 IntelliSense到接近 TypeScript 的类型检查的完整能力阶梯Automatic Type Acquisition自动补齐第三方库的类型声明jsconfig.json划定项目边界、优化补全性能并支持tsc降级编译// ts-check、checkJs与globals.d.ts组合实现了渐进式类型安全改造Tasks 将 Babel 等转译工具无缝接入编辑流程而 Partial 模式则说明了浏览器与虚拟文件系统场景下的功能边界。相关配套资料可继续阅读JavaScript 语言总览、jsconfig.json 参考、IntelliSense 详解 与 Tasks 集成指南。赞分享文档教程【免费下载链接】vscode-docsPublic documentation for Visual Studio Code项目地址https://gitcode.com/gh_mirrors/vs/vscode-docs点击查看免费下载相关推荐Visual Studio Code JavaScript 开发指南内置语言特性、jsconfig.json 项目配置与类型检查实战Visual Studio Code JavaScript 开发指南内置语言特性、jsconfig.json 项目配置与类型检查实战 Visual Studi文档教程tradingview-mcp 快速指南3 份回测数据 1 句 AI 指令生成 Pine Script 绩效报告tradingview mcp 快速指南3 份回测数据 1 句 AI 指令生成 Pine Script 绩效报告 跑完 Pine Script 策略回测文档教程Visual Studio Code JavaScript 扩展入门指南ESLint、代码片段与路径/npm IntelliSense 实战Visual Studio Code JavaScript 扩展入门指南ESLint、代码片段与路径/npm IntelliSense 实战 本文源自 Vis文档教程上一篇Revelation全局光照深度剖析SSILVB可见性位掩码GI与SVGF半分辨率间接光实现下一篇RF-DETR 完整指南Roboflow 实时检测 Transformer 的安装、基准、推理与微调实战创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考