常用 VS Code plugin 介紹

這篇文章會介紹我平常常用的 VS Code plugin，也會依照不同的使用情境來分類，像是通用功能或前端開發時會用到的 plugin。

不分前後端

盤古之白

如果你透過 VS Code 撰寫 Markdown，文件裡很容易出現中英文、數字或符號交錯的情況；如果沒有在中英文之間加上空白，閱讀時就會有一點阿雜 (因為很容易忘記中英文之間需要空白，影響閱讀體驗)！

這時就可以使用它來自動整理格式。它會在中文與半形英文、數字、符號之間加入空白，也可以透過設定快捷鍵，快速重新整理 Markdown 文件的排版！

Array Index Inlay

當我的 array 裡面有很多元素，又需要和 Chrome 的開發者工具比對時，我很常使用它。

因為在 VS Code 裡數陣列的 index 時，非常容易數到眼睛脫窗。使用這個 plugin 後，符合條件的大型陣列旁會顯示 index，Chrome 與 VS Code 中對應的第 xx 個元素就能一眼比對！

Blueprint

像這個部落格的模板，就可以透過 Blueprint 快速產生每次寫文章時都會固定使用的檔案結構。

不論是前端、後端，或是寫文件，只要有固定格式，就很適合使用這個 plugin，先建立開發／撰寫新內容時會用到的檔案與資料夾結構。

建立好 template 後，使用 AI 建立新功能或資料夾結構時，也能更容易參考專案既有的格式，不用讓它從零開始摸索專案風格，再進行實作。

Code Spell Checker

這個 plugin 主要用來檢查 code、Markdown 文件或 .txt 等檔案中的英文拼字是否正確。

如果拼字不在字典中，文字下方就會顯示藍色波浪線，提醒你可能需要修正。也可以自行加入常用字詞，讓它認得這些字詞，不再顯示藍色波浪線！

CodeSnap

如果需要展示程式碼，或是在會議中進行 demo，通常用圖片呈現會比較清楚。CodeSnap 可以擷取選取的程式碼，保留語法高亮顯示，這個時候使用就非常方便！

Dev Containers

如果有需要透過 VS Code 搭配容器開發，非常推薦使用這個 plugin。它可以把 Docker 容器作為完整的開發環境，讓程式碼、工具鏈與執行環境和本機分開；如果專案包含 Dev Container 設定，VS Code 通常也會提示是否要在容器中開啟專案。

Git Blame

如果想在 VS Code 中快速知道某一行最近是誰修改的，就可以透過這個工具檢視 Git blame 資訊。如果要抓戰犯很好用，不然要追蹤每一行的變更，透過 Git 查找會有一點小麻煩。

Git Graph

如果想在 VS Code 中查看 Git 歷史紀錄，就可以透過 Git Graph 用 UI 視覺化呈現 repository 的分支與 commit 歷史，也能直接查看變更內容。

SVG Preview

有時候別人給我 SVG 圖片，透過 VS Code 打開時通常會看到一堆原始碼。如果想知道這些原始碼實際會渲染成什麼樣子的圖示，就可以使用這個工具，在 VS Code 中直接預覽 SVG 的結果。

前端

Auto Close Tag、Auto Rename Tag、Auto Complete Tag

雖然現在常透過 AI 撰寫 code，但偶爾還是需要自己調整內容，這通常比起再請 AI 修改更快。

如果你要編輯 HTML tag，這幾個都很好用：Auto Close Tag 會自動補上結尾 tag；Auto Rename Tag 會在修改其中一個 tag 時，同步修改配對的 tag；Auto Complete Tag 則整合前兩者的功能。編輯或新增 tag 時，不用再自己調整結尾的 HTML tag，也能省掉那個阿雜的感覺。

Error Lens

這個 plugin 可以在編輯程式碼時，將錯誤、警告或其他診斷訊息直接顯示在程式碼行尾，並標示出有問題的整行。這樣就能更快看到訊息並修正問題，提升開發效率。

ESLint

如果是前端專案，通常會需要 linter 讓程式碼風格在整個專案中保持一致。如果專案已經使用 ESLint，這個 plugin 就能把 ESLint 整合到 VS Code 中，直接在編輯器裡顯示檢查結果。

File Nesting Updater

這個 plugin 會自動更新 vscode-file-nesting-config，搭配 VS Code 的 File Nesting 功能，把常見的關聯檔案整理在同一個檔案樹節點下。像根目錄中常見的 .env 或 .gitignore 相關檔案，就不會在檔案樹中散落成一排，閱讀專案時會輕鬆很多。

Iconify IntelliSense

如果你的網頁會使用 Iconify 的圖示，這個 plugin 可以在 VS Code 中預覽引用的圖示，並提供 icon set 的自動完成。在這樣的情況下，就不用每次都特地切到瀏覽器透過 hot reload，才能確認圖示變成什麼樣子。

Import Cost

如果想知道 import package 的大小，就可以使用這個 plugin。它會直接在編輯器中顯示 import 的估算大小，讓你在匯入套件時先掌握帶入多少內容；之後如果要做 bundle 優化，也會比較容易判斷該從哪裡開始。

總結

以上就是我平常比較常用的 VS Code plugin，從 Markdown 排版、拼字檢查、模板與容器，到 Git 歷史、HTML tag 編輯、Iconify 圖示與 import 成本，都可以在不同情境下幫上一點忙。

當然不用一次全部安裝，還是可以依照自己的工作流程與實際需求挑選；有些功能也可能已經是 VS Code 內建的，先確認自己遇到的問題，再找適合的 plugin 來處理就好。

對我來說，這些 plugin 不一定會直接改變開發方式，但能把很多重複、容易出錯或讓人阿雜的小事處理掉，寫 code 或文件時就會順手很多！