趁著空了的時間，把常用的一些vscode外掛程式整理一下，方便後面更換電腦又得重新去搜尋下載
，需要的同學可以先收藏一下，後續有get到一些新的插件會繼續更新！ 【推薦學習：《vscode教學》】
1. Indent-Rainbow
讓縮排有顏色
2. Material Icon Theme
好看的檔案圖示
#3. Beautify
程式碼格式化
4. Power Mode
一款酷炫的鍵盤敲擊動效
5. Vetur
##強大的vue開發支援工具
6. vscode-fileheader
#檔案頭註解資訊
7. Vue CSS Peek
為單一頁面的vue 檔案提供css 轉定義的支援
8. Vue Peek
點擊元件可以跳到元件定義的檔案
9. Vue VSCode Snippets
Vue中的一些data、method等函數自動補全提示，方便快速編寫程式碼；
# 10. 小霸王
一款在vscode裡可以玩的超級瑪莉
11. A-super-translate
劃詞翻譯。滑鼠停留選中幾秒鐘就會查看翻譯內容。
12. filesize
在狀態列中顯示目前檔案大小。
13. TabNine
Al輔助程式碼補全神器。可以根據你寫過的程式碼習慣，來給你配對合適的欄位。
14. Auto Close Tag
自動閉合標籤
15. Auto Import
自動匯入模組
16. Auto Rename Tag
更改標籤名稱時結束標籤名稱自動重新命名
17. Quokka
#是一個調試工具插件，能夠根據你正在編寫的程式碼提供即時回饋。它易於配置，並能夠預覽變數的函數和計算值結果。另外，在使用 JSX 或 TypeScript 專案中，它能夠開箱即用。
18. CSS Peek
使用此插件，你可以追蹤到樣式表中 CSS 類別和 ids 定義的地方。當你在 HTML 檔案中右鍵點選選擇器時，選擇「 Go to Definition 和 Peek definition 」選項，它就會給你發送樣式設定的 CSS 程式碼。
19. HTML Boilerplate
透過使用 HTML 模版插件，你就擺脫了為 HTML 新檔案重新編寫頭部和正文標籤的苦惱。你只需在空文件中輸入 html，並按 Tab 鍵，即可產生乾淨的文件結構。
20. Better Comments
透過添加彩色註解來改進您的程式碼並使其更具吸引力。
21. Error Lens
將編輯器診斷出的警告、錯誤、語法問題（提示的波浪線）等，以顏色填滿行背景的方式突出提示，並將診斷訊息顯示在尾部。
22. Prettier
是目前 Web 開發中最受歡迎的程式碼格式化程式。安裝了這個插件，它能夠自動套用 Prettier，並將整個 JS 和 CSS 文件快速格式化為統一的程式碼樣式。如果你還想使用 ESLint，那麼還有個Prettier – Eslint 插件，你可不要錯過咯！
23. color highlight
一款比較常用的程式碼高亮外掛程式
24. Color Picker
顏色選擇器
25. Git Blame
#能夠找出那段程式碼是誰寫的
26. ESLint
eslint外掛程式
27. TODO Highlight
TODO高亮顯示
28. Trailing Spaces
反白顯示尾隨空格，讓你的「空格」型強迫症顯示呈現
#29. VS Code Counter
統計程式碼總行數、註解行數、空白行數，以及使用的語言。
30. Bracket Pair Colorizer
為符合的括號著色
31. Code Spell Checker
#拼字檢查器。例如 banana 單字寫錯成 banane ，會提示你是否修改成 banana ，也可以將 banane 加入到檢查器的字典中。
32. Path Intellisense
自動完成檔案名稱
33. Rainbow Fart
官方概述：VSCode Rainbow Fart是一個在你編程時持續誇你寫的牛逼的擴展，可以根據代碼關鍵字播放貼近代碼意義的真人語音。
34. any-rule
可以在vscode裡快速使用正規表示式，不需要藉助度娘了！
35. ## Todo Tree
Todo Tree 是提示待辦事項的插件，在程式碼註解最前面加上//TODO，整個註解就會高亮顯示；
36. ## project-tree
這是一個自動產生專案結構的外掛；
更多程式相關知識，請造訪：程式設計入門！ ！
以上是vscode常用的36個前端插件，直接搜尋下載！的詳細內容。更多資訊請關注PHP中文網其他相關文章！
