優秀的 VS Code 前端開發擴充套件

Alexander Romano 原作，授權 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，所以在很多靜態站點生成器下效果不佳。