9+1 个 Visual Studio Code 扩展，让开发更轻松快捷

声明：本文包含联盟链接；如果您通过本文提供的链接购买产品或服务，我可能会获得佣金。

Visual Studio Code 是我最喜欢的编辑器之一，因为它高度可定制。它有很多扩展程序可以大大简化你的工作，以下是一些能显著提升效率的优秀扩展程序。如果你是新手，不妨试试这些扩展程序，让你的 Web 开发体验更加高效便捷。

您可以在 VS Code 中浏览和安装扩展。单击 VS Code 侧边 活动栏中的“扩展”图标或使用“视图：扩展”命令（Ctrl+Shift+X）即可打开“扩展”视图。

欢迎分享你最喜欢的 VS Code 扩展程序。祝你玩得开心！

1 号在线服务器

在代码编辑器中修改代码，切换到浏览器，然后刷新页面查看更改。这就是开发者的无休止循环，但如果浏览器能在你每次修改代码时自动刷新呢？这就是 Live Server 的用武之地！

它还会在本地服务器上运行你的应用。有些功能只有在服务器上运行应用才能进行测试，所以这是一个不错的优势。

你在编辑器里修改代码后，必须刷新页面才能看到更改。是不是很真实？Live Server 扩展程序可以帮你实时查看更改，因为每次你在 VSCode 中保存时，浏览器都会自动刷新。

#2 括号对着色器

一款令人爱不释手的扩展程序。当代码嵌套层级过多时，匹配括号会变得非常棘手。“括号对着色器”会为匹配的括号着色，使代码更易读、更美观。

#3 更漂亮

再也不用担心代码格式化了！Prettier 可以帮你格式化代码，让它更美观（显而易见）。它还可以设置为在保存时自动格式化。

#4 CSS 预览

CSS Peek 非常实用，因为它能节省大量在 HTML 和 CSS 文件之间来回切换的时间。对于不喜欢分屏显示的开发者来说，它是一款非常便捷的扩展程序。只需将鼠标悬停在 HTML 文件中的选择器上，即可查看 CSS 代码的图像。CSS Peek 还能将 ID 和类名转换为超链接，直接指向它们在 CSS 文件中的定义。

#5 Chrome 调试器

Chrome 官方调试器是 VS Code 中最受欢迎的开发者扩展之一，它内置了多种功能，可帮助您直接从 VS Code 调试在 Chrome 浏览器中运行的 Javascript 文件。

#6 GitLens

这款扩展是 VS Code 最实用的扩展之一，当多个贡献者共同协作开发同一个代码库时，它能帮你轻松应对。历史记录、最近更改、代码作者信息、责任推卸信息和提交搜索是这款出色扩展的几大亮点。

#7 自动重命名标签

需要重命名 HTML 元素吗？使用 Auto Rename Tag 扩展程序，您只需重命名开始标签或结束标签，另一个标签就会自动重命名。简单高效！

#8 路径智能感知

如果你负责大型项目，记住所有目录和文件名可能非常棘手。这款扩展程序可以帮到你，当你开始在引号内输入路径时，它会自动显示文件名。

#9 浏览器预览

Live Server 扩展程序已经很棒了，但这个扩展程序更进一步，它允许你在编辑器内打开一个真实的浏览器预览，方便你进行调试。这样，每次进行小改动后，就无需再去浏览器里查看了。

#10 一位黑暗职业选手

如果你喜欢深色主题，Atom 标志性的 One Dark 主题一定会成为你的最爱。毫不奇怪，它也是 VS Code 下载量最高的主题之一！