14 个 VSCode 扩展将提高你的工作效率

2020 年更新：这篇文章现已更新，新增了六个扩展。快去看看吧！

谁的效率更高：约翰，他在一小时内写了 100 行糟糕的代码，还是玛丽，她在一小时内写了 20 行优秀的代码？

大多数人都会同意，约翰的效率肯定不会是玛丽的五倍。但他的效率到底高多少呢？事实上，他真的比玛丽高吗？

很难确定一个开发人员是否比另一个开发人员更高效，原因在于质量。众所周知，对于注重产出质量的职业来说，生产力是很难定义的。

到目前为止，我发现对生产力的最佳定义是用更少的时间和精力获得你想要的结果。虽然这个定义比较模糊，但它是一个很好的起点，可以帮助你了解如何更快、更轻松地实现目标。

更高效的 VSCode 环境

IDE 扩展对于加快工作速度且不降低输出质量至关重要。考虑到 VSCode 是最受欢迎的 IDE，以下 14 个 VSCode 扩展将助您成为更高效的开发人员。

设置同步

在开始安装各种扩展程序之前，最好先了解一下“设置同步”的功能。它允许你将 VSCode 上几乎所有自定义的内容同步到 Github，从设置到键盘快捷键，再到其他 VSCode 扩展程序。

这样，您就可以从想要编程的任何设备访问您喜欢的 IDE，而不必从新设备上的原始 VSCode 环境进行编程，也不必再次手动设置所有内容。

实时服务器

这是我最喜欢的扩展之一。Live Server 可以启动本地开发服务器，并支持静态和动态页面的实时刷新功能。

每次保存代码时，您都会立即在浏览器中看到更改。这样您就可以更快地发现错误，并且更轻松地对代码进行一些快速实验。

括号对着色器

线索就在标题中，但是 Bracket Pair Colorizer 为开始和结束括号提供了匹配的颜色，从而更容易知道哪些括号属于一起。

还可以配置自定义括号字符，还可以为活动范围添加背景颜色。

自动重命名标签

虽然 VSCode 本身会突出显示匹配的标签，并在您键入开始标签时立即添加结束标签，但自动重命名标签会自动重命名您更改的标签。

该扩展适用于 HTML、XML、PHP 和 JavaScript，无需两次更改标签名称。

编辑：评论中的一些人提到自动重命名标签有很多错误，因此请小心操作。

CSS 速览

这个扩展对前端开发者来说非常宝贵。CSS Peek 的灵感来源于 IDE Brackets 中的类似功能，它允许你扩展 HTML 和 ejs 文件，以便在源代码中显示 CSS/SCSS/LESS 代码。

如果您知道类或 ID 名称，它还允许您快速跳转到正确的 CSS 代码。

JavaScript（ES6）代码片段

虽然 VSCode 包含内置的 JS IntelliSense，但 JS 代码片段通过添加大量导入/导出触发器、类助手和方法触发器来增强这种体验。

该扩展支持 JS、TypeScript、JS React、TS React、HTML 和 Vue。在 VSCode Marketplace 中，还可以轻松获取其他版本（例如 Angular）的代码片段。

代码拼写检查器

虽然拼写错误并非危及生命，但我更希望我的代码没有拼写错误。代码拼写检查器会在其字典文件中对无法识别的单词进行下划线。

该扩展程序支持多种语言，并支持医学术语等术语。

Chrome 调试器

Chrome 调试器由微软开发，可让您在 VSCode 中调试 JS 代码。与其他 IDE 中的调试器相比，它的运行速度出奇地流畅。

您可以设置断点、逐步执行代码、调试动态添加的脚本等等。

图标字体

Icon Fonts 提供各种图标字体的片段，包括流行的 Font Awesome v5 图标包。

对于那些不使用 VSCode 的用户，此包也适用于 Atom 和 Sublime Text。

TODO 突出显示

我承认。我经常把 TODO 写在评论里，然后就完全忘了。TODO 高亮功能能让它们更加醒目。

您可以切换突出显示，还可以列出所有突出显示的注释并从相应的文件中显示它们。

vscode 图标

你可能不会觉得图标有什么大用处，但图标确实很重要（至少对我来说）。VSCode-icons 为你的 IDE 增添了一抹亮色和可爱的小图标，我非常喜欢。

正则表达式预览器

正则表达式的正确使用可能相当棘手。Regex Previewer 会提供与您的正则表达式匹配的附加文档。

该扩展提供了多个匹配示例，因此可以更轻松地快速准确地为各种用例编写正则表达式。

书签

虽然 VSCode 有行号，但 Bookmarks 允许您在代码中添加书签，帮助您快速导航并轻松地来回跳转。

此外，它允许您在书签代码之间选择代码区域，这对于日志文件分析之类的操作非常有用。

Git 历史记录

Git History 是一个 VSCode 扩展，它提供了 git log 的可视化功能。这样你就不用再在终端里翻看 git log 了。

这个扩展功能相当全面。它允许你比较分支、提交以及跨提交的文件。你还可以查找 Github 头像，这很方便。

--

这 14 个 VSCode 扩展有助于提高编程效率，且不会影响质量。你最喜欢哪些扩展？请在下方评论区留言告诉我👇！