作為前端開發者，選擇合適的 VSCode 擴展能讓我們的開發效率突飛猛進。分享 14 個實用的 VSCode 擴展，它們將從代碼提示、調試、格式化等多個維度提升我們的開發體驗。

1. GitHub Copilot - AI 代碼助手

GitHub Copilot 是一個革命性的 AI 編碼助手（前段時間提供了免費額度），它能理解你的編碼意圖并提供智能建議：

• 實時代碼建議：根據上下文自動補全整行或整個函數
• 自然語言轉代碼：通過注釋描述功能，AI 自動生成對應代碼
• 多語言支持：支持 JavaScript、TypeScript、Python 等主流語言
• 最佳實踐建議：提供符合現代編程規范的代碼建議

?? 進階技巧：使用 Alt + ] 可以在多個建議之間切換，寫注釋時多描述業務邏輯而不是具體實現。

2. ESLint - 代碼質量守護者

ESLint 不僅僅是一個語法檢查工具，更是提升代碼質量的重要助手：

• 自動修復：配置 editor.codeActionsOnSave 實現保存時自動修復
• 自定義規則：結合項目實際，定制團隊專屬的編碼規范
• 插件生態：通過插件擴展支持 React、Vue 等框架的特定規則
• 性能優化：支持增量檢查，提高大型項目的檢查效率

3. Prettier - 代碼格式化專家

Prettier 是一款固執己見的代碼格式化工具，能確保團隊代碼風格統一：

• 零配置：采用最佳實踐的默認配置，開箱即用
• 廣泛支持：支持 HTML、CSS、JS、TS、JSON 等多種文件格式
• Git 集成：配合 husky 實現提交前自動格式化
• 與 ESLint 協作：通過 eslint-config-prettier 解決沖突

?? 最佳實踐：將 Prettier 配置文件放在項目根目錄，并在 .vscode/settings.json 中設置為默認格式化工具。

4. CSS Peek - CSS 開發利器

CSS Peek 讓你能夠直接從 HTML 文件跳轉到對應的 CSS 定義：

• 快速導航：按住 Ctrl 點擊類名直接跳轉到樣式定義
• 內聯預覽：懸停顯示樣式預覽窗口
• 智能提示：自動補全項目中已定義的類名
• 支持預處理器：完整支持 SCSS、Less 等預處理器文件

5. Error Lens - 錯誤即時反饋

Error Lens 將錯誤、警告和信息直接顯示在代碼行內：

• 即時反饋：在代碼行尾顯示完整的錯誤信息
• 多級別展示：使用不同顏色區分錯誤、警告和提示
• 自定義樣式：支持配置信息顯示的位置和樣式
• 性能優化：采用增量更新機制，不影響編輯器性能

6. Import Cost - 依賴體積可視化

Import Cost 能夠實時顯示導入模塊的大小，幫助你控制打包體積：

• 體積預估：顯示導入包的預估體積（min+gzip）
• 顏色警告：根據大小顯示不同顏色提示
• Tree Shaking 感知：識別支持 Tree Shaking 的包
• 定制閾值：自定義警告和錯誤的體積閾值

7. REST Client - API 調試工具

REST Client 讓你直接在 VSCode 中測試 API：

• 類 Postman 體驗：支持在 .http 文件中定義和發送請求
• 環境變量：支持定義多環境變量，便于切換測試環境
• 認證支持：支持各種認證方式，包括 OAuth、JWT 等
• 響應格式化：自動格式化 JSON、XML 響應

例如創建一個 api.http 文件：

8. GitLens - Git 增強工具

GitLens 大大增強了 VSCode 的 Git 功能：

• 行歷史追蹤：顯示每一行代碼的最后修改信息
• 分支對比：可視化對比不同分支的差異
• 責任追蹤：快速查看代碼塊的修改歷史和作者
• Git 命令集成：提供豐富的 Git 命令可視化操作界面

9. Path Intellisense - 路徑自動補全

Path Intellisense 提供了智能的路徑補全功能：

• 動態補全：根據當前目錄結構提供補全建議
• 別名支持：支持 Webpack、TypeScript 等的路徑別名
• 圖標提示：顯示文件類型圖標，提高辨識度
• 自動導入：配合 TypeScript 實現自動導入

10. Live Server - 本地開發服務器

Live Server 提供了一個輕量級的開發服務器：

• 熱重載：保存文件自動刷新瀏覽器
• HTTPS 支持：一鍵啟用 HTTPS，便于測試
• 自定義端口：可配置服務器端口和其他選項
• 代理配置：支持設置代理，解決跨域問題

11. Quokka.js - 實時執行環境

Quokka.js 提供了實時的 JavaScript/TypeScript 執行環境：

• 實時運行：編碼同時查看執行結果
• 值追蹤：顯示變量的實時值
• 覆蓋率：顯示代碼執行覆蓋情況
• Time Travel：支持值的歷史記錄回溯

12. Tabnine - AI 代碼補全

Tabnine 是另一個強大的 AI 編碼助手：

• 離線模式：支持本地運行，保護代碼隱私
• 全語言支持：對所有主流編程語言的支持
• 團隊學習：能從團隊代碼庫中學習補全模式
• 輕量運行：相比 Copilot 資源占用更少

13. Project Manager - 項目管理器

Project Manager 幫助你管理多個項目：

• 項目組織：按組織、標簽管理多個項目
• 快速切換：使用快捷鍵在項目間快速切換
• 自動檢測：自動檢測 Git 倉庫和項目目錄
• 遠程項目：支持管理遠程 SSH 項目

14. Code Runner - 代碼快速運行

Code Runner 讓你能夠快速運行各種語言的代碼片段：

• 多語言支持：支持超過 40 種編程語言
• 自定義命令：可以為特定語言配置運行命令
• 外部終端：支持在外部終端中運行代碼
• 代碼片段：支持選中代碼片段單獨運行