Visual Studio Code JavaScript 开发指南：内置语言特性、jsconfig.json 项目配置与类型检查实战

文档教程【免费下载链接】vscode-docsPublic documentation for Visual Studio Code项目地址https://gitcode.com/gh_mirrors/vs/vscode-docs点击查看免费下载Visual Studio CodeVS Code为 JavaScript 开发内置了完整的语言工具链IntelliSense 智能感知、调试、格式化、代码导航、重构以及类型检查等高级能力开箱即用大部分特性无需任何配置即可工作少量特性则通过jsconfig.json或用户设置即可获得最佳体验。本文以 VS Code 官方文档 docs/languages/javascript.md 为骨架系统梳理这些内置 JavaScript 特性的能力边界与每一项关键配置并结合 docs/languages/jsconfig.md、docs/nodejs/working-with-javascript.md 深入讲解项目建模、自动类型获取与类型检查原理帮助你读完即可把 VS Code 调校成高效的 JavaScript 开发环境。概览VS Code 内置的 JavaScript 能力VS Code 自带 JavaScript 的 IntelliSense智能代码补全、悬停信息、签名信息、调试、格式化、代码导航、重构以及许多其他高级语言功能。其中大部分特性「开箱即用」个别特性需要少量配置才能获得最佳体验例如通过jsconfig.json把工作区建模为 JavaScript 项目、通过用户设置开启类型检查等。Marketplace 上的扩展可以对大多数内置功能进行增强或替换详见 扩展市场文档。关于这些特性如何工作、如何配置的深度指南可继续阅读 Working with JavaScript。从实现层面看VS Code 的 JavaScript 语言能力由 TypeScript 团队开发的JavaScript 语言服务JavaScript Language Service提供它复用了 TypeScript 的类型推断引擎因此在.js文件中也能获得与.ts文件同源的语言服务体验。IntelliSense智能补全、悬停与签名信息IntelliSense 会在你编写代码时展示智能补全、悬停信息和签名信息帮助你更快、更准确地写出代码项目内对当前 JavaScript 项目内的符号提供补全npm 库对React、lodash、express等大量 npm 库提供补全其他平台对node、serverless、IoT 等场景同样生效。其底层原理是类型声明文件typings即.d.ts文件许多流行库自带 typings 文件因此能直接获得丰富且高性能的 IntelliSense对于不带 typings 的库VS Code 的Automatic Type Acquisition自动类型获取会自动从 npmjs 类型声明仓库安装社区维护的 typings 文件此机制依赖 Node.js 运行时自带的 npm可执行npm --version验证。自动类型获取默认覆盖package.json中声明的依赖以及你在文件中 import 的包也可以显式指定要获取的包{ typeAcquisition: { include: [ jquery ] } }如果本机已安装 npm 但仍出现自动类型获取警告可通过设置js/ts.tsserver.npm.path显式指定 npm 可执行文件的完整路径需要 TypeScript 2.3.4例如 Windows 下{ js/ts.tsserver.npm.path: C:\\Program Files\\nodejs\\npm.cmd }关于 IntelliSense 的更多配置与常见问题排查可参考 Working with JavaScript。JavaScript 项目与 jsconfig.jsonjsconfig.json用于在 VS Code 中定义一个 JavaScript 项目。它并非必需但以下场景建议创建工作区中的并非所有JavaScript 文件都应属于同一个项目例如希望把某些文件从 IntelliSense 中排除需要把工作区中的一部分JavaScript 文件视为一个整体项目例如基于隐式全局依赖而非import的遗留代码工作区包含多个项目上下文如同时存在前端与后端 JavaScript 代码——此时应在每个项目的根目录各放一个jsconfig.json需要使用 TypeScript 编译器对 JavaScript 源码做降级编译down-level compile。从工作机制看VS Code 的 JavaScript 支持存在两种模式见 docs/languages/jsconfig.md文件级File Scope——没有 jsconfig.json打开的文件被当作相互独立的单元只要文件a.js没有通过import或 CommonJS 模块显式引用文件b.js两者之间就不存在公共项目上下文显式项目Explicit Project——有 jsconfig.json目录中存在jsconfig.json即表明该目录是一个 JavaScript 项目的根文件可列出项目的包含文件、排除文件以及编译选项。jsconfig.json是tsconfig.json的「后代」——它等价于allowJs为true的tsconfig.json这也是其内部出现compilerOptions的原因实际编译 JavaScript 并不需要这些选项它们用于配置语言服务的解析行为。创建一个基础 JavaScript 项目在工作区根目录添加如下jsconfig.json即可定义基础项目{ compilerOptions: { module: CommonJS, target: ES6 }, exclude: [ node_modules ] }excludeglob 模式参见 glob patterns告诉语言服务哪些文件不属于源代码这能显著提升性能如果 IntelliSense 变慢应向exclude列表追加目录VS Code 检测到卡顿时会主动提示你这样做。应优先排除构建产物目录如dist否则会产生重复建议并拖慢 IntelliSense。也可以改用include显式限定项目包含的文件未指定时默认包含所在目录及其子目录的全部文件{ compilerOptions: { module: CommonJS, target: ES6 }, include: [ src/**/* ] }实践建议最不易出错的做法是用include只指向一个src目录exclude与include中的路径均相对于jsconfig.json所在位置。常用 compilerOptions 速查表以下compilerOptions用于配置 JavaScript 语言支持完整选项可查阅 TypeScript compilerOptions 文档选项说明noLib不包含默认库文件lib.d.tstarget指定使用的默认库lib.d.ts取值ES3、ES5、ES6、ES2015…ES2023、ESNextmodule生成模块代码时使用的模块系统AMD、CommonJS、ES2015、ES2020、ES2022、ES6、Node16、NodeNext、ESNext、None、System、UMDmoduleResolutionimport 的模块解析方式Node、Classic、Node16、NodeNext、BundlercheckJs对 JavaScript 文件启用类型检查experimentalDecorators启用实验性的 ES 装饰器支持allowSyntheticDefaultImports允许对没有默认导出的模块使用默认导入只影响类型检查不影响代码生成baseUrl解析非相对模块名的基础目录paths相对于baseUrl计算的路径映射使用 webpack 别名要让 IntelliSense 识别 webpack 别名需要在paths中配置 glob 模式。例如为别名ClientApp配置{ compilerOptions: { baseUrl: ., paths: { ClientApp/*: [./ClientApp/*] } } }之后即可在代码中直接使用该别名导入import Something from ClientApp/foo多项目与排除最佳实践复杂项目中可以在一个工作区内定义多个jsconfig.json使一个项目的代码不出现在另一个项目的 IntelliSense 建议中例如client与server两个目录各建一个。同时应尽量排除不属于源码的文件夹下表是常见组件与其建议排除目录的对照组件建议排除的目录nodenode_moduleswebpack、webpack-dev-server内容输出目录如distbowerbower_componentsembertmp、tempjspmjspm_packages提示即使没有jsconfig.jsonVS Code 默认也会排除node_modules。当项目过大、性能下降常见原因是node_modules等库目录VS Code 会提示你编辑exclude列表。检查文件属于哪个项目若想确认某个 JavaScript 文件是否属于某个项目打开该文件后运行JavaScript: Go to Project Configuration命令它会打开引用该文件的jsconfig.json如果该文件不属于任何jsconfig.json项目则会显示通知。向 TypeScript 迁移jsconfig.json本质上就是allowJs: true的tsconfig.json因此迁移时只需重命名文件并在tsconfig.json中设置allowJs: true即可参考 Working with JavaScript。Snippets内置代码片段VS Code 内置基础的 JavaScript 代码片段会在输入过程中被建议。Marketplace 上有大量提供额外片段的扩展包括 Redux、Angular 等流行框架的片段你也可以在 docs/editing/userdefinedsnippets.md 学习如何自定义片段。片段建议默认以「内联」方式按字母顺序混排显示。可通过editor.snippetSuggestions设置控制其显示方式top片段始终显示在建议列表顶部bottom片段显示在底部inline与其他建议内联混排默认none完全禁用片段建议。JSDoc 支持VS Code 理解大量标准 JSDoc 注解并利用这些注解提供更丰富的 IntelliSense你甚至可以利用 JSDoc 注释中的类型信息对 JavaScript 做类型检查见下文「类型检查」。快速为函数生成 JSDoc 注释的方法在函数声明前输入/**并选择JSDoc comment片段建议即可。若不需要这类建议可禁用js/ts.suggest.jsdoc.enabled设置。Hover 信息与签名帮助将鼠标悬停在 JavaScript 符号上可快速查看其类型信息与相关文档悬停信息也可通过命令editor.action.showHover对应默认键盘快捷方式在光标位置触发。编写函数调用时VS Code 会显示函数签名信息并高亮你当前正在填写的参数签名帮助会在函数调用中输入(或,时自动出现也可通过命令editor.action.triggerParameterHints手动触发。自动导入与导入管理自动导入Auto Imports通过建议项目及其依赖中所有可用的变量来加速编码选中建议后VS Code 会自动在文件顶部添加对应的 import 语句。自动导入建议会标明符号的导入来源选择某个自动导入建议后VS Code 会为它添加 import。例如下面的示例中VS Code 为Button从 material-ui 添加了 import 到文件顶部禁用自动导入将js/ts.suggest.autoImports设为false。提示VS Code 会尽量推断合适的导入风格你也可以通过js/ts.preferences.quoteStyle与js/ts.preferences.importModuleSpecifier显式配置新导入使用的引号风格与路径风格。粘贴时自动添加导入Add Imports on Paste在编辑器之间复制粘贴代码时VS Code 可以自动为粘贴内容添加导入。当粘贴的代码包含未定义符号时会显示粘贴控件让你选择「按纯文本粘贴」或「添加导入」。该特性默认开启可通过js/ts.updateImportsOnPaste.enabled设置关闭。若希望「粘贴并添加导入」成为默认行为不再显示粘贴控件可配置editor.pasteAs.preferences在其中加入text.updateImports.jsts或text.updateImports。整理导入Organize ImportsOrganize Imports源操作会排序 JavaScript 文件中的导入并移除未使用的导入。可通过Source Action右键菜单或命令editor.action.organizeImports运行也可在保存时自动整理editor.codeActionsOnSave: { source.organizeImports: explicit }文件移动时更新导入Update Imports on File Move移动或重命名被项目其他文件导入的文件时VS Code 可以自动更新所有引用该文件的导入路径。该行为由js/ts.updateImportsOnFileMove.enabled控制合法取值prompt默认每次移动文件时询问是否更新路径always始终自动更新路径never不自动更新路径也不提示。格式化VS Code 内置的 JavaScript 格式化器提供基于合理默认值的代码格式化。js/ts.format.*系列设置参见 settings 文档用于配置内置格式化器若内置格式化器不合用可设js/ts.format.enable: false关闭它再从 Marketplace 安装更专业的 JavaScript 格式化扩展。JSX 与自动闭合标签VS Code 的全部 JavaScript 特性同样适用于 JSX且 JSX 语法在普通*.js文件与*.jsx文件中均可使用VS Code 还提供 JSX 专属特性例如 JSX 标签的自动闭合。如需关闭 JSX 标签闭合将js/ts.autoClosingTags设为false。代码导航代码导航让你快速穿梭于 JavaScript 项目之间主要命令包括Go to Definitioneditor.action.revealDefinition跳转到符号定义处的源码Peek Definitioneditor.action.peekDefinition以内嵌 Peek 窗口预览符号定义Go to Referenceseditor.action.goToReferences查看符号的所有引用Go to Type Definition跳转到定义该符号的类型对类的实例会定位到类本身而非实例定义处。此外可通过命令面板workbench.action.showCommands使用符号搜索命令Go to Symbol in Fileworkbench.action.gotoSymbol在文件内跳转符号Go to Symbol in Workspaceworkbench.action.showAllSymbols在工作区内搜索符号。重命名按下重命名命令editor.action.rename可跨整个 JavaScript 项目重命名光标下的符号重构VS Code 内置了若干实用的 JavaScript 重构例如Extract function提取函数与Extract constant提取常量。选中要提取的源码点击编辑器槽gutter中的灯泡图标或按下 Quick Fix 命令editor.action.quickFix即可查看可用的重构操作内置重构包括提取为方法或函数Extract to method or function提取为常量Extract to constant命名导入与命名空间导入之间相互转换Convert between named imports and namespace imports移动到新文件Move to new file。更多重构说明及为单个重构配置快捷键的方法见 docs/editing/refactoring.md。另外Code Action Widget: Include Nearby Quick Fixeseditor.codeActionWidget.includeNearbyQuickFixes默认开启会在你通过editor.action.quickFix触发时无论光标位于该行何处都激活该行最近的 Quick Fix该命令会高亮将要被重构或修复的源码而普通 Code Action 与非修复类重构仍只在光标处生效。未使用变量与不可达代码未使用的 JavaScript 代码——例如始终为true的if语句的else分支、未被引用的导入——会在编辑器中淡出显示将光标置于其上并触发 Quick Fix 命令editor.action.quickFix或点击灯泡即可快速移除。若只想在 JavaScript 中关闭淡出可配置[javascript]: { editor.showUnused: false }, [javascriptreact]: { editor.showUnused: false },全局关闭则设置editor.showUnused: false。保存时代码动作Code Actions on Saveeditor.codeActionsOnSave设置允许在文件保存时执行一组 Code Action。例如// 显式保存时执行 fixAll自动保存窗口或焦点变化时执行 organizeImports editor.codeActionsOnSave: { source.fixAll: explicit, source.organizeImports: always, }当前支持的枚举值explicit默认仅在显式保存时触发 Code Action等价于truealways显式保存以及窗口/焦点变化触发的自动保存时均触发never保存时永不触发等价于false。editor.codeActionsOnSave也支持数组形式按顺序依次执行多个 Code Action。常用源动作包括organizeImports保存时整理导入fixAll保存时自动修复——对包括 ESLint 在内的所有提供方一次性计算所有可能的修复fixAll.eslint仅对 ESLint 执行自动修复addMissingImports保存时补齐所有缺失的导入。代码建议Code SuggestionsVS Code 会自动建议一些常见的代码简化例如将 promise 上的一串.then调用转换为async/await写法。若不需要这类建议可设js/ts.suggestionActions.enabled: false关闭。用 GitHub Copilot 增强补全GitHub Copilot 可提供 AI 驱动的内联建议帮助你更快更聪明地写代码其对多种语言与框架支持良好尤其适合 Python、JavaScript、TypeScript、Ruby、Go、C# 与 C。入门方式见 docs/agents/agents-tutorial.md。在 JavaScript 文件中输入如下函数头function calculateDaysBetweenDates(begin, end) {Copilot 会给出类似下方的建议按Tab接受内联提示Inlay Hints内联提示在源码中追加内联信息帮助理解代码含义可通过对应的js/ts.inlayHints.*设置开关参数名内联提示js/ts.inlayHints.parameterNames.enabled显示函数调用中各参数的名字对包含布尔标志位或容易混淆参数的函数尤其有用。可选值none关闭、literals仅对字面量参数显示、all对所有实参显示变量类型内联提示js/ts.inlayHints.variableTypes.enabled显示没有显式类型注解的变量类型属性类型内联提示js/ts.inlayHints.propertyDeclarationTypes.enabled显示没有显式类型注解的类属性类型参数类型内联提示js/ts.inlayHints.parameterTypes.enabled显示隐式类型参数的参数类型返回类型内联提示js/ts.inlayHints.functionLikeReturnTypes.enabled显示没有显式类型注解的函数的返回类型References CodeLensJavaScript 的 references CodeLens 会在类、方法、属性与导出对象的声明上方显示引用计数。开启方式将js/ts.referencesCodeLens.enabled设为true点击引用计数即可快速浏览引用列表Linters代码检查器Linter 会对可疑代码给出警告。VS Code 不内置 JavaScript linter但 Marketplace 提供大量 JavaScript linter 扩展如 ESLint。建议阅读扩展描述与评价后再决定是否安装参见 扩展市场文档。类型检查Type Checking你可以把 TypeScript 的部分高级类型检查与错误报告能力应用到普通 JavaScript 文件这是发现常见编程错误的利器同时也会启用一批针对 JavaScript 的 Quick Fix包括Add missing import和Add missing property。TypeScript 会像在.ts文件中一样在.js文件中推断类型当类型无法推断时可通过 JSDoc 注释显式指定。JavaScript 类型检查是可选的、按需开启的opt-in并且可与 ESLint 等既有校验工具并行使用。开启方式有几种按文件开启在文件顶部加// ts-check// ts-check let itsAsEasyAs abc itsAsEasyAs 123 // Error: Type 123 is not assignable to type string适合先在少量文件上试用类型检查。通过设置开启在不改任何代码的前提下对全部 JavaScript 文件启用类型检查只需在用户或工作区设置中加入js/ts.implicitProjectConfig.checkJs: true这会对不属于任何jsconfig.json/tsconfig.json项目的 JavaScript 文件启用类型检查。也可以按文件排除// ts-nocheck let easy abc easy 123 // no error或忽略单行错误let easy abc // ts-ignore easy 123 // no error通过 jsconfig/tsconfig 开启对属于项目的 JavaScript 文件启用类型检查在项目配置中加checkJs: truejsconfig.json{ compilerOptions: { checkJs: true }, exclude: [ node_modules, **/node_modules/* ] }tsconfig.json{ compilerOptions: { allowJs: true, checkJs: true }, exclude: [ node_modules, **/node_modules/* ] }JavaScript 类型检查需要 TypeScript 2.3 及以上版本。不确定工作区当前生效的 TypeScript 版本时可运行TypeScript: Select TypeScript Version命令查看需先打开一个.js/.ts文件。全局变量与类型检查对于使用全局变量或非标准 DOM API 的遗留代码// ts-check会报告诸如Property webkitNotifications does not exist on type Window、Cannot find name CAN_NOTIFY之类的错误。若确信这些不是实际问题可通过.d.ts声明文件告知 TypeScript 这些全局变量先在项目根创建jsconfig.json然后新建globals.d.tsinterface Window { webkitNotifications: any; } declare var CAN_NOTIFY: number;.d.ts文件只是类型声明不会改变 JavaScript 的实际求值行为仅用于提供更好的语言支持。完整细节参见 Working with JavaScript。调试VS Code 自带强大的 JavaScript 调试支持设置断点、检查对象、遍历调用栈、在调试控制台Debug Console执行代码等入门见 docs/debugtest/debugging.md。调试客户端代码可使用内置的 Edge 与 Chrome 浏览器调试器或安装 Debugger for Firefox 扩展调试服务端代码使用内置调试器调试 Node.js配置简单可跟随 Node.js 调试教程 上手。热门扩展VS Code 自带的 JavaScript 支持已经足够出色但你仍可通过扩展市场安装调试器、代码片段、linter 及其他 JavaScript 工具来进一步增强详见 扩展市场文档。扩展列表由市场动态查询阅读描述与评价后再决定安装。常见问题FAQVS Code 支持 JSX 与 React Native 吗支持。VS Code 会自动从 npmjs 类型声明仓库下载React/JSX与React Native的类型声明typings文件从而获得相应的 IntelliSense也可从 Marketplace 安装流行的 React Native 扩展。要在 React Native 中使用 ES6 import 语句需要把allowSyntheticDefaultImports编译选项设为trueReact Native 底层使用 Babel 生成带默认成员的运行时代码配置后即可获得 IntelliSense。VS Code 支持 Dart 与 Flutter 吗支持。有对应的 Dart 与 Flutter 扩展可用于开发。外部库的 IntelliSense 不工作怎么办Automatic Type Acquisition对 npmpackage.json、Bowerbower.json声明的依赖以及文件夹结构中常见库如jquery-3.1.1.min.js均生效。若 ES6 风格导入不工作——某些类型声明文件尚未使用 ES6 风格导出——可将 TypeScript 编译选项allowSyntheticDefaultImports设为true{ compilerOptions: { module: CommonJS, target: ES6, // 需要添加的行 allowSyntheticDefaultImports: true }, exclude: [ node_modules, **/node_modules/* ] }能否调试压缩/混淆minified/uglified的 JavaScript可以。配合 JavaScript source map 即可调试参见 Node.js 调试文档。使用非 ES6 语法结构时如何禁用语法校验若想使用 pipeline|操作符等尚不被 JavaScript 语言服务支持的未来语法会被标记为错误可将js/ts.validate.enable设为false关闭所有内置语法检查。此时建议配合 ESLint 等 linter 校验源码。能否使用 Flow 等其他 JavaScript 工具可以但 Flow 的部分语言特性如类型与错误检查可能干扰 VS Code 内置的 JavaScript 支持。如需禁用内置 JavaScript 支持可参见 Working with JavaScript 中的「Disable JavaScript support」章节在扩展视图中禁用内置扩展TypeScript and JavaScript Language Features。下一步学习Working with JavaScript关于 JavaScript 支持的更多细节与常见问题排查jsconfig.jsonjsconfig.json项目文件的完整参考IntelliSenseIntelliSense 的用法与高效技巧调试为应用配置调试Node.js 教程创建 Express Node.js 应用的完整演练TypeScript为 JavaScript 代码引入结构与强类型的 TypeScript 支持。赞分享文档教程【免费下载链接】vscode-docsPublic documentation for Visual Studio Code项目地址https://gitcode.com/gh_mirrors/vs/vscode-docs点击查看免费下载相关推荐终极鼠标翻译神器如何用MouseTooltipTranslator打破语言障碍终极鼠标翻译神器如何用MouseTooltipTranslator打破语言障碍 你是否曾因为网页上的外文内容而感到困扰面对技术文档、学术论文或国际新闻时语AI 应用OCR语音V语言 Visual Studio Code 开发环境配置与可视化调试实战指南V语言 Visual Studio Code 开发环境配置与可视化调试实战指南 本文以 doc/vscode.md https://link.gitcode.c编程语言编译器语言运行时标准库Visual Studio Code语言扩展语法高亮与语言配置Visual Studio Code语言扩展语法高亮与语言配置 引言代码编辑器的语言理解核心 你是否曾在编辑Markdown文件时惊叹于标题自动加粗、代码开发工具代码编辑器上一篇Python通达信数据获取终极指南mootdx让股票分析变得简单下一篇Python通达信数据获取完整指南mootdx让股票数据分析变得简单高效创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考