原文作者：?Ankur Biswas

翻譯：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 通訊」

總結

以上是生活随笔為你收集整理的vscode 显示多个文件_优秀的 VS Code 前端开发扩展的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。