這篇文章純粹紀錄我自己在 Web 開發過程中實際用過、覺得方便的 VSCode 擴充套件，並不代表這些一定主流或特別好用，只是個人經驗隨手整理。內容不追求完整或熱門榜，純屬私人備忘，歡迎有興趣的人參考。 ※本清單會不定時更新，有新發現或更換習慣也會陸續補充。
AI 程式碼助手
| 套件名稱 |
說明 |
作者 |
Visual Studio Marketplace |
Open VSX |
| GitHub Copilot |
AI 驅動的程式碼補全工具，提供即時程式碼建議 |
GitHub |
✅ |
❌ |
| GitHub Copilot Chat |
GitHub Copilot 的聊天介面，可與 AI 對話協助開發 |
GitHub |
✅ |
❌ |
| Codeium |
免費的 AI 程式碼補全工具，提供智能程式碼建議 |
Codeium |
✅ |
✅ |
程式語言支援
| 套件名稱 |
說明 |
作者 |
Visual Studio Marketplace |
Open VSX |
| Angular Language Service |
提供 Angular 開發的語法高亮、程式碼補全等功能 |
Angular |
✅ |
✅ |
| Angular 1.x Snippets |
AngularJS 1.x 的程式碼片段集合 |
John Papa |
✅ |
✅ |
| Angular 2+ Snippets |
Angular 2+ 的程式碼片段集合 |
John Papa |
✅ |
✅ |
| Angular Switcher |
快速在 Angular 檔案間切換的工具 |
infinity1207 |
✅ |
✅ |
| Angular Beast Code |
Angular 開發的增強工具集 |
Mikael |
✅ |
✅ |
| Angular Console |
Angular CLI 的圖形化介面 |
Nrwl |
✅ |
✅ |
| AngularJS Snippets |
AngularJS 的程式碼片段 |
Nicholas Hsiang |
✅ |
✅ |
| PHP Intelephense |
高效的 PHP 語言伺服器，提供程式碼補全、定義跳轉等功能 |
Ben Mewburn |
✅ |
✅ |
| PHP IntelliSense |
PHP 的智慧提示和程式碼補全工具 |
Zobo |
✅ |
❓ |
| Tailwind CSS IntelliSense |
為 Tailwind CSS 提供智慧提示和程式碼補全 |
Brad Cornes |
✅ |
✅ |
| ESLint |
整合 ESLint，提供 JavaScript 和 TypeScript 的程式碼檢查 |
Dirk Baeumer |
✅ |
✅ |
| JavaScript (ES6) Code Snippets |
JavaScript ES6 的程式碼片段集合 |
Charalampos Karypidis |
✅ |
✅ |
| ES7+ React/Redux/React-Native Snippets |
React、Redux、React Native 的程式碼片段 |
dsznajder |
✅ |
✅ |
| jQuery Code Snippets |
jQuery 的程式碼片段集合 |
Don Jayamanne |
✅ |
✅ |
| GraphQL |
GraphQL 語法高亮和程式碼補全 |
GraphQL Foundation |
✅ |
✅ |
| GraphQL Syntax |
GraphQL 語法支援 |
GraphQL Foundation |
✅ |
✅ |
| Language Babel |
JavaScript Babel 語法支援 |
Michael McDermott |
✅ |
✅ |
| Styled Components |
為 styled-components 提供語法高亮和程式碼補全 |
Julien Poissonnier |
✅ |
✅ |
| language-stylus |
Stylus CSS 預處理器的語法支援 |
sysoev |
✅ |
✅ |
| Stylus Supremacy |
Stylus 程式碼格式化工具 |
thisismanta |
✅ |
✅ |
| Live Sass Compiler |
即時編譯 Sass/SCSS 檔案 |
Glenn Marks |
✅ |
✅ |
| SCSS Formatter |
SCSS 程式碼格式化工具 |
sibiraj-s |
✅ |
✅ |
| SCSS Everywhere |
在 HTML 中提供 CSS/SCSS 類別和 ID 的補全 |
gencer |
✅ |
✅ |
| Sass |
Sass 語法支援和自動排版 |
Syler |
✅ |
✅ |
| Vetur |
Vue.js 開發工具，提供語法高亮、補全和格式化 |
octref |
✅ |
✅ |
| XML |
XML 語法支援和工具 |
Red Hat |
✅ |
✅ |
| PowerShell |
PowerShell 語法支援和開發工具 |
Microsoft |
✅ |
❌ |
| Playwright Test |
Playwright 測試框架支援 |
Microsoft |
✅ |
❌ |
| Compile Hero Pro（Sass/Less/Stylus/Pug/Jade/TypeScript/JavaScript） |
多語言即時編譯、快捷自動化生產工具 |
Eno Yao |
✅ |
❓ |
程式碼品質與格式化
| 套件名稱 |
說明 |
作者 |
Visual Studio Marketplace |
Open VSX |
| Prettier - Code formatter |
自動格式化程式碼，支援多種程式語言 |
Prettier |
✅ |
✅ |
| HTMLHint |
HTML 程式碼檢查工具 |
HTMLHint |
✅ |
✅ |
| Code Spell Checker |
拼字檢查工具，支援多種程式語言 |
Street Side Software |
✅ |
✅ |
| YAML Sort |
YAML 檔案排序工具 |
Pascal Reitermann |
✅ |
✅ |
Git 與版本控制
| 套件名稱 |
說明 |
作者 |
Visual Studio Marketplace |
Open VSX |
| GitLens |
增強的 Git 功能，提供程式碼變更歷史、作者資訊等 |
Eric Amodio |
✅ |
✅ |
| Git Graph |
視覺化的 Git 分支圖表工具 |
mhutchie |
✅ |
✅ |
| GitHub Pull Requests and Issues |
在 VSCode 中查看和管理 GitHub Pull Requests 和 Issues |
GitHub |
✅ |
❌ |
| GitHub Actions |
GitHub Actions 工作流程編輯器 |
GitHub |
✅ |
❌ |
開發工具與生產力
| 套件名稱 |
說明 |
作者 |
Visual Studio Marketplace |
Open VSX |
| Path Intellisense |
自動補全檔案路徑 |
Christian Kohler |
✅ |
✅ |
| Auto Close Tag |
自動關閉 HTML/XML 標籤 |
Jun Han |
✅ |
✅ |
| Auto Rename Tag |
自動重命名成對的 HTML/XML 標籤 |
Jun Han |
✅ |
✅ |
| AutoFileName |
自動補全檔案名稱 |
Jerry Hong |
✅ |
✅ |
| Auto Import |
自動匯入模組和套件 |
Steoates |
✅ |
✅ |
| HTML CSS Support |
在 HTML 中提供 CSS 類別和 ID 的補全 |
Gencay |
✅ |
✅ |
| Live Server |
啟動本地開發伺服器，實現即時預覽 |
Ritwick Dey |
✅ |
✅ |
| REST Client |
在 VSCode 中直接發送 HTTP 請求，測試 API |
Huachao Mao |
✅ |
✅ |
| Thunder Client |
輕量級的 REST API 客戶端 |
Ranga Vadhineni |
✅ |
✅ |
| SQLTools |
資料庫管理工具，支援多種資料庫 |
Matheus Teixeira |
✅ |
✅ |
| SQLTools MySQL/MariaDB |
SQLTools 的 MySQL/MariaDB 驅動程式 |
Matheus Teixeira |
✅ |
✅ |
| MySQL |
MySQL 資料庫連線和查詢工具 |
formulahendry |
✅ |
✅ |
| Todo Tree |
在程式碼中標記和追蹤 TODO 註解 |
Gruntfuggly |
✅ |
✅ |
| Comment Translate |
自動翻譯程式碼註解 |
intellsmi |
✅ |
✅ |
| Chinese Lorem |
中文假文字生成工具 |
Kevin Yang |
✅ |
❓ |
| Lorem Ipsum |
假文字生成工具 |
Daniel Imms |
✅ |
✅ |
| Sort Lines |
排序選取的程式碼行 |
Daniel Imms |
✅ |
✅ |
| Encode Decode |
編碼解碼工具，支援多種格式 |
Mitch Denny |
✅ |
✅ |
| File Header |
自動生成檔案標頭註解 |
Mikey |
✅ |
✅ |
| CDNJS |
CDNJS 資源搜尋工具 |
Jake Wilson |
✅ |
❓ |
| Call Graph |
程式碼呼叫關係圖 |
Luo Zhihao |
✅ |
❓ |
| Open in Browser |
在瀏覽器中開啟檔案 |
TechER |
✅ |
✅ |
| Browser Preview |
在 VSCode 內建瀏覽器預覽網頁 |
auchenberg |
✅ |
✅ |
| WakaTime |
追蹤程式碼撰寫時間統計 |
WakaTime |
✅ |
✅ |
| Power Mode |
打字特效工具 |
hoovercj |
✅ |
✅ |
視覺輔助
| 套件名稱 |
說明 |
作者 |
Visual Studio Marketplace |
Open VSX |
| Bracket Pair Colorizer |
為大括弧配對上色，提升程式碼可讀性 |
CoenraadS |
✅ |
✅ |
| Highlight Matching Tag |
高亮顯示配對的 HTML/XML 標籤 |
vincaslt |
✅ |
✅ |
| indent-rainbow |
為縮排添加彩虹顏色，提升可讀性 |
oderwat |
✅ |
✅ |
| Image Preview |
在編輯器側邊顯示圖片預覽 |
Kiss Tamás |
✅ |
✅ |
| filesize |
在狀態列顯示檔案大小 |
mkxml |
✅ |
✅ |
| SVG Viewer |
預覽 SVG 格式圖片 |
cssho |
✅ |
✅ |
檔案處理
| 套件名稱 |
說明 |
作者 |
Visual Studio Marketplace |
Open VSX |
| Markdown All in One |
提供 Markdown 的完整支援，包括預覽、格式化等功能 |
Yu Zhang |
✅ |
✅ |
| Markdown PDF |
將 Markdown 檔案匯出為 PDF |
yzane |
✅ |
✅ |
| Docs Markdown |
協助撰寫和編輯 Markdown 文件，特別適用於技術文件，可快速生成 Markdown 標籤 |
Microsoft |
✅ |
❌ |
| Pangu-Markdown |
自動在中英文之間加入空格，提升 Markdown 可讀性 |
xlthu |
✅ |
✅ |
| Edit CSV |
CSV 檔案編輯器 |
janisdd |
✅ |
✅ |
| Rainbow CSV |
為 CSV 檔案添加顏色標記 |
mechatroner |
✅ |
✅ |
| Print Code |
列印程式碼工具 |
pdconsec |
✅ |
❓ |
圖片處理
| 套件名稱 |
說明 |
作者 |
Visual Studio Marketplace |
Open VSX |
| Paste Image |
貼上圖片並自動儲存 |
mushan |
✅ |
✅ |
| PicGo |
快速上傳圖片到圖床並轉換為 Markdown 格式 |
Spades |
✅ |
✅ |
| vscode-imgur |
快速上傳圖片到 Imgur |
Maxfield Walker |
✅ |
✅ |
| Fake Image Snippet Collection |
快速插入假圖片 URL |
yoyoys |
✅ |
✅ |
遠端開發
| 套件名稱 |
說明 |
作者 |
Visual Studio Marketplace |
Open VSX |
| Remote - SSH |
透過 SSH 連線到遠端伺服器進行開發 |
Microsoft |
✅ |
❌ |
| Remote - SSH: Editing Configuration Files |
編輯 SSH 設定檔的工具 |
Microsoft |
✅ |
❌ |
| Remote Explorer |
遠端連線管理工具 |
Microsoft |
✅ |
❌ |
語言包
| 套件名稱 |
說明 |
作者 |
Visual Studio Marketplace |
Open VSX |
| Chinese (Traditional) Language Pack |
繁體中文語言包 |
Microsoft |
✅ |
✅ |