Visual Studio Code 中的 JavaScript

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

大多数功能开箱即用，有些可能需要基础配置以获得最佳体验。本页总结了VS Code自带的JavaScript功能。VS Code市场的扩展可以增强或更改大多数内置功能。关于这些功能的工作原理和配置更深入指南，请参见“JavaScript作”。

IntelliSense

IntelliSense 会为你展示智能代码补全、悬停信息和签名信息，让你能更快更准确地编写代码。

VS Code 在你的 JavaScript 项目中提供 IntelliSense;适用于许多 NPM 库，例如反应,洛达什， 和快车; 以及其他平台，如节点、无服务器或物联网。

请参阅《JavaScript作》，了解 VS Code 的 JavaScript IntelliSense、配置方法及常见问题排查帮助。

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"]
}

更高级的请参见“JavaScript工作”jsconfig.json配置。

片段

VS Code 包含基本的 JavaScript 片段，在你输入时会被推荐;

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

JSDoc 支持

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

快速创建函数注释，方法是在函数声明前输入，然后选择JSDoc注释摘要建议：/**

要禁用JSDoc评论建议，设置“javascript.suggest.completeJSDocs”： false.

悬停信息

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

⌘K ⌘I（Windows，Linux Ctrl+K Ctrl+I）键盘快捷键在当前光标位置显示该悬停信息。

签名帮助

当你编写JavaScript函数调用时，VS Code会显示函数签名的信息，并突出显示你当前正在完成的参数：

当你输入 a 或 时，签名帮助会自动显示(,在函数调用中。按⇧⌘空格键（Windows，Linux Ctrl+Shift+Space）可手动触发签名帮助。

汽车进口

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

只需开始输入，就能看到你当前项目中所有可用JavaScript符号的建议。自动导入建议显示它们将从哪里导入：

如果你选择了这些自动导入建议之一，VS Code 会为它添加一个导入。

在这个例子中，VS Code 添加了一个按钮从Material-UI到文件顶部：

要禁用自动导入，请设置“javascript.suggest.autoImports”到错误.

添加导入粘贴

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

这个功能默认是开启的，但你可以通过切换

你可以让带导入的粘贴成为默认行为，而不显示粘贴控制，方法是配置

组织导入

组织导入源作（Organize Imports Source Action）会对JavaScript文件中的导入进行排序，并移除所有未使用的导入：

你可以从源作的上下文菜单或 ⇧⌥O（Windows，Linux Shift+Alt+O）键盘快捷键中运行“组织导入”。

组织导入也可以在保存JavaScript文件时自动完成，方法是设置：

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

文件移动时更新导入

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

该

• “提示”- 默认。询问是否应该为每次文件移动更新路径。
• “永远”- 始终自动更新路径。
• “永远不会”- 不自动更新路径，也不提示。

格式

VS Code 内置的 JavaScript 格式化工具提供了基本的代码格式化，默认值合理。

该JavaScript.format.* 设置 配置内置格式化器。或者，如果内置的格式化器妨碍了作，可以设置“javascript.format.enable”到错误用来关闭它。

如果想要更专业的代码格式，可以试着安装市场上的JavaScript格式扩展。

JSX和自动关闭标签

VS Code 的所有 JavaScript 功能也支持 JSX：

你可以在普通情况下用 JSX 语法*.js文件和*.jsx文件。

VS Code 还包含 JSX 专属功能，如 JSX 标签的自动关闭：

赛场“javascript.autoClosingTags”到错误以禁用 JSX 标签关闭。

代码导航

代码导航让你能快速浏览JavaScript项目。

• 进入定义F12——进入符号定义的源代码。
• 窥视定义 ⌥F12（Windows Alt+F12，Linux Ctrl+Shift+F10）——调出显示符号定义的窥视窗口。
• 前往参考文献 ⇧F12（Windows，Linux Shift+F12）——显示所有符号的引用。
• 进入类型定义——进入定义符号的类型。对于类的实例，这会揭示该类本身，而不是实例定义的位置。

你可以通过命令面板中的“去到符号”命令（Windows，Linux Ctrl+Shift+P）中的“去到符号”命令进行导航。

• 进入文件中的符号 ⇧⌘O（Windows，Linux Ctrl+Shift+O）
• 在工作区 ⌘T 中切换到符号（Windows，Linux Ctrl+T）

更名

按F2可将光标下方的符号重命名，跨越你的JavaScript项目：

重构

VS Code 包含一些实用的 JavaScript 重构，如 Extract 函数和 Extract 常量。只需选择你想提取的源代码，然后点击排水沟里的灯泡，或者按（⌘.（Windows，Linux Ctrl+.）查看可用的重构。

可用的重构包括：

• 提取到方法或函数。
• 萃取物调到恒定。
• 在命名导入和命名空间导入之间转换。
• 移到新文件。

关于重构的更多信息以及如何为单个重构配置快捷键，请参见重构。

此外，代码动作小部件：包含附近的快速修复 (

该命令会高亮将通过快速修复重构或修复的源代码。正常的代码动作和非修复重构仍可在光标位置激活。

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

未使用的JavaScript代码，例如一个如果总是为真或未被引用的导入语句，在编辑器中会逐渐淡出：

你可以通过将光标放在它上并触发快速修复命令（⌘.（Windows，Linux Ctrl+.）或者点亮灯泡。

要禁用未使用代码的渐隐，请设置“编辑.show未使用”到错误.你也可以只在JavaScript中禁用未使用的代码，方法是设置：

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

保存时的代码作

该

// 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",
}

截至目前，支持以下枚举：

• 显式（默认）：明确保存时触发代码动作。和确实如此.
• 永远：在明确保存时触发代码动作，且自动保存时窗口或焦点变化。
• 绝不存档时从未触发代码动作。和错误.

你也可以设置

以下是一些来源作：

• “组织进口”- 支持存档时组织导入。
• “修复一切”- 自动修复存档（Auto Fix on Save on Ave）在一轮内计算所有可能的修复（涵盖所有提供者，包括 ESLint）。
• “fixAll.eslint”- 仅对ESLint进行自动修复。
• “addMissingImports”- 在存档中添加所有缺失的导入。

更多信息请参见Node.js/JavaScript。

代码建议

VS Code 会自动建议一些常见的代码简化，比如将 的链转换为。那么以承诺为代价异步以及等待

赛场“javascript.suggestionActions.enabled”到错误关闭建议。

用AI提升完成

GitHub Copilot 是一款由人工智能驱动的代码完成工具，帮助你更快更智能地编写代码。你可以在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. 有三种可能的数值：

• 没有— 禁用参数嵌入提示。
• 字面意义——仅显示字面值（字符串、数字、布尔值）的内嵌提示。
• 全部—— 所有论点都显示内嵌提示。

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

地点：

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

地点：

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

地点：

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

地点：

参考文献 CodeLens

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

要启用引用 CodeLens，设“javascript.referencesCodeLens.enabled”到确实如此.

点击参考文献数量，快速浏览参考文献列表：

林特

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

类型检查

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

TypeScript 尝试推断.js文件和在.ts文件。当类型无法推断时，可以用 JSDoc 注释显式指定。你可以在《使用 JavaScript》中了解更多关于 TypeScript 如何使用 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——了解更多关于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。此外，你还可以安装市场上流行的React Native扩展。

要启用 React Native 的 ES6 导入语句，你需要设置allowSyntheticDefaultImports编译器选项确实如此.这会告诉编译器创建合成默认成员，你就得到了IntelliSense。React Native 在幕后使用 Babel 创建带有默认成员的正确运行时代码。如果你也想调试 React Native 代码，可以安装 React Native 扩展。

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

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

IntelliSense 无法支持外部库

自动类型采集适用于NPM下载的依赖（具体如下）package.json）、鲍尔（指定在bower.json），以及你文件夹结构中列出的许多常见库（例如）jquery-3.1.1.min.js).

ES6风格导入无法正常工作。

如果你想使用 ES6 风格的导入，但某些类型声明（类型）文件尚未使用 ES6 风格导出，可以设置 TypeScript 编译器选项 allowSyntheticDefaultImports真是太真实了。

{
  "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： false你禁用了所有内置的语法检查。如果你这样做，我们建议你使用像 ESLint 这样的 linter 来验证你的源代码。

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

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