参加你附近的 ，了解 VS Code 中的 AI 辅助开发。

JavaScript 扩展（第二部分）

2016 年 10 月 31 日，作者：Wade Anderson，@waderyan_

Visual Studio Code 对 JavaScript 开箱即用提供了出色的支持。与其他语言一样，JavaScript 由语言服务提供支持。JavaScript 语言服务由 TypeScript 团队实现，允许 JavaScript 开发人员利用最佳的 IntelliSense 体验。

但是，您还可以通过 VS Code 获得哪些其他功能？VS Code 拥有丰富的可扩展性模型，许多功能都是通过 VS Code 扩展提供的。这篇博文是我之前关于 JavaScript 扩展的博文的后续。

提示：通过单击“扩展视图”按钮，在“搜索”框中键入扩展名称，然后单击“安装”来安装这些扩展中的任何一个。在浏览扩展中了解更多信息。

Chrome 调试器

市场 - Chrome 调试器

发布者 - Microsoft

当您进行前端开发时，您可能看不到编辑器中集成调试器的价值。您使用的是浏览器的调试器，对吗？这就是 Chrome 调试器扩展发挥作用的地方。此扩展允许您在 Google Chrome 浏览器或任何其他支持Chrome 调试协议的目标中调试您的 JavaScript 代码，同时保持在 VS Code 中。无需再进行上下文切换来调试！

喜欢使用不同的浏览器进行调试？您还可以找到Edge和Firefox的扩展。

debugger for chrome image

Git 项目管理器

市场 - Git 项目管理器

发布者 - Felipe Caputo

尽管不一定是 JavaScript 扩展，但 Git 项目管理器是 VS Code 团队的最爱。此扩展扫描目录（或多个目录）以查找 Git 仓库，并允许您轻松地在它们之间切换。

要使用此扩展，请先安装它，然后将以下配置添加到您的settings.json文件中。

"gitProjectManager.baseProjectsFolders": [
    "/path/to/your/base/project/folders"
]

git project manager showcase

美化

市场 - 美化

发布者 - HookyQR

在内部，VS Code 使用js-beautify。此扩展允许您指定.jsbeautifyrc文件以指示 JavaScript、CSS、Sass 和 HTML 代码的格式样式。

您可以使用新的格式化程序类别在市场中搜索更多格式化程序。

注意：对于扩展作者，我们正在撰写一篇关于源代码格式化程序最佳实践的博文。敬请关注，它即将发布。

Sublime Text 和 Atom 的键绑定

本节有两个扩展，一个用于Atom，另一个用于Sublime Text。如果您使用过这些编辑器，您可能已经记住了它们的键盘快捷键。这些扩展将 Atom 和 Sublime Text 的键盘快捷键带到 VS Code。

这些扩展处于预览状态，因为我们希望获得您的反馈。仍然有许多快捷方式需要包含，并且您可以轻松添加我们可能遗漏的任何快捷方式。

  1. 转到扩展的 GitHub 仓库（Atom和Sublime Text）。
  2. 打开package.json文件（Atom和Sublime Text）。
  3. 如下所示，将 JSON 对象添加到package.json的contributes.keybindings部分（Atom和Sublime Text）。
  4. 打开拉取请求。
{
  "mac": "<keyboard shortcut for mac>",
  "linux": "<keyboard shortcut for linux",
  "win": "<keyboard shortcut for windows",
  "key": "<default keyboard shortcut>",
  "command": "<name of the command in VS Code"
}

您是否有其他编辑器或 IDE 想要为其创建键绑定？只需按照contributes.keybindings部分和键绑定文档中的说明进行操作。

键盘快捷键如雨般落下

如果您发现 VS Code 没有 Atom、Sublime Text 或其他产品的键盘快捷键功能，请在这些 GitHub 问题之一中发表评论（Atom和Sublime Text）或创建新问题。

此外，市场中有许多扩展添加了有用的键盘快捷键

创建您自己的 JavaScript 扩展

没有找到满足您需求的扩展。您可以用 JavaScript 或 TypeScript 制作自己的扩展！查阅文档以了解更多信息。

Wade Anderson，VS Code 团队成员
@waderyan_

© . This site is unofficial and not affiliated with Microsoft.