vscode常用的36個前端插件，直接搜尋下載！

趁著空了的時間，把常用的一些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中文網其他相關文章！