优秀的 VS Code 前端开发扩展

Posted 2021-04-08 LeanCloud通讯

翻译：weakish@LeanCloud

原链接可点击文末左下角「阅读原文」

我留意到，网上有不少关于 VS Code 的文章，然而这些文章提到的扩展大部分都让我失望。所以我决定编写我个人使用的插件列表。

前端为主的开发者，想高效使用 Visual Studio Code，我觉得这个列表会很有帮助。其中一些插件你大概已经装了 - 因为它们是被推荐最多的扩展 - 但还有一些你也许没装。

方便阅读

Beautify - 放大标记，调整间距，让 html、CSS、JS 更易阅读。

Better Comments - 在代码中创建对人类更友好的注释。我一直用这个扩展。它是我们研发团队必备扩展。

Bookmarks - 助你浏览代码，在重要位置之间方便快速地移动。搭配 MetaGo 使用，写代码的时候我基本不用鼠标。

MetaGo - 让通过键盘移动光标和选取内容快得不像话，彻底改变了我使用 VS Code 的方式。

Log File Highlighter - 顾名思义，让 VSCode 支持 .log 文件。读日志文件再也不觉得费眼了。

Guides - 有了这个扩展，再也不需要折叠、展开那些该死的元素来搞清楚缩进了。搭配之前提到的 Beautify 和下面的 Rainbow Brackets 使用，效果更佳。

Rainbow Brackets - 高亮当前括号对，其他括号使用不同配色，让定位变得极为容易。重度 JS 开发者的最爱。

Image Preview - 在 gutter 和光标悬浮时显示图片预览。检查是否引用了正确的图片/图标的关键所在。

GitLens - 无疑是最常用的扩展之一；VS Code 不可或缺的扩展，让 Git 体验好上太多。搭配 .gitignore 和 .diff 插件可以补足功能。

快速编写

CSS Peek - 借鉴了 Bracket 的 CSS Inline Editors。VS Code 现在有了我最爱的 Brackets 特性之一。

stylelint - 既然我们 lint JS 代码，为什么不同时 lint LESS/SASS/CSS 代码呢？这个扩展有助于快速清理写得比较随意的 CSS。

Live Server - 最佳本地开发服务器，支持实时重载静态和动态页面（甚至支持 php！）

Version Lens - 将 package.json 中指定的依赖和开发依赖更新到最新版本。由 Mihail 推荐。

DotENV - 为 .env 文件增加高亮支持，有时候我需要推送代码到 Heroku、Netlify……

美观抓屏

Polacode - 高亮代码并抓屏，展示下你的代码配色方案。想在教程或文档中提供代码示例时很有用。

多个实例

Settings Sync - 使用私密 gist 保存配置文件，在多个 VS Code 实例间同步设置、代码片段、主题、文件图标、任务、键绑定、工作区、扩展。这个扩展让我只需使用两个简单命令，便可同步笔记本、工作台式机、家用台式机的 VS Code。

EditorConfig - 使用 .editorconfig 文件中的配置覆盖用户/工作区配置，让开发团队在同一个项目内统一特定配置。

虽然我还装了很多其他插件，不过它们主要针对我使用的环境（前端 web + Azure 云），所以就这样吧。我希望，在你日常使用 VS Code 的过程中，这些扩展能有帮助。

值得一提

根据读者留言反馈，我新增了一些值得列入的扩展：

Import Cost - 显示 import 语句的文件尺寸开销。由 miku86 推荐。

Window Colors - 运行多个 VS Code 实例？每个窗口使用一种颜色，免得忘了哪个项目在哪个窗口里。由 Jefry Pozo 推荐。

Prettier - 美化代码，使其更为清晰。Stackoverflow 使用 Prettier 显示代码片段。不过，它无法处理 .js/.ejs/.jade/.pug模板中的 HTML，所以在很多静态站点生成器下效果不佳。

你早就装了这些扩展？你是否喜欢或者讨厌这些扩展？有其他我没提到的值得一试的插件？欢迎留言！

end

LeanCloud，领先的 BaaS 提供商，为移动开发提供强有力的后端支持。更多内容请关注「 LeanCloud 通讯」