使用这 25 个扩展将 Visual Studio Code 变成一流的 JavaScript IDE

Visual Studio Code是一款出色的代码编辑器，它内置 JavaScript 和 TypeScript 功能，例如开箱即用的基本重构功能。然而，它真正的优势在于其出色的扩展市场。几乎所有你想在 IDE（集成开发环境）中实现的功能，都有扩展程序可供选择，它们可以让 VS Code 的性能提升数倍。

遗憾的是，找到合适的扩展并配置 VS Code 可能非常耗时。许多开发人员更喜欢Webstorm等 IDE 提供的开箱即用体验。这篇博文展示了 Visual Studio Code 扩展如何帮助您提升 JavaScript IDE 体验。内容涵盖：

• 代码完成和代码片段
• Linting、拼写检查和提示
• 格式化、代码操作和重构
• 编辑器支持更多文件类型
• 组织评论、待办事项和书签
• 测试
• 调试
• 版本控制
• 数据库、REST API 和 Docker 客户端

您可以使用JavaScript IDE 扩展包轻松安装25 个扩展，将 Visual Studio Code 转换为功能齐全的 JavaScript IDE。图标或颜色主题以及键盘快捷键映射不在此处介绍，也不包含在扩展包中，因为它们比大多数扩展更依赖于个人偏好。

让我们深入了解不同的功能，看看仅通过几个扩展就可以在 VS Code 中实现什么功能：

代码完成和代码片段

代码补全 (IntelliSense) 功能可以让你更快、更轻松地编写代码。Visual Studio Code默认为 JavaScript 和 TypeScript提供IntelliSense ，并包含强大的Emmet 支持，可用于扩展代码片段。

代码补全的最新趋势之一是 AI 助手。然而，我目前使用GitHub Copilot和Tabnine等 AI 代码补全助手的体验并不一致，因此我没有将它们包含在扩展包中，但它们可能对你很有用。

以下是一些可以提高您的工作效率的代码片段扩展：

ES7 React/Redux/GraphQL/React-Native 代码片段

ES7 代码片段扩展提供了许多可扩展的日常代码片段。例如，定义导入和导出、创建方法和循环以及返回 Promises。该扩展还包含许多适用于React和GraphQL 的代码片段。

埃米特现场演出

使用Emmet Live 扩展程序，您可以在编写 Emmet 缩写时预览EmmetEmmet Live输出。您可以使用以下命令启动它。

Vscode-随机

编写测试或创建模型时，通常需要花费一些时间来获取合适的模拟数据。您可以使用vscode-random 扩展程序生成各种随机数据，例如数字、位置、电子邮件、IP、名称和日期时间值。

Linting、拼写检查和提示

获取代码反馈的最佳时机是在编辑过程中，也就是说，当你可以快速修改代码并边写边学的时候。通过将 linting、拼写检查和其他建议集成到你的编辑过程中，你可以避免一些冗长的提交前检查和拉取请求往返。

代码拼写检查器

变量和函数名称、字符串、注释等中很容易出现拼写错误和小拼写错误。代码拼写检查器扩展会突出显示这些错误，并且通常可以提供正确的拼写作为修复。

ESLint

ESLint是最常用的 JavaScript linter。它可以帮助您“查找并修复 JavaScript 代码中的问题”。ESLint 具有极高的可扩展性和可配置性，许多团队都为其项目制定了自定义规则。ESLint扩展程序会直接在编辑器中显示错误和警告，并允许您轻松快速地修复它们。您还可以将其配置为在保存时自动修复任何问题。

误差透镜

错误镜头扩展程序可直接在编辑器中高亮显示错误、警告和信息消息。有了它，您无需费力去弄清楚波浪下划线的含义——它就在您的眼前。如果信息量过大，您可以使用命令轻松地根据不同的消息类型启用或禁用该扩展程序Error Lens: Toggle...。

格式化、代码操作和重构

Visual Studio Code 附带基本的重构和快速修复，例如Rename、Extract Method和Extract Variable。 可以使用扩展进一步增强编辑体验：

Prettier

手动格式化代码非常耗时且容易出错。使用Prettier（JavaScript 世界中事实上的标准代码格式化程序），您可以自动格式化代码。您甚至可以配置Prettier VS Code 扩展，在保存源代码时自动格式化。

更改大小写

更改大小写扩展添加了大量命令来更改所选文本的大小写，例如，更改为驼峰式大小写、蛇形大小写、帕斯卡式大小写等。所有命令都有Change Case前缀。

P42 JavaScript 助手

我开发的JavaScript 助手为VS Code 添加了60 多项重构、快速修复和代码操作。它包含 React 重构、ECMAScript 现代化、语法和语言元素转换、逻辑表达式和控制流操作以及代码清理。

编辑器支持更多文件类型

使用 JavaScript 和 TypeScript 时，还会涉及许多其他相关的文件类型。Visual Studio Code 已支持JSON、HTML、CSS和Markdown的编辑。以下扩展添加了更多增强的编辑器支持：

npm

npm 扩展验证文件中定义的已安装的 Node.js 模块package.json。

SVG预览

SVG预览扩展的功能正是如此：显示文件的预览.svg。您可以在预览中平移和缩放图像，并且当您编辑 SVG 源代码时，预览会自动更新。

更好的 TOML

TOML是一种配置文件格式，旨在简洁易读。Even Better TOML 扩展添加了全面的编辑器支持，包括语法高亮、折叠、导航和格式化。

组织评论、待办事项和书签

在大型开发项目中，这些项目通常持续多年，涉及众多开发人员，因此，保持注释和 TODO 项的条理性变得越来越重要。以下扩展程序可以帮助您实现这一点：

更好的评论

Better Comments 扩展程序会用不同的颜色显示不同类型的评论。它支持!、?和 等前缀TODO。

待办事项树

TODO 和 FIXME 很容易被遗忘和丢失。Todo Tree 扩展程序
会扫描您工作区中的文件，查找 TODO 和 FIXME 注释，并将其整理到侧边栏视图中。您可以按文件夹轻松浏览它们，并重新查看您注意到的重要项目。

书签

使用书签扩展程序，您可以保存和标记重要的源代码位置，并将它们整理到侧边栏面板中。当您探索复杂的代码库或经常返回某些位置时，此功能会非常实用。

测试

编写和运行测试是一项至关重要的开发活动。
尤其是在 IDE 中运行的单元测试有助于获得即时反馈。以下扩展程序为 VS Code 添加了测试运行器支持：

测试资源管理器

测试资源管理器是一组将测试无缝集成到 VS Code 的扩展程序。其测试资源管理器 UI 扩展程序添加了一个侧面板，用于运行测试并查看结果；测试资源管理器状态栏则在状态栏中添加了测试数量。

UI 组件显示测试适配器生成的信息。您需要哪种适配器进行测试取决于您的测试框架。对于 JavaScript，以下测试框架的测试适配器扩展可用：

• Mocha （包含在扩展包中）
• Jest （包含在扩展包中）
• 茉莉花
• Angular/Karma
• AVA
• TestyTs
• React 脚本

Visual Studio Code 在 1.59 版本中新增了原生测试功能。您可以在VS Code 设置中的测试资源管理器中testExplorer.useNativeTesting启用此功能。true

调试

Visual Studio Code 附带一个开箱即用的优秀JavaScript 调试器。它可以连接到 Node.js、 Edge 和 Chrome，因此在大多数情况下，JavaScript 调试无需额外的扩展。

版本控制

Git是最常用的版本控制系统 (VCS)，VS Code 也有很多优秀的扩展。你还可以在 VS Code 市场上找到其他 VCS 的扩展，例如Subversion 。

GitLens

GitLens扩展程序在源代码管理侧边栏中添加了多个面板，并通过信息叠加层增强了编辑器的功能。侧边栏面板可帮助您管理分支、存储、提交、文件历史记录和远程仓库，而编辑器扩展程序则包含追溯视图、变更指示、作者代码透视图等功能。GitLens 是一款必不可少的扩展程序，它使在 VS Code 中使用 Git 变得更加轻松。

Git 图表

Git Graph 扩展程序在编辑器面板中直观地显示 Git 历史记录。您可以使用“查看 Git Graph”命令打开它。在图形视图中，您可以探索单个提交并执行许多日常 Git 操作。例如，您可以检出分支和提交、创建分支、挑选提交、执行合并等。

数据库、REST API 和 Docker 客户端

开发全栈 JavaScript 通常意味着需要使用外部系统，例如数据库、REST API 和 Docker。以下扩展程序可将客户端添加到 VS Code：

数据库客户端

数据库客户端扩展允许您连接到 MySQL/MariaDB、PostgreSQL、SQLite、Redis 和 ElasticSearch。您可以在侧边栏面板中浏览数据库，以编辑器面板的形式打开数据库表，并运行自定义 SQL 查询。数据库表内容可编辑。您所做的任何更改都会立即存储在数据库中。

迅雷客户端

Thunder客户端扩展将 REST API 客户端集成到 VS Code 中。它是Postman的轻量级替代品。您可以发送任何类型的http(s)请求、查看响应数据，并将请求组织到集合中。

Docker

对于许多软件工程师来说，使用容器已经成为日常开发工作中必不可少的一部分。借助Docker 扩展程序，您可以探索正在运行的 Docker 容器，获取 Docker 文件的编辑器支持等等。

奖金

这是我发现非常有用的一个小奖励扩展：

CodeSnap

使用CodeSnap 扩展程序，您可以快速截取漂亮的代码屏幕截图。从CodeSnap命令开始，选择要截取屏幕截图的代码，然后单击“镜头”按钮。

结论

希望本文能为您提供一些关于扩展的建议，以提升您的 VS Code 体验。使用JavaScript IDE 扩展包，您可以安装所有扩展，然后禁用或卸载不符合您需求的扩展。