全端開發該裝的 VS Code 擴充：格式化、除錯跟日常工作流

這篇整理了我在 VS Code 上安裝的擴充功能，按照用途分類。這些擴充搭配起來構成了我的完整開發環境，從外觀設定、通用工具到各語言專用的開發工具都有涵蓋。

外觀與介面

開啟 VS Code 第一眼看到的就是這些，主題、圖示跟介面增強，讓長時間寫程式的體驗更舒適。

Material Icon Theme

讓 VS Code 的檔案圖示更好辨識，不同類型的檔案跟資料夾都有對應的 Material Design 風格圖示，在專案結構複雜的時候可以更快找到目標檔案。

One Dark Pro

我在用的佈景主題，配色舒適、對比適中，長時間看程式碼不容易疲勞。是從 Atom 編輯器經典的 One Dark 主題移植過來的。搭配的字體是 Roboto Mono，這是我自己用網站測試過各種等寬字體後，覺得視覺效果最舒服的選擇。如果你也想找到最適合自己的字體，可以試試 Dev Fonts 跟 Coding Font 這兩個網站來比較。

Chinese (Traditional) Language Pack

VS Code 的繁體中文語言包，把介面翻譯成中文，降低操作上的語言門檻。

Indent Rainbow

用不同顏色標示程式碼的縮排層級，在巢狀結構比較深的時候可以更快辨識目前在哪一層，減少縮排錯誤。

通用

不分語言都會用到的擴充，涵蓋 Git 管理、檔案操作、API 測試跟遠端開發。

GitLens

Git 增強擴充，可以在程式碼旁邊直接看到每一行是誰在什麼時候改的（blame），也能快速查看檔案的完整修改歷史，在追蹤問題來源的時候很實用。

Git Graph

用圖形化的方式呈現 Git 分支的歷史，可以清楚看到分支的合併、分叉跟提交紀錄。在處理比較複雜的分支流程時，比純命令列直覺很多。

Path Intellisense

在輸入檔案路徑時會自動補全，不用記住完整的路徑或手動翻資料夾結構，import 檔案的時候特別方便。

Todo Tree

會掃描專案裡所有的 TODO、FIXME 等標記，用樹狀結構整理在側邊欄裡，方便追蹤還沒處理完的待辦事項，不會遺漏。

Bookmarks

可以在程式碼裡標記書籤，快速跳轉到標記的位置。在閱讀大型專案或需要頻繁切換不同段落時很好用。

filesize

在狀態列顯示目前開啟檔案的大小，對於需要注意檔案體積的場景（像是圖片、打包後的檔案）很實用。

Remote - SSH

透過 SSH 連線到遠端伺服器，直接在 VS Code 裡編輯遠端的檔案，操作體驗跟在本地開發幾乎一樣。

Draw.io Integration

直接在 VS Code 裡開啟跟編輯 Draw.io 的圖表，不用切換到瀏覽器。畫流程圖、架構圖的時候可以跟程式碼放在一起管理。

Markdown PDF

可以直接在 VS Code 裡把 Markdown 檔案轉成 PDF，算是目前做 Markdown 轉 PDF 效果最好的套件。排版跟格式的還原度很高，需要產出文件的時候非常方便。

AI 開發工具

我搭配使用多個 AI 工具，Claude Code 負責主力開發，Codex 做 Review 二次檢查，Roo Code 跟 CodeRabbit 作為輔助。詳細的使用策略可以參考 AI 工具使用策略篇。

Claude Code

Anthropic 的 AI 開發工具，可以直接在 VS Code 裡使用 Claude 進行程式碼撰寫、重構跟除錯。是我目前主力使用的 AI 開發工具。

Codex

OpenAI 推出的 AI 開發工具，可以直接在 VS Code 裡使用。我主要拿它來做程式碼的 Review，搭配 Claude Code 互相檢查，確保程式碼品質。

Roo Code

開源的 AI 編碼助手，支援多種 AI 模型，可以在 VS Code 裡進行程式碼生成、編輯跟對話。彈性很高，可以自由選擇要使用的模型跟 API。

CodeRabbit

AI 驅動的程式碼 Review 工具，可以自動對 Pull Request 進行審查，提供程式碼品質、安全性跟效能方面的建議。

Python

Python 相關的 VS Code 擴充功能已整合到開發環境・Python 篇，包含 Python、Black Formatter、Ruff、Jupyter、Postman、REST Client 等擴充的完整介紹。

React 前端 / Astro

React 前端跟 Astro 相關的 VS Code 擴充功能已整合到開發環境・前端篇，包含 Prettier、ESLint、Tailwind CSS、PostCSS、Figma、Pencil、Astro、MDX 等擴充的完整介紹。