在Visual Studio Code中使用JavaScript

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

这些功能中的大多数都可以开箱即用，但也有一些可能需要基本配置才能获得最佳体验。此页面总结了 VS Code 预装的 JavaScript 功能。来自 VS Code 市场 的扩展可以增强或更改这些内置功能。有关这些功能的工作原理和配置方法的更深入指南，请参阅 处理 JavaScript。

智能感知

IntelliSense 会为您提供智能代码完成、悬停信息和签名信息，使您可以更快速、更准确地编写代码。

VS Code 在你的 JavaScript 项目中提供 IntelliSense；对于许多 npm 库，例如反应，lodash，和表达; 并且对于其他平台如节点, 无服务器, 或物联网。

参见使用JavaScript，了解有关VS Code的JavaScript代码感知、如何配置它以及如何解决常见的代码感知问题。

JavaScript 项目 (jsconfig.json)

A 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 注释 摘录建议：

要禁用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 文件顶部：

要禁用自动导入，请设置"javascript.suggest.autoImports"至假的输入：.

粘贴时添加导入

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

此功能默认启用，但您可以切换该选项来禁用它。

您可以通过配置来实现默认行为，即在不显示粘贴控制的情况下进行粘贴导入。

组织进口

该整理导入 源操作会将导入项排序，并移除任何未使用的导入项：

你可以运行组织导入从源操作上下文菜单中，或者使用⇧⌥O（Windows, LinuxShift+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:

你可以在普通的 *.js文件和在*.jsx文件。

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

设置"javascript.autoClosingTags"至假的禁用 JSX 标签闭合。

代码导航

代码导航可以让你快速导航JavaScript项目。

• 转到定义 F12 - 转到符号定义的源代码。
• 查看定义 ⌥F12 (Windows Alt+F12, Linux Ctrl+Shift+F10) - 弹出一个显示符号定义的PeekWindows。
• 转到引用 ⇧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 代码重构功能，例如 提取函数 和 提取常量。只需选择您要提取的源代码，然后点击 gutter 中的灯泡或按 (⌘. (Windows, Linux Ctrl+.)) 查看可用的重构功能。

可用的重构包括：

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

参见重构以获取有关重构的更多信息以及如何为单个重构配置键盘快捷键。

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

该命令会突出显示将被快速修复、重构或修复的源代码。正常代码操作和非修复重构仍然可以在光标位置激活。

未使用的变量和无法到达的代码

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

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

要禁用未使用代码的淡出效果，请设置"editor.showUnused"至假的您还可以通过设置禁用JavaScript中未使用的代码的淡入淡出效果：

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

保存时的代码操作

该

// 显式保存时，运行 fixAll 源操作。自动保存（Windows或焦点更改）时，运行 organizeImports 源操作。
"editor.codeActionsOnSave": {
    "source.fixAll": "explicit",
    "source.organizeImports": "always",
}

截至今天，支持以下枚举类型：

• 明确的(默认)：在显式保存时触发代码操作。同真输入：.
• 总是触发代码操作：当显式保存和因Windows或焦点变化自动保存时。
• 从不: 从不触发保存时的代码操作。与相同。假的输入：.

你也可以设置

以下是一些源操作：

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

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

代码建议

VS Code自动建议一些常见的代码简化，例如将链式转换转换为.然后呼吁使用承诺异步和等待

设置"javascript.suggestionActions.enabled"至假的禁用建议。

增强AI完成度

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

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

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

一旦你安装并启用了Copilot扩展，你就可以在你的JavaScript项目中进行测试。

创建新文件 - 您可以使用文件: 新文件命令在命令面板中 (F1)。

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

函数 calculateDaysBetweenDates(开始, 结束) {

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

镶嵌提示

内联提示向源代码添加额外的内联信息，以帮助您了解代码的作用。

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

这可以帮助你一眼就理解每个参数的含义，这对于使用布尔标志或有容易混淆的参数的函数特别有帮助。

要启用参数名称提示，请设置javascript.内联提示.参数名称有三种可能的值：

• 无— 禁用参数内嵌提示。
• 文字— 仅在文字（字符串、数字、布尔值）上显示内联提示。
• 全部— 显示所有参数的内联提示。

变量类型嵌入提示显示没有明确类型注解的变量类型。

设置:

属性类型嵌入提示 显示没有明确类型注释的类属性的类型。

设置:

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

设置:

返回类型嵌入提示显示没有明确类型注释函数的返回类型。

设置:

参考文献 CodeLens

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

要启用引用 CodeLens，请设置"javascript.referencesCodeLens.enabled"至真输入：.

点击参考计数以快速浏览参考列表：

检查器

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

类型检查

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

TypeScript 尝试推断类型在.js以与在相同的方式处理文件输入：.ts 文件。当类型无法推断时，可以通过 JSDoc 注释明确指定。您可以在 处理JavaScript 中阅读有关 TypeScript 如何使用 JSDoc 进行 JavaScript 类型检查的更多信息。

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

调试

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

调试客户端侧

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

调试服务器端

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

热门扩展

VS Code 附带了对 JavaScript 的出色支持，但您还可以通过扩展安装调试器、片段、检查器和其他 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。您将从自动下载的类型声明（typings）文件中获得 React/JSX 和 React Native 的 IntelliSense，这些文件来自 npmjs 类型声明文件仓库。此外，您可以从 Marketplace 安装流行的 React Native 扩展。

要为React Native启用 ES6 导入语句，您需要设置允许合成默认导入编译器选项至真这告诉编译器创建合成的默认成员，从而获得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编译器选项 允许合成默认导入到真的。

{
  "compilerOptions": {
    "module": "CommonJS",
    "target": "ES6",
    // 这是你要添加的行
    "allowSyntheticDefaultImports": true
  },
  "exclude": ["node_modules", "**/node_modules/*"]
}

我能调试压缩/丑化的JavaScript吗？

是的，你可以。你可以在Node.js 调试主题中看到这是如何使用的。

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

一些用户希望使用像提议的管道一样的语法结构输入：|>) 操作符。然而，这些目前不被 VS Code 的 JavaScript 语言服务支持，并且会被标记为错误。对于仍然希望使用这些未来功能的用户，我们提供

有javascript.validate.enable: 否，你禁用了所有内置的语法检查。如果你这样做，我们建议你使用像ESLint这样的工具来验证你的源代码。

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

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