VS Code 擴充套件推薦：前端工程師必裝的 19 款套件
VS Code 本身只是一個輕量的程式碼編輯器，真正讓它變得跟 IDE 一樣強大的關鍵，是背後數以萬計的 擴充套件（Extensions）。這篇整理了前端工程師最常用的 19 款套件，依照用途分類，並附上安裝方式與使用建議。
什麼是 VS Code 擴充套件
擴充套件是由微軟官方或社群開發者發布的功能模組，可以為 VS Code 補上原本沒有的能力，例如：
- 語言支援：語法突顯、自動補完、跳轉定義（如 Vue、Python）。
- 開發工具：本地伺服器、除錯器、資料庫連線。
- 程式碼品質：格式化、靜態檢查、拼字檢查。
- 介面外觀：佈景主題、圖示主題、字型連字。
所有套件都集中在 Visual Studio Marketplace 上架，可在編輯器內直接搜尋安裝。
如何安裝 VS Code 擴充套件
方法一：從編輯器安裝（最常用）
- 點擊左側活動列的 擴充功能（Extensions） 圖示，或按下
Ctrl+Shift+X（macOS 為Cmd+Shift+X）。 - 在搜尋框輸入套件名稱。
- 確認 發行者（Publisher） 與安裝數正確後，點擊 Install。
注意
Marketplace 上有大量同名套件，安裝前務必確認發行者。本文每個套件都標示了正確的發行者與擴充套件 ID。
方法二：使用指令列安裝
若安裝 VS Code 時有勾選「加入 PATH」，就能用 code 指令批次安裝：
code --install-extension esbenp.prettier-vscode
code --install-extension ritwickdey.LiveServer方法三：團隊共用推薦清單
在專案根目錄建立 .vscode/extensions.json，隊友開啟專案時，VS Code 會自動提示安裝這些套件，讓整個團隊的開發環境保持一致：
{
"recommendations": ["esbenp.prettier-vscode", "dbaeumer.vscode-eslint"]
}介面與中文化
Chinese (Traditional) Language Pack for Visual Studio Code
Chinese (Traditional) Language Pack for Visual Studio Code 是微軟官方的繁體中文語言包，能將選單、命令面板與系統提示轉為繁體中文，大幅降低閱讀門檻。它隨官方版本同步更新且不影響效能，新手建議先調成看得習慣的語言。其他語言的語言包切換方式也完全相同。
Material Icon Theme
Material Icon Theme 會依照副檔名與資料夾名稱，替檔案總管換上一整套識別度極高的彩色圖示。專案結構越龐大，光靠檔名閱讀越吃力；有了圖示就能一眼分辨出元件、設定檔、圖片或 node_modules。圖示與資料夾配色都能自訂，深淺色主題下都很清楚。
框架與語言支援
Vue (Official)
Vue (Official) 是 Vue 官方維護的擴充套件（前身為 Volar），也是開發 Vue 3 的標準配備。它讓 .vue 檔的 <template>、<script setup>、<style> 都獲得語法突顯與智慧提示，並支援模板型別檢查與跳轉定義。搭配 TypeScript 使用時，型別提示的效果最明顯。
UnoCSS
UnoCSS 是原子化 CSS 引擎 UnoCSS 的官方擴充套件。它會讀取專案中的 uno.config.ts，在輸入 class 時提供自動補完，游標懸停即顯示實際產生的 CSS，能避免拼錯類別導致樣式默默失效。設定檔更新後提示內容會即時同步，不必重新載入視窗即可生效。
JavaScript (ES6) code snippets
JavaScript (ES6) code snippets 提供一整套 ES6 程式碼片段，輸入縮寫再按 Tab 即可展開，例如：clg 展開為 console.log()。它同時支援 JavaScript、TypeScript、Vue 與 React，能明顯減少重複打字。片段涵蓋 Promise、class、解構賦值與常用陣列方法，翻一遍等於複習一輪 ES6 語法。
開發預覽
Live Server
Live Server 能在本機快速架起 HTTP 伺服器並提供即時重新載入，儲存檔案後瀏覽器就自動更新畫面。由於以標準 HTTP 協定運行，也能解決直接開檔常見的跨域限制，還支援區域網路多裝置預覽。啟動與停止都在狀態列一鍵完成，幾乎沒有學習成本。
Image preview
Image preview 能在程式碼行號旁顯示圖片縮圖，游標懸停於路徑時彈出大圖預覽，並附上解析度與檔案大小。它支援 PNG、JPG、SVG 與外部網址，寫版面時不必再逐一開啟圖檔確認內容。縮圖尺寸與顯示位置都能在設定中調整，也可以只留懸停預覽。
Svg Preview
Svg Preview 會在編輯器旁開啟即時預覽面板，讓您一邊改 SVG 原始碼一邊看到圖形變化。光看 path 裡那串座標很難想像結果，有了預覽，調整 viewBox、顏色或路徑都能立刻確認。面板支援縮放與置中檢視，檢查設計稿切出的圖示特別方便。
Markdown Preview Enhanced
Markdown Preview Enhanced 大幅強化了內建的 Markdown 預覽，支援即時同步捲動、數學公式、Mermaid 流程圖與自訂樣式，並能一鍵匯出成 HTML、PDF 或圖片，寫完即可直接輸出成能交付的文件。匯出時可套用自訂樣式，做出能直接交付給同事或客戶的版面。
程式碼品質
Prettier - Code formatter
Prettier - Code formatter 是最主流的程式碼格式化工具，會把程式碼解析成語法樹再重新輸出，套用統一的縮排與換行規則，支援 JS、TS、CSS、HTML、Vue 等格式，能徹底消除團隊之間的風格爭論。規則可寫進專案設定檔，讓全隊共用同一份標準。
ESLint
ESLint 是 JavaScript 與 TypeScript 生態中最主流的靜態檢查工具，會在您打字的當下標出未使用的變數、未定義的參照等問題，把執行期才會爆的錯誤提前攔截。與只管排版的 Prettier 定位互補。規則能依專案需求開關，也可以直接沿用社群整理好的推薦組合。
ESLint Chinese Rules
ESLint Chinese Rules 會把 ESLint 的規則說明翻譯成中文，程式碼被標記時懸停即可看到中文解釋與範例。對初學者來說，看懂「為什麼這樣寫不行」比知道「這裡有錯」更重要，安裝後免設定即生效。作者也把規則清單整理成中文說明頁，可以直接查閱。
效率工具
Auto Rename Tag
Auto Rename Tag 解決 HTML 編輯中最惱人的小事：改了開始標籤，結束標籤卻沒跟著改。安裝後更動 <div> 的名稱，對應的 </div> 就會同步更新，支援 HTML、Vue、JSX 等語法。在巢狀結構複雜的版型中，一個沒改到的標籤就足以讓整頁排版崩壞。
Path Intellisense
Path Intellisense 會在您輸入檔案路徑時，自動列出該目錄下的資料夾與檔案。無論是 <img src>、CSS 的 url() 或 import 都不必再核對路徑，可避免大小寫拼錯造成的上線 404。另外，它也支援專案設定的路徑別名，以 @ 開頭的匯入路徑同樣能正確提示。
Todo Tree
Todo Tree 會掃描整個專案，把註解裡的 TODO、FIXME、BUG 集中成側邊欄的樹狀清單，點擊即可跳到該行。臨時留下的待辦不再被遺忘，提交前也能快速確認沒有漏掉。標記的關鍵字與顏色都可以自訂，也能排除不需要掃描的資料夾。
Copy filename
Copy filename 補足了 VS Code 的小缺憾：內建功能只能複製完整或相對路徑，想要純檔名還得手動修剪。安裝後在檔案總管或編輯器分頁點右鍵，即可一鍵複製純檔名或不含副檔名的名稱。撰寫 Commit 訊息、PR 說明或引入模組時特別省事。
Code Runner
Code Runner 讓您不必開啟外部終端機，按下快捷鍵就能直接在編輯器內執行程式並看到輸出。它支援四十多種語言，也可以反白選取某一段程式碼單獨執行，很適合練習演算法或驗證語法。支援的語言與對應的執行指令也都能自行擴充。
版本控制
GitLens
GitLens 把 Git 歷史直接攤在程式碼旁邊。游標停在任何一行，行末就會顯示這行是誰、何時、為了哪個 Commit 而改，並可展開完整差異，追查 Bug 來源或理解陌生專案時特別好用。另外，側邊欄還提供分支、標籤與遠端儲存庫的檢視面板。
Git Graph
Git Graph 把 Commit 歷史畫成彩色的分支線圖，分支從哪裡長出、何時合併一目了然。點擊節點可看該次提交的差異，也能直接執行 Checkout、Merge、Rebase，呈現的是專案的分支全貌。另外，操作前會先顯示即將執行的 Git 指令，很適合邊用邊學。
懶人包：一次安裝所有套件
把以下指令貼進終端機，即可一次安裝本文推薦的全部套件：
code --install-extension MS-CEINTL.vscode-language-pack-zh-hant
code --install-extension PKief.material-icon-theme
code --install-extension Vue.volar
code --install-extension antfu.unocss
code --install-extension xabikos.JavaScriptSnippets
code --install-extension ritwickdey.LiveServer
code --install-extension kisstkondoros.vscode-gutter-preview
code --install-extension SimonSiefke.svg-preview
code --install-extension shd101wyy.markdown-preview-enhanced
code --install-extension esbenp.prettier-vscode
code --install-extension dbaeumer.vscode-eslint
code --install-extension maggie.eslint-rules-zh-plugin
code --install-extension formulahendry.auto-rename-tag
code --install-extension christian-kohler.path-intellisense
code --install-extension Gruntfuggly.todo-tree
code --install-extension jack89ita.copy-filename
code --install-extension formulahendry.code-runner
code --install-extension eamodio.gitlens
code --install-extension mhutchie.git-graph推薦的 VS Code 設定（settings.json）
安裝完套件後，開啟命令面板執行 Preferences: Open User Settings (JSON)，把以下設定貼進 settings.json，即可讓上述套件發揮完整效果：
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"code-runner.runInTerminal": true,
"workbench.iconTheme": "material-icon-theme"
}| 設定項目 | 作用 |
|---|---|
editor.defaultFormatter | 指定 Prettier 為預設的格式化工具 |
editor.formatOnSave | 每次存檔時自動格式化 |
code-runner.runInTerminal | Code Runner 改在整合終端機執行，才能輸入資料 |
workbench.iconTheme | 套用 Material Icon Theme 的檔案圖示 |
使用 VS Code 擴充套件的注意事項
只裝目前需要的
每個擴充套件都會佔用記憶體，部分套件還會在背景掃描整個專案。裝越多，啟動速度與輸入延遲就越明顯。
善用「工作區停用」
在擴充功能列表的套件上點擊右鍵，可選擇 停用（工作區）。例如：Python 相關套件只在 Python 專案啟用，前端專案就讓它休息。
安裝前確認來源
Marketplace 允許任何人上架，請確認 發行者名稱、安裝數 與 評分，避免安裝到假冒熱門套件的惡意擴充。
找出拖慢速度的兇手
按下 Ctrl + Shift + P 執行 Developer: Show Running Extensions，即可看到每個套件的啟動耗時，找出真正的效能瓶頸。
VS Code 擴充套件常見問題
擴充套件安裝後沒有作用怎麼辦？
多數套件需要重新載入視窗才會生效，可執行命令面板中的 Developer: Reload Window。若仍無效，請確認該套件是否在目前工作區被停用，或是否需要專案先安裝對應的 npm 套件（如 ESLint、Prettier）。
Prettier 和 ESLint 會衝突嗎？
兩者職責不同：Prettier 管排版、ESLint 管邏輯。只有在 ESLint 設定中同時啟用了排版類規則時才會互相打架，此時可透過 eslint-config-prettier 關閉重複的排版規則。
換電腦後要重裝所有套件嗎？
不用。開啟 VS Code 的 設定同步（Settings Sync） 並登入 GitHub 或 Microsoft 帳號，擴充套件、設定與快捷鍵都會自動還原。
