趁著空了的時間，把常用的一些vscode插件整理一下，方便后面更換電腦又得重新去搜索下載 ，需要的同學(xué)可以先收藏一下，后續(xù)有g(shù)et到一些新的插件會繼續(xù)更新！【推薦學(xué)習(xí)：《vscode教程》】

1. Indent-Rainbow

讓縮進帶有顏色

2. Material Icon Theme

好看的文件圖標(biāo)

3. Beautify

代碼格式化

4. Power Mode

一款酷炫的鍵盤敲擊動效

5. Vetur

強大的vue開發(fā)支持工具

6. vscode-fileheader

文件頭部注釋信息

7. Vue CSS Peek

為單頁面的 vue 文件提供 css 轉(zhuǎn)定義的支持

8. Vue Peek

點擊組件可以跳轉(zhuǎn)至組件定義的文件

9. Vue VSCode Snippets

Vue中的一些data、method等函數(shù)自動補全提示，方便快速編寫代碼；

10. 小霸王

一款在vscode里可以玩的超級瑪麗

11. A-super-translate

劃詞翻譯。鼠標(biāo)停留選中幾秒就會查看翻譯內(nèi)容。

12. filesize

在狀態(tài)欄中顯示當(dāng)前文件大小。

13. TabNine

Al輔助代碼補全神器?？梢愿鶕?jù)你寫過的代碼習(xí)慣，來給你匹配合適的字段。

14. Auto Close Tag

自動閉合標(biāo)簽

15. Auto Import

自動導(dǎo)入模塊

16. Auto Rename Tag

更改標(biāo)簽名時結(jié)束標(biāo)簽名自動重命名

17. Quokka

是一個調(diào)試工具插件，能夠根據(jù)你正在編寫的代碼提供實時反饋。它易于配置，并能夠預(yù)覽變量的函數(shù)和計算值結(jié)果。另外，在使用 JSX 或 TypeScript 項目中，它能夠開箱即用。

18. CSS Peek

使用此插件，你可以追蹤至樣式表中 CSS 類和 ids 定義的地方。當(dāng)你在 HTML 文件中右鍵單擊選擇器時，選擇“ Go to Definition 和 Peek definition ”選項，它便會給你發(fā)送樣式設(shè)置的 CSS 代碼。

19. HTML Boilerplate

通過使用 HTML 模版插件，你就擺脫了為 HTML 新文件重新編寫頭部和正文標(biāo)簽的苦惱。你只需在空文件中輸入 html，并按 Tab 鍵，即可生成干凈的文檔結(jié)構(gòu)。

20. Better Comments

通過添加彩色注釋來改進您的代碼并使其更具吸引力。

21. Error Lens

將編輯器診斷出的警告、錯誤、語法問題（提示的波浪線）等，以用顏色填充行背景的方式突出提示，并將診斷信息顯示在尾部。

22. Prettier

是目前 Web 開發(fā)中最受歡迎的代碼格式化程序。安裝了這個插件，它就能夠自動應(yīng)用 Prettier，并將整個 JS 和 CSS 文檔快速格式化為統(tǒng)一的代碼樣式。如果你還想使用 ESLint，那么還有個Prettier – Eslint 插件，你可不要錯過咯！

23. color highlight

一款比較常用的代碼高亮插件

24. Color Picker

顏色選擇器

25. Git Blame

能夠查出那段代碼是誰寫的

26. ESLint

eslint插件

27. TODO Highlight

TODO高亮顯示

28. Trailing Spaces

突出顯示尾隨空格，讓你的“空格”型強迫癥 顯示呈現(xiàn)

29. VS Code Counter

統(tǒng)計代碼總行數(shù)、注釋行數(shù)、空白行數(shù)，以及使用的語言。

30. Bracket Pair Colorizer

給匹配的括號著色

31. Code Spell Checker

拼寫檢查器。比如 banana 單詞寫錯成 banane ，會提示你是否修改成 banana ，也可以將 banane 添加至檢查器的字典中。

32. Path Intellisense

自動完成文件名

33. Rainbow Fart

官方概述：VSCode Rainbow Fart是一個在你編程時持續(xù)夸你寫的牛逼的擴展，可以根據(jù)代碼關(guān)鍵字播放貼近代碼意義的真人語音。

34. any-rule

可以在vscode里快捷使用正則表達式，不需要借助度娘了！

35. ## Todo Tree

Todo Tree 是一個提示待辦事件的插件，在代碼注釋最前面加上//TODO，整個注釋就會高亮顯示；

36. ## project-tree

這是一個自動生成項目結(jié)構(gòu)的插件；