Visual Studio Code 中的 JavaScript

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

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

智能感知

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

VS Code 在您的 JavaScript 项目中提供了 IntelliSense；适用于许多 npm 库，如 React、lodash 和 express；以及其他平台，如 node、无服务器或物联网。

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

JavaScript 项目 (jsconfig.json)

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

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

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

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

请参阅使用JavaScript以获取更高级的jsconfig.json配置。

代码片段

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

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

JSDoc 支持

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

通过在函数声明前输入/**，并选择JSDoc注释片段建议，快速为函数创建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 来禁用它。

对于更专业的代码格式化风格，尝试从Marketplace安装一个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代码，例如始终为真的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 自动建议一些常见的代码简化，例如将链式调用的 .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

参考文献 CodeLens

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

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

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

代码检查工具

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

类型检查

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

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

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

调试

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

调试客户端

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

调试服务器端

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

热门扩展

VS Code 提供了对 JavaScript 的出色支持，但你还可以通过扩展安装调试器、代码片段、代码检查工具和其他 JavaScript 工具。

下一步

继续阅读以了解以下内容：

• Working with JavaScript - 关于VS Code的JavaScript支持以及如何解决常见问题的更详细信息。
• jsconfig.json - jsconfig.json 项目文件的详细描述。
• IntelliSense - 了解更多关于IntelliSense的信息以及如何有效地为您的语言使用它。
• Debugging - 学习如何为您的应用程序设置调试。
• 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。这告诉编译器创建合成的默认成员，您将获得IntelliSense。React Native在幕后使用Babel来创建带有默认成员的正确运行时代码。如果您还想调试React Native代码，可以安装React Native Extension。

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

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

IntelliSense 无法用于外部库

Automatic Type Acquisition 适用于通过 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 来验证您的源代码。

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

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