在 Visual Studio Code 中使用 JavaScript

Visual Studio Code 内置了 JavaScript 智能感知 (IntelliSense)、调试、格式化、代码导航、重构以及许多其他高级语言特性。

这些特性大多数开箱即用，而有些可能需要基本配置才能获得最佳体验。本页总结了 VS Code 附带的 JavaScript 特性。来自VS Code Marketplace 的扩展可以增强或改变这些内置特性中的大多数。有关这些特性如何工作以及如何配置的更深入指南，请参阅使用 JavaScript。

智能感知 (IntelliSense)

智能感知 (IntelliSense) 为您显示智能代码补全、悬停信息和签名信息，以便您更快、更准确地编写代码。

VS Code 在您的 JavaScript 项目中提供智能感知 (IntelliSense)；对于许多 npm 库，例如 React、lodash 和 express；以及对于其他平台，例如 node、无服务器或 IoT。

有关 VS Code 的 JavaScript 智能感知 (IntelliSense)、如何配置它以及如何排除常见智能感知问题的更多信息，请参阅使用 JavaScript。

JavaScript 项目 (jsconfig.json)

一个 jsconfig.json 文件定义了 VS Code 中的一个 JavaScript 项目。虽然 jsconfig.json 文件不是必需的，但在以下情况下您会希望创建一个：

• 如果工作区中并非所有 JavaScript 文件都应被视为单个 JavaScript 项目的一部分。jsconfig.json 文件允许您排除某些文件不显示在智能感知中。
• 为确保工作区中的 JavaScript 文件子集被视为单个项目。如果您正在处理使用隐式全局依赖而不是 imports 来处理依赖的旧代码，这会很有用。
• 如果您的工作区包含多个项目上下文，例如前端和后端 JavaScript 代码。对于多项目工作区，请在每个项目的根文件夹中创建一个 jsconfig.json。
• 您正在使用 TypeScript 编译器对 JavaScript 源代码进行降级编译。

要定义一个基本的 JavaScript 项目，请在工作区根目录添加一个 jsconfig.json

{
  "compilerOptions": {
    "module": "CommonJS",
    "target": "ES6"
  },
  "exclude": ["node_modules"]
}

有关更高级的 jsconfig.json 配置，请参阅使用 JavaScript。

代码片段

VS Code 内置了基本的 JavaScript 代码片段，它们会在您键入时建议出来；

有许多扩展提供了额外的代码片段，包括针对 Redux 或 Angular 等流行框架的代码片段。您甚至可以定义自己的代码片段。

JSDoc 支持

VS Code 支持许多标准的JSDoc 注解，并使用这些注解提供丰富的智能感知 (IntelliSense)。您还可以选择使用 JSDoc 注释中的类型信息来对您的 JavaScript 进行类型检查。

在函数声明前键入 /**，然后选择JSDoc comment 代码片段建议，即可快速为函数创建 JSDoc 注释

要禁用 JSDoc 注释建议，请将 "javascript.suggest.completeJSDocs": false。

悬停信息

将鼠标悬停在 JavaScript 符号上，可以快速查看其类型信息和相关文档。

键盘快捷方式 ⌘K ⌘I (Windows、Linux Ctrl+K Ctrl+I) 在当前光标位置显示此悬停信息。

签名帮助

当您编写 JavaScript 函数调用时，VS Code 会显示关于函数签名以及突出显示您当前正在补全的参数的信息

当您在函数调用中键入 ( 或 , 时，会自动显示签名帮助。按 ⇧⌘Space (Windows、Linux Ctrl+Shift+Space) 可手动触发签名帮助。

自动导入

自动导入通过建议项目中及其依赖项中的可用变量来加快编码速度。当您选择这些建议之一时，VS Code 会自动在文件顶部为其添加导入。

只需开始键入即可查看当前项目中所有可用 JavaScript 符号的建议。自动导入建议会显示它们的导入来源

如果您选择其中一个自动导入建议，VS Code 会为其添加一个导入。

在此示例中，VS Code 会在文件顶部添加从material-ui 导入 Button 的代码

要禁用自动导入，请将 "javascript.suggest.autoImports" 设置为 false。

粘贴时添加导入

当您在编辑器之间复制和粘贴代码时，VS Code 可以在粘贴代码时自动添加导入。当您粘贴包含未定义符号的代码时，会显示一个粘贴控件，允许您选择粘贴为纯文本还是添加导入。

此功能默认启用，但您可以通过切换 javascript.updateImportsOnPaste.enabled 设置来禁用它。

通过配置 editor.pasteAs.preferences 设置，可以将带导入的粘贴设置为默认行为，而不显示粘贴控件。包含 text.updateImports.jsts 或 text.updateImports 以便在粘贴时始终添加导入。

组织导入

组织导入源操作会对 JavaScript 文件中的导入进行排序并移除任何未使用的导入

您可以从源操作上下文菜单或使用键盘快捷方式 ⇧⌥O (Windows、Linux Shift+Alt+O) 运行组织导入。

您还可以通过设置在保存 JavaScript 文件时自动组织导入

"editor.codeActionsOnSave": {
    "source.organizeImports": "explicit"
}

文件移动时更新导入路径

当您移动或重命名被 JavaScript 项目中其他文件导入的文件时，VS Code 可以自动更新所有引用已移动文件的导入路径

javascript.updateImportsOnFileMove.enabled 设置控制此行为。有效的设置值包括

• "prompt" - 默认值。每次移动文件时询问是否更新路径。
• "always" - 总是自动更新路径。
• "never" - 不自动更新路径，也不提示。

格式化

VS Code 内置的 JavaScript 格式化程序提供了具有合理默认设置的基本代码格式化功能。

javascript.format.* 设置配置内置格式化程序。或者，如果内置格式化程序有碍工作，请将 "javascript.format.enable" 设置为 false 以禁用它。

对于更专业的代码格式化样式，请尝试从市场安装一个 JavaScript 格式化扩展。

JSX 和自动闭合标签

VS Code 的所有 JavaScript 特性也适用于JSX

您可以在普通 *.js 文件和 *.jsx 文件中使用 JSX 语法。

VS Code 还包括特定于 JSX 的功能，例如 JSX 标签的自动闭合

将 "javascript.autoClosingTags" 设置为 false 以禁用 JSX 标签闭合。

代码导航

代码导航让您可以快速浏览 JavaScript 项目。

• 转到定义 F12 - 转到符号定义的源代码。
• 速览定义 ⌥F12 (Windows Alt+F12, Linux Ctrl+Shift+F10) - 弹出一个速览窗口，显示符号的定义。
• 转到引用 ⇧F12 (Windows、Linux Shift+F12) - 显示符号的所有引用。
• 转到类型定义 - 转到定义符号的类型。对于类的实例，这将显示类本身，而不是定义实例的位置。

您可以使用命令面板 (⇧⌘P (Windows、Linux Ctrl+Shift+P)) 中的转到符号命令通过符号搜索进行导航。

• 在文件中转到符号 ⇧⌘O (Windows、Linux Ctrl+Shift+O)
• 在工作区中转到符号 ⌘T (Windows、Linux Ctrl+T)

重命名

按 F2 可在整个 JavaScript 项目中重命名光标下的符号

重构

VS Code 包含一些方便的 JavaScript 重构功能，例如提取函数和提取常量。只需选择您想要提取的源代码，然后单击边槽中的灯泡图标或按 (⌘. (Windows、Linux Ctrl+.)) 即可查看可用的重构。

可用的重构包括

• 提取到方法或函数。
• 提取到常量。
• 在命名导入和命名空间导入之间转换。
• 移动到新文件。

有关重构以及如何为单个重构配置键盘快捷方式的更多信息，请参阅重构。

此外，代码操作小部件：包含附近的快速修复 (editor.codeActionWidget.includeNearbyQuickFixes) 是一个默认启用的设置，它将激活该行中最接近的快速修复，无论您的光标在该行中的哪个位置（通过 ⌘. (Windows、Linux Ctrl+.) 触发，命令 ID 为 editor.action.quickFix）。

此命令会突出显示将使用快速修复进行重构或修复的源代码。常规代码操作和非修复重构仍可在光标位置激活。

未使用的变量和无法访问的代码

未使用的 JavaScript 代码，例如始终为 true 的 if 语句的 else 块或未引用的导入，会在编辑器中淡出显示

将光标放在未使用的代码上并触发快速修复命令 (⌘. (Windows、Linux Ctrl+.)) 或单击灯泡图标，即可快速移除未使用的代码。

要禁用未使用代码的淡出效果，请将 "editor.showUnused" 设置为 false。您还可以通过设置仅在 JavaScript 中禁用未使用代码的淡出效果

"[javascript]": {
    "editor.showUnused":  false
},
"[javascriptreact]": {
    "editor.showUnused":  false
},

保存时代码操作

editor.codeActionsOnSave 设置允许您配置在保存文件时运行的一组代码操作。例如，您可以通过设置启用保存时组织导入

// On explicit save, run fixAll source action. On auto save (window or focus change), run organizeImports source action.
"editor.codeActionsOnSave": {
    "source.fixAll": "explicit",
    "source.organizeImports": "always",
}

目前，支持以下枚举

• explicit (默认)：在显式保存时触发代码操作。与 true 相同。
• always：在显式保存以及窗口或焦点变化导致自动保存时触发代码操作。
• never：从不在保存时触发代码操作。与 false 相同。

您还可以将 editor.codeActionsOnSave 设置为按顺序执行的代码操作数组。

以下是一些源操作

• "organizeImports" - 启用保存时组织导入。
• "fixAll" - 保存时自动修复，一次计算所有可能的修复（包括 ESLint 在内的所有提供者）。
• "fixAll.eslint" - 仅针对 ESLint 进行自动修复。
• "addMissingImports" - 在保存时添加所有缺失的导入。

有关更多信息，请参阅Node.js/JavaScript。

代码建议

VS Code 会自动建议一些常见的代码简化方式，例如将 Promise 上的 .then 调用链转换为使用 async 和 await

将 "javascript.suggestionActions.enabled" 设置为 false 以禁用建议。

使用 AI 增强补全功能

GitHub Copilot 是一款由 AI 驱动的代码补全工具，可帮助您更快、更智能地编写代码。您可以在 VS Code 中使用 GitHub Copilot 扩展来生成代码，或从其生成的代码中学习。

GitHub Copilot 为多种语言和各种框架提供建议，尤其适用于 Python、JavaScript、TypeScript、Ruby、Go、C# 和 C++。

您可以在Copilot 文档中了解更多关于如何开始使用 Copilot 的信息。

安装并启用 Copilot 扩展后，您可以针对您的 JavaScript 项目进行测试。

创建一个新文件 - 您可以使用命令面板 (F1) 中的文件：新建文件命令。

在 JavaScript 文件中，键入以下函数头

function calculateDaysBetweenDates(begin, end) {

Copilot 将提供如下建议 - 使用 Tab 接受建议

内嵌提示

内嵌提示向源代码添加了额外的行内信息，以帮助您理解代码的功能。

参数名称内嵌提示显示函数调用中参数的名称

这可以帮助您一目了然地理解每个参数的含义，这对于接受布尔标志或参数容易混淆的函数特别有用。

要启用参数名称提示，请设置 javascript.inlayHints.parameterNames。有三个可能的值

• none — 禁用参数内嵌提示。
• literals — 仅显示字面量（字符串、数字、布尔值）的内嵌提示。
• all — 显示所有参数的内嵌提示。

变量类型内嵌提示显示没有显式类型注解的变量类型。

设置：javascript.inlayHints.variableTypes.enabled

属性类型内嵌提示显示没有显式类型注解的类属性类型。

设置：javascript.inlayHints.propertyDeclarationTypes.enabled

参数类型提示显示隐式类型参数的类型。

设置：javascript.inlayHints.parameterTypes.enabled

返回类型内嵌提示显示没有显式类型注解的函数的返回类型。

设置：javascript.inlayHints.functionLikeReturnTypes.enabled

References CodeLens

JavaScript references CodeLens 显示类、方法、属性和导出对象的行内引用计数

要启用 references CodeLens，请将 "javascript.referencesCodeLens.enabled" 设置为 true。

单击引用计数可快速浏览引用列表

Linters

Linters 提供可疑代码的警告。虽然 VS Code 不包含内置的 JavaScript linter，但市场中有许多 JavaScript linter 扩展可用。

类型检查

您也可以在普通 JavaScript 文件中利用 TypeScript 的一些高级类型检查和错误报告功能。这是捕获常见编程错误的好方法。这些类型检查还为 JavaScript 提供了一些令人兴奋的快速修复，包括添加缺失导入和添加缺失属性。

TypeScript 尝试像在 .ts 文件中一样在 .js 文件中推断类型。当无法推断类型时，可以使用 JSDoc 注释显式指定。您可以在使用 JavaScript 中阅读更多关于 TypeScript 如何使用 JSDoc 进行 JavaScript 类型检查的信息。

JavaScript 的类型检查是可选的，需要选择启用。现有的 JavaScript 验证工具（例如 ESLint）可以与内置类型检查功能一起使用。

调试

VS Code 对 JavaScript 提供了强大的调试支持。您可以设置断点、检查对象、导航调用堆栈并在调试控制台中执行代码。请参阅调试主题了解更多信息。

调试客户端代码

您可以使用浏览器调试器调试客户端代码，例如我们为 Edge 和 Chrome 内置的调试器，或适用于 Firefox 的调试器。

调试服务器端代码

在 VS Code 中使用内置调试器调试 Node.js。设置非常简单，还有一个Node.js 调试教程可以帮助您。

热门扩展

VS Code 附带对 JavaScript 的出色支持，但您还可以通过扩展安装调试器、代码片段、linter 和其他 JavaScript 工具。

后续步骤

继续阅读以了解

• 使用 JavaScript - 有关 VS Code 的 JavaScript 支持以及如何排除常见问题的更详细信息。
• jsconfig.json - jsconfig.json 项目文件的详细说明。
• 智能感知 (IntelliSense) - 了解更多关于智能感知以及如何有效地使用它处理您的语言的信息。
• 调试 - 了解如何为您的应用程序设置调试。
• Node.js - 创建 Express Node.js 应用程序的演练。
• TypeScript - VS Code 对 TypeScript 有很好的支持，它为您的 JavaScript 代码带来了结构和强类型。

常见问题

VS Code 支持 JSX 和 React Native 吗？

VS Code 支持 JSX 和 React Native。您将从自动下载的来自 npmjs 类型声明文件仓库的类型声明 (typings) 文件中获得 React/JSX 和 React Native 的智能感知。此外，您还可以从市场安装流行的 React Native 扩展。

要为 React Native 启用 ES6 导入语句，您需要将 allowSyntheticDefaultImports 编译器选项设置为 true。这将告诉编译器创建合成默认成员，并且您将获得智能感知。React Native 在底层使用 Babel 来创建包含默认成员的正确运行时代码。如果您还想调试 React Native 代码，可以安装 React Native 扩展。

VS Code 支持 Dart 编程语言和 Flutter 框架吗？

是的，有适用于 Dart 和 Flutter 开发的 VS Code 扩展。您可以在 Flutter.dev 文档中了解更多信息。

外部库的智能感知不工作

自动类型获取适用于 npm 下载的依赖项（在 package.json 中指定）、Bower 下载的依赖项（在 bower.json 中指定），以及文件夹结构中列出的许多最常见的库（例如 jquery-3.1.1.min.js）。

ES6 风格的导入不工作。

当您想使用 ES6 风格导入，但某些类型声明 (typings) 文件尚未使用 ES6 风格导出时，请将 TypeScript 编译器选项 allowSyntheticDefaultImports 设置为 true。

{
  "compilerOptions": {
    "module": "CommonJS",
    "target": "ES6",
    // This is the line you want to add
    "allowSyntheticDefaultImports": true
  },
  "exclude": ["node_modules", "**/node_modules/*"]
}

我可以调试经过压缩/混淆的 JavaScript 吗？

是的，可以。您可以在Node.js 调试主题中看到如何使用 JavaScript 源代码映射来实现这一点。

使用非 ES6 构造时如何禁用语法验证？

有些用户希望使用诸如提议的管道 (|>) 运算符之类的语法构造。然而，这些目前不受 VS Code 的 JavaScript 语言服务支持，并被标记为错误。对于仍然希望使用这些未来功能的用户，我们提供了 javascript.validate.enable 设置。

将 javascript.validate.enable: false 设置后，您将禁用所有内置语法检查。如果这样做，我们建议您使用像 ESLint 这样的 linter 来验证您的源代码。

我可以使用像 Flow 这样的其他 JavaScript 工具吗？

是的，但是 Flow 的一些语言特性，例如类型和错误检查，可能会干扰 VS Code 的内置 JavaScript 支持。要了解如何禁用 VS Code 的内置 JavaScript 支持，请参阅禁用 JavaScript 支持。