使用 VSCode 擴充套件可以顯著提升工作效率與程式碼可讀性。以下整理了幾個我日常使用並推薦的 Extension（皆為個人體驗，實際使用請評估自己的情境）。
增加美觀的工具
- Material Icon Theme — 自訂 VSCode 檔案與資料夾圖示樣式，支援多種主題、色彩與額外套件包，讓檔案結構更具視覺辨識度。
- Color Highlight — 直接在編輯器中高亮顯示 CSS/前端程式碼中的色彩值，包括 HEX、RGB、HSL 等格式。
- indent-colorizer — 將程式碼縮排以不同顏色標示,有助於快速辨識層級結構。在處理深層嵌套時非常實用,特別是跨越很多行的大 function。
開發輔助工具
- GitLens — 增強 Git 功能,查看每行程式碼的作者、提交紀錄及差異比較。一目了然每行是誰 commit 的,還不清楚的話可以調出歷史紀錄介面逐行對比(根本就是程式碼的行車記錄器)。
- Code Spell Checker — 偵測程式碼及文字中的拼字錯誤,支援多語言。這工具可以說是我的最愛第一名。曾經打錯字兩個月後才發現,我的錯字已經被所有同事同步到世界各地,這個無法挽回的錯誤是我永遠的痛。
- DevToys — 在 VSCode 中整合多種開發小工具,如編碼轉換、JSON 格式化等。不用多說,開發者的瑞士刀。
- Error Lens — 即時高亮顯示錯誤與警告,減少錯過問題的機會。讓強迫症患者強制解決問題,不然它會一直高亮提醒你還有問題。
- Live Sass Compiler — 即時將 .scss 或 .sass 編譯成 .css。在 Tailwind CSS 以及 CSS-in-JS 盛行的時代,出場機會越來越少,但維護舊專案時還是會需要。
- Prettier - Code formatter — 最多人使用的自動程式碼格式化工具。跟你的夥伴們講好規則一起用,不然大家不同格式就太精彩了。最好有自動化流程在每次提交 PR 之前把整個專案 format 一遍,不然一陣子過後大家還是各自為王(不要問我為什麼那麼清楚 T_T)。
- Todo Tree — 搜集並顯示 TODO/FIX 等註解,方便任務管理。跟上面的 Better Comments 結合使用,當 TODO 太多找不到時應該蠻方便的,也是提醒開發者思考為什麼 TODO 會那麼多 XD。
- GitHub Copilot — AI 智能程式碼補全與生成工具,極大提升開發速度。一個月 300 塊,提升開發速度 3 倍,真香。
- GitHub Copilot Chat — 與 Copilot 互動聊天,直接向 AI 詢問當前程式碼相關問題或產生程式碼。
- i18n Ally — 多語系專案管理助手,支援翻譯檔自動檢查與維護。i18n 如果沒有它,就準備找到眼花。
- Pretty TypeScript Errors — 讓 TypeScript 的錯誤訊息更易讀、易理解。
- YAML — YAML 語法支援與驗證工具,常用於設定檔編寫。