以下的這些插件都有使用過，可取對自己編碼有用的選擇安裝。

🧠 智能補全 / 提示類插件

1. Auto Import

在編碼時選擇有對應導入包的選項，自動為 JS/TS 文件中的使用項補全并添加 import 聲明，極大提高開發效率。

2. Iconify IntelliSense

提供 Iconify 圖標庫（如 Material、Carbon、FontAwesome 等）的圖標名稱自動補全，適合在 Vue/React 中使用圖標。

3. JavaScript (ES7+) code snippets

快速輸入常用 ES7/React/Redux 的代碼片段，如 useEffect、rcc、useState 等。

4. Vue 3 Snippets

提供 Vue 3 的 Composition API 代碼片段，極大提升開發效率（如 setup、ref、watch 等快捷鍵）。

5. Path IntelliSense

自動補全文件路徑（import 語句中非常有用）。

6. Node.js Modules IntelliSense

為 Node.js 原生模塊（如 fs, path）或第三方模塊提供自動提示。

7. Alias（別名路徑跳轉）

結合 webpack/vite 配置，為 @/components/... 這類路徑提供跳轉和提示功能。

40. Code Spell Checker

檢查代碼單詞是否拼寫錯誤。

44. Tailwind CSS IntelliSense

tailwindcss 提示插件。

---

🧹 代碼質量 / 格式化 / 清理

8. ESLint

檢查 JS/TS/React/Vue 等代碼質量，配合 .eslintrc 可實現強制規范、標紅錯誤。

9. Prettier - Code Formatter

格式化代碼風格，如自動換行、縮進、引號格式等，配合 ESLint 一起使用最佳。

11. Stylelint

類似 ESLint，但用于 CSS/SCSS/LESS 等樣式文件的規范和錯誤提示。

13. TypeScript Errors

高亮和顯示 TS 報錯信息，輔助調試。

41. Error Lens

報錯信息直接展示在代碼后面。

---

🎨 UI/界面增強

14. Colorize

為 CSS/JS/HTML 中的顏色代碼（如 #fff、rgba、red）添加背景色直觀顯示。

15. Material Icon Theme

為側邊欄文件添加美觀的 Material 風格圖標，提高可讀性。

16. One Dark Pro

Atom 風格的 One Dark 主題，深色主題中最受歡迎之一。

17. Dracula Theme

著名 Dracula 暗色主題，配色柔和，適合長時間編程。

18. vscode-icons-mac

為 mac 風格的文件夾提供美化圖標。

19. Indent-Rainbow

為不同縮進級別的代碼塊添加不同顏色，方便閱讀嵌套結構。

20. Bracket Pair Colorizer

高亮匹配的括號對（如 {}, [], ()），不同層級不同顏色。

45. vscode-icons-mac

vscode 在 mac 上的文件圖標插件。

---

💡 代碼功能增強

21. Auto Close Tag

自動補全 HTML/Vue/JSX 標簽的閉合（輸入 <div> 自動補全 </div>）。

22. Auto Rename Tag

修改 HTML/Vue/JSX 的標簽名時自動同步閉合標簽名。

23. CSS Peek

在 HTML 或 Vue 中，按住 Ctrl + 點擊 class 可跳轉到對應 CSS 定義位置。

24. i18n Ally

多語言文件（如 zh.json, en.json）管理工具，支持翻譯鍵提示、缺失高亮、自動提取。

25. Image Preview

懸浮在 HTML 或 CSS 中的圖片鏈接上可預覽圖片，適用于靜態資源。

26. Todo Tree

提取所有注釋中的 // TODO、// FIXME，在側邊欄統一顯示，便于管理待辦事項。

27. Live Preview / Live Server

提供一個本地服務器預覽 HTML 頁面，支持自動刷新（適合純 HTML/CSS 項目）。

28. Debugger for Chrome

在 VSCode 中調試前端頁面（HTML/JS/Vue/React）時與 Chrome 瀏覽器聯調。

56. Hungry Delete

智能刪除插件，自動刪除無用空格。

---

🔧 Vue/前端專屬插件

29. Vue - Official (官方)

Vue 3 項目中替代 Vetur 的官方推薦插件，支持語法提示、類型推斷、錯誤檢查等。

30. **Vue Language Features **

Vue 官方維護的語言工具插件，Vue 2/3 都支持，但推薦配合 Volar 使用。

31. Tailwind CSS IntelliSense

對 Tailwind CSS 類名進行自動補全、語義提示、錯誤檢查，非常適合實用派開發者。

---

🔌 Git / 云端協作

32. GitLens

強大的 Git 增強工具：查看每行代碼的提交者、歷史、對比變更、Blame、提交詳情等。

34. GitHub Repositories

允許你打開遠程 GitHub 倉庫代碼進行瀏覽、編輯，不需要 clone 到本地。

35. Remote Repositories

與 GitHub Repositories 類似，支持瀏覽任意遠程倉庫，無需本地 clone。

---

🌐 語言支持 / 本地化

36. Chinese (Simplified) Language Pack

將 VS Code 界面翻譯成簡體中文。

---

🧪 環境輔助工具

37. dotenv

為 .env 文件提供高亮、語法支持，常用于環境變量管理。

38. npm Intellisense

自動提示 node_modules 中的包名，適用于導入模塊時自動補全。

---

🧷 工具增強類

39. Local History

每次保存文件自動備份一個版本（在 .history 中），可快速回退歷史版本。

42. Numbered Bookmarks

書簽，便于快速找到代碼。

43. REST Client

在本地快速開啟一個網絡請求服務。

---