现已推出！阅读 10 月份的新功能和修复。

Visual Studio Code 中的 JavaScript

Visual Studio Code 包含内置的 JavaScript IntelliSense、调试、格式化、代码导航、重构以及许多其他高级语言功能。

Working with JavaScript in Visual Studio Code

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

IntelliSense

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

VS Code 在您的 JavaScript 项目中提供 IntelliSense；针对许多 npm 库（例如 React、lodash 和 express）；以及针对其他平台（例如 node、无服务器或 IoT）。

有关 VS Code 的 JavaScript IntelliSense、如何配置以及如何帮助解决常见 IntelliSense 问题的更多信息，请参阅 使用 JavaScript。

JavaScript 项目 (jsconfig.json)

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

  • 如果您的工作区中并非所有 JavaScript 文件都应该被视为单个 JavaScript 项目的一部分。jsconfig.json 文件允许您从 IntelliSense 中排除某些文件。
  • 确保您的工作区中的 JavaScript 文件子集被视为单个项目。如果您正在使用遗留代码，这些代码使用隐式全局依赖项而不是 导入 来进行依赖项管理，那么这非常有用。
  • 如果您的工作区包含多个项目上下文，例如前端和后端 JavaScript 代码。对于多项目工作区，在每个项目的根文件夹中创建一个 jsconfig.json。
  • 如果您正在使用 TypeScript 编译器来降级编译 JavaScript 源代码。

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

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

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

提示：要检查 JavaScript 文件是否属于 JavaScript 项目，只需在 VS Code 中打开文件并运行 JavaScript: Go to Project Configuration 命令。此命令将打开引用 JavaScript 文件的 jsconfig.json。如果文件不属于任何 jsconfig.json 项目，则会显示通知。

代码片段

VS Code 包含基本的 JavaScript 代码片段，这些代码片段会在您键入时提供建议；

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

提示：要禁用代码片段建议，请在您的 设置 文件中将 editor.snippetSuggestions 设置为 "none"。The editor.snippetSuggestions 设置还允许您更改代码片段在建议中的显示位置：顶部 ("top")、底部 ("bottom") 或按字母顺序排列的内联 ("inline")。默认值为 "inline"。

JSDoc 支持

VS Code 了解许多标准的 JSDoc 注释，并使用这些注释来提供丰富的 IntelliSense。您还可以选择使用来自 JSDoc 注释的类型信息来 对您的 JavaScript 进行类型检查。

通过在函数声明之前键入 /** 并选择 JSDoc 注释 代码片段建议，快速为函数创建 JSDoc 注释。

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

悬停信息

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

Hovering over a JavaScript variable to see its type information

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

签名帮助

在您编写 JavaScript 函数调用时，VS Code 将显示有关函数签名的信息，并突出显示您当前正在完成的参数。

Signature help for some DOM methods

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

自动导入

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

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

Global symbols are shown in the suggestion list

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

在此示例中，VS Code 将从 material-ui 中为 Button 添加一个导入到文件的顶部。

After selecting a symbol from a different file, an import is added for it automatically

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

提示：VS Code 尝试推断要使用的最佳导入样式。您可以使用 javascript.preferences.quoteStyle 和 javascript.preferences.importModuleSpecifier 设置显式配置添加到代码中的导入的优先引号样式和路径样式。

格式化

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

javascript.format.* 设置 配置内置格式化程序。或者，如果内置格式化程序干扰了您，请将 "javascript.format.enable" 设置为 false 以禁用它。

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

JSX 和自动闭合标签

VS Code 的所有 JavaScript 功能也适用于 JSX

JSX IntelliSense

您可以在普通 *.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 项目中重命名光标下的符号

Renaming a variable

重构

VS Code 为 JavaScript 提供了一些方便的重构功能，例如提取函数和提取常量。只需选择您要提取的源代码，然后单击侧边栏中的灯泡或按 (⌘. (Windows, Linux Ctrl+.)) 查看可用的重构功能。

JavaScript refactoring

可用的重构功能包括

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

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

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

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

未使用的变量和不可达代码

未使用的 JavaScript 代码（例如，始终为真的 if 语句的 else 块或未引用的导入）在编辑器中将变为灰色。

Unreachable source code faded out

您可以通过将光标放在上面并触发快速修复命令 (⌘. (Windows, Linux Ctrl+.)) 或单击灯泡来快速删除此未使用的代码。

要禁用未使用的代码的灰色显示，请将 "editor.showUnused" 设置为 false。您还可以通过设置以下内容来仅在 JavaScript 中禁用未使用的代码的灰色显示。

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

组织导入

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

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

您还可以通过设置以下内容，在保存 JavaScript 文件时自动执行组织导入

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

保存时的代码操作

的 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 extension in the VS Code Marketplace

GitHub Copilot 为众多语言和各种框架提供了建议，它在 Python、JavaScript、TypeScript、Ruby、Go、C# 和 C++ 中尤其有效。

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

安装并启用 Copilot 扩展后，就可以在您的 JavaScript 项目中测试它。

创建一个新文件 - 您可以在命令面板（F1）中使用文件：新建文件命令。

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

function calculateDaysBetweenDates(begin, end) {

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

Copilot JavaScript ghost text suggestion

内联提示

内联提示在源代码中添加其他内联信息，以帮助您理解代码的功能。

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

Parameter name inlay hints

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

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

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

变量类型内联提示显示没有显式类型注释的变量的类型。

设置：javascript.inlayHints.variableTypes.enabled

Variable type inlay hints

属性类型内联提示显示没有显式类型注释的类属性的类型。

设置：javascript.inlayHints.propertyDeclarationTypes.enabled

Property type inlay hints

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

设置：javascript.inlayHints.parameterTypes.enabled

Parameter type inlay hints

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

设置：javascript.inlayHints.functionLikeReturnTypes.enabled

Return type inlay hints

References CodeLens

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

JavaScript references CodeLens

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

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

JavaScript references CodeLens peek

在文件移动时更新导入

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

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

  • "prompt" - 默认值。询问是否应为每个文件移动更新路径。
  • "always" - 始终自动更新路径。
  • "never" - 不要自动更新路径，也不要提示。

代码检查器

代码 linter 会为可疑的代码发出警告。虽然 VS Code 没有内置 JavaScript linter，但在市场中提供了许多 JavaScript linter 扩展。

提示：此列表是从 VS Code 市场 动态查询的。阅读描述和评论以决定扩展是否适合您。

类型检查

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

Using type checking and Quick Fixes in a JavaScript file

TypeScript 尝试以与在 .ts 文件中相同的方式在 .js 文件中推断类型。如果无法推断类型，则可以使用 JSDoc 注释明确指定它们。您可以在 使用 JavaScript 中详细了解 TypeScript 如何使用 JSDoc 进行 JavaScript 类型检查。

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

调试

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

调试客户端

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

调试服务器端

使用内置调试器在 VS Code 中调试 Node.js。设置很简单，并且有一个 Node.js 调试教程 来帮助你。

debug data inspection

流行的扩展

VS Code 拥有对 JavaScript 的出色支持，但你可以通过 扩展 额外安装调试器、代码片段、代码校验器和其他 JavaScript 工具。

提示： 以上显示的扩展是动态查询的。点击上面的扩展图标以阅读描述和评论，以决定哪个扩展最适合你。在 Marketplace 中查看更多信息。

后续步骤

继续阅读以了解有关以下内容的信息

  • 使用 JavaScript - 有关 VS Code 的 JavaScript 支持以及如何解决常见问题的更详细的信息。
  • jsconfig.json - 对 jsconfig.json 项目文件的详细描述。
  • IntelliSense - 详细了解 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 的 IntelliSense。此外，你可以从 Marketplace 安装流行的 React Native 扩展。

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

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

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

IntelliSense 无法为外部库工作

自动类型获取适用于 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 这样的代码校验器来验证你的源代码。

我可以使用其他 JavaScript 工具，例如 Flow 吗？

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

10/29/2024