文章來源：juejin.cn/post/6994327298740600839

本文不做任何編輯器的比較，只是我本人日常使用?vscode?進行開發，并且比較喜歡折騰?vscode?，會到處找這一些好玩的插件，于是越攢越多，今天給大家推薦一下我收藏的?60?多個?vscode?插件，據說插件裝太多，編輯器會變卡，可能是我的電腦配置還頂得住，目前并沒有感覺到卡卡的。

接下來我會將會以?優化外觀，功能擴展，提升編碼效率，代碼格式化，其它插件?幾個分類來進行介紹。

一是把它們?分享?給有需要的小伙伴們，二是通過此文向小伙伴們?征集?其它好玩的插件，可以是任何類型的。有想要推薦其它插件的請評論區補充一下，我看到后會添加到文章中并標注出你的?ID?。

注：本文只涉及插件的基本使用，也就是讓你知道存在這樣一種插件，以及大致了解這個插件可以做什么事，部分插件的詳細配置過于復雜，有需要的小伙伴請自行沖浪。根據每個人電腦，vscode?配置，以及插件的不同，部分插件可能在你電腦上不會生效。文中提到的快捷鍵都是?windows?下的，其他操作系統的快捷鍵請自行了解。

優化外觀

好馬用好鞍，好看的編輯器外觀，可以提升程序員的編碼體驗，可以讓開發人員的心情變好，讓寫?bug?更有動力。

Better Comments

一款美化注釋的插件，可以根據不同種類的注釋，顯示不同的顏色，一目了然。

安裝完以后，插件會默認自帶幾種顏色的注釋，還可以通過?vscode?的配置文件自定義任何顏色，類型的注釋。具體的配置方法我給你們找好了。

vscode 插件-better comments-代碼注釋高亮

Bracket Pair Colorizer / Bracket Pair Colorizer 2

這是一個找對象的插件，不是幫你們找對象啊，是幫你找到括號的另一半。目前有兩個版本，Bracket Pair Colorizer 2?是增強版，具體我沒有深入研究具體增強了哪些內容。而且它有挺多的設置項，反正安裝完默認的配置已經夠用了，感興趣的同學自行發覺更多有趣玩法吧。

大家可以看到配對的括號是相同的顏色，并且當我選中一個括號以后，會出現一條線幫你找到它對應的另一半括號。

Highlight Matching Tag

這也是一個找對象的插件，找的是標簽的對象，看我上一個插件的演示圖片中，當我點擊一下?html?標簽，配對的標簽就會出現下劃線來指示你誰和誰是一對。

Chinese

讓你的?vscode?變成中文，像我這種英語弱雞才會用，大佬們略過。為什么要放在優化外觀的分類里，因為我覺得中文比英文好看，安裝完重啟就行了。

Color Highlight

看名字就知道了，用于給我們代碼中的顏色進行高亮展示的插件。可以看到下圖中我設置的?css?顏色屬性，直觀的展示了出來。

Community Material Theme / Material Theme

修改編輯器的主題，內置很多種，我用的是?Material Theme Palenight High Contrast?這一款。安裝完了以后點擊?設置顏色主題?就可以了。

Material Theme Icons

設置文件圖標的，這個插件的長這個樣子，還有很多其它修改文件圖標的插件，不喜歡這一款的，大家可以自行找一找。

Error Gutters

報錯的地方都有大紅波浪線提示，可以說是非常的直觀了。

Image preview

預覽代碼中圖片的引用，鼠標移上去就會有小窗展示圖片。

indent-rainbow

看名字就知道了，彩虹縮進，就是把代碼不同的縮進展示不同的顏色。

Indenticator

當你點擊一個縮進部分的時候，會出現一條白線來告訴你當前處于的縮進層級，可以更方便的查看代碼結構。

Trailing Spaces

把尾隨空格顯示出來。

VSCode Great Icons

另一個修改文件圖標的插件，我用的就是這個，相對于?Material Theme Icons?我更喜歡這個的風格，蘿卜青菜可有所愛，大家各取所需。

功能擴展

編輯器自身的功能還是有限的，為了應付日常開發，不得不安裝很多其他的軟件進行輔助，不過也可以通過插件的方式引入一些常用的輔助軟件，它們的功能可能沒有原生的強大，但是基本上已經夠用，并且是真的很方便。

AZ AL Dev Tools/AL Code Outline

用來梳理代碼結構的插件，安裝完后在文件圖標里就會多出一個?AL OUTLINE?的選項。

為了演示我找了一個比較長，比較典型的?vue?文件，請忽略我的代碼內容，專注于插件的功能，可以看到展開第一層是極具?vue?單文件組件特點的?template，script，style。逐層展開就可以看到?dom?節點，?methods?里面定義的函數等，然后點擊就可以快速定位到目標所在位置，媽媽再也不用擔心我全局搜啦！

注：它這個里面好像是默認展開的，應該是可以設置是否默認展開，但我沒研究過，感興趣的大佬可以深入調查一下。

Code Runner

運行代碼，可以在編輯器中查看結果，前端同學可以在控制臺看?console.log?，還有很多其他玩法，具體使用參考此篇文章

VSCode插件推薦 | Code Runner: 代碼一鍵運行，支持超過40種語言

CodeIf

在網上看到一句話，在計算機科學中只有兩件難事:緩存失效和命名。哈哈哈，確實如此，當開發項目時，命名一直都是一種讓人痛苦的事情。

但是命名又是開發過程中一項非常重要的事情，一個好的函數命名，能夠讓你瞬間明白它實現的功能，所以，每當開發過程中遇到要命名的變量、函數、類時就要冥思苦想，各種翻譯。

但是，CodeIf?的出現讓這個問題迎刃而解，它通過搜索?GitHub,?Bitbucket,?GitLab?來找到真實的使用變量名，為你提供一些高頻使用的詞匯。

使用時只需要選中變量名，然后?右鍵?選擇?CodeIf?就可以跳轉到網頁，顯示候選命名。

Color Info

查看顏色詳細信息的插件，可以小窗口顯示顏色值，rgb,hsl,cmyk,hex等等，可以在配置項里添加要展示的信息類型。

Code Spell Checker

檢查代碼中單詞拼寫是否正確，當單詞不正常的時候，就會在下方出現波浪線進行提示，還可以自定義詞典，忽略某個單詞的檢查等，更多用法參考下面鏈接。

VSCode中插件Code Spell Checker

Debugger for Chrome

這款插件是專門為前端調試開發的，很方便調試，跟谷歌的控制臺是一樣的功能，安裝以后，無需打開瀏覽器的控制臺就能進行斷點調試。對應的還有?Debugger for Firefox，Debugger for Microsoft Edge等，其他的我沒用過，大家按需安裝即可，使用方法應該都大同小異。

安裝完以后，左邊會出現一個調試的小圖標，打開以后再點擊上方小齒輪進行配置。根目錄下會自動新建?.vscode?文件夾以及?launch.json?文件，不用管。

配置文件的具體內容和使用方法可以看這一篇，很詳細。

VSCode配置 Debugger for Chrome插件

Git History

右鍵單擊文件選擇?Git：View File History?來以列表的形式查看所有的提交記錄。

GitLens — Git supercharged

這個也是跟?git?相關的插件，功能比上一個要強大一些。上一個插件的演示圖片中可以看到我的每一行代碼都有上一次?git?提交的記錄，那就是這個插件的功勞。

還有其他很多的操作，詳情查閱下方鏈接。

VsCode中好用的git源代碼管理插件GitLens

LeetCode

可以在?vscode?中刷算法題的。我自己沒用過

Local History

這個就很強了，本地代碼的修改記錄。通常我們寫錯代碼了可以撤銷，但是撤銷完以后再修改，想要取消撤銷就難了。有了這個插件直接看代碼的修改記錄。還可以跟當前版本進行對比，神器。

安裝完以后，項目根目錄下會自動生成?.history?的文件夾。代碼的修改記錄就會放在這里面。記得添加.gitignore，不然每次提交代碼的時候就要遭重了。

open in browser

在瀏覽器中打開?html?文件。

安裝完以后在目標的?html?文件上右擊，選擇?open in default browser?即可打開使用瀏覽器打開文件。

Partial Diff

文件比較界的大拿肯定是?Beyond Compare?了，但是它是收費的！那么?Partial Diff?這款神奇的插件就成為了良好的替代品，選中一代碼，右鍵?Select Text for Compare?，選中另外一部分代碼，右鍵Compare Text with Previous Selection即可。我的是中文的，就更明顯了

Postcode

Postman?都聽說過吧，這個插件就基本上可以理解為，在?vscode?里面使用?postman?。

安裝完以后左側菜單會出現一個?小盒子?的圖標，點開以后點擊?Create Request?就可以正常使用了。

Project Manager

項目管理器，適用于經常切換項目的大佬，雖然我平時接觸的項目也不多，不過自己搞著玩的工程也不少。有了這個插件，就不用新窗口打開項目了。

安裝完以后左側列表會出現一個?文件夾?的小圖標，點開以后就可以進行項目管理了，通常都是操作projects.json?這個文件，點擊項目名字就可以切換了，也可以新窗口打開。

Quokka.js

實時顯示代碼的運行結果，使用方法請跳轉鏈接

VS Code插件之Quokka.js

提升編碼效率

如何達到極致的編碼效率，當然是能不手寫則不手寫。下面這些插件就是輔助大家進行一些自動化，這樣就可以節省下很多的時間用來摸魚了。

Auto Import

Typescript?自動導入，其實現在很多的插件基本都內置了這種功能，已經不是必須品了。可能是因為我裝了各種奇奇怪怪的插件，我現在想導入什么東西的時候，一大堆的提示，隨便選一個都能導進來

Auto Rename Tag

自動修改標簽名，重命名一個開始標簽時，自動重命名配對的結束標簽。

一下子就對應的全修改掉了，是不是很?nice。

change-case

快速切換變量格式，什么大坨峰，小駝峰，下劃線等等，它里面有很多類型。使用方法按?F1（windows）??，輸入對應命令即可。

CSS Peek

可以通過點擊類名迅速定位到樣式的定義。不知道是不是我自己的原因，有的時候會失效，需要點擊?禁用?，再點擊?啟用?就好使了。具體使用方法參考鏈接

cssPeek插件大大提升你的開發效率

ECMAScript Quotes Transformer

用于?模板字符串?和?普通字符串拼接?的相互轉化，但其實我日常開發基本上都是統一使用模板字符串的，很少有這種互相轉化的需求。

用法也是非常簡單，選中需要轉化的行，按?f1?輸入命令即可，一般輸入?esq?就出現提示了。

embrace

快速的在選中代碼兩邊添加各種引號、括號，不用來回移動光標，不過好像現在市面上的編輯器大多都內置這功能了吧

File Utils

創建，復制，移動，重命名，刪除文件和目錄的便捷方法，演示圖片來自官網。

javascript console utils

前端人員的調試少不了?console.log?，那么這就是一款快速生成?console.log?的插件。使用方法非常簡單，選中變量，然后按?ctrl + shift + L?就可以生成了。需要刪除的時候按?ctrl + shift + D?即可刪除。

json2ts

自動把?json?格式轉成?ts?的類型，復制?json?之后按?ctrl + alt + v?即可。

koroFileHeader

自動添加?頭部注釋?和?函數注釋?的插件。支持自定義內容，需要在?settings.json?中進行自定義配置。

??//自動生成注釋插件??文件頭部注釋"fileheader.customMade":?{"Author":?"一尾流鶯","Description":?"","Date":?"Do?not?edit","LastEditTime":?"Do?not?edit","FilePath":?""},//自動生成注釋插件??函數注釋"fileheader.cursorMode":?{"description":?"","param":?"","return":?""},
復制代碼

Mithril Emmet

快速生成代碼結構，不過好像新版本?vscode?已經內置了。

Path Intellisense

引入文件的時候，路徑自動補全。

Npm Intellisense

導入?npm?包的時候，智能提示。

px to rem & rpx (cssrem)

自動換算單位的插件。

很簡單，出現提示以后回車即可。

Turbo Console Log

另一個用來生成?console.log?的插件，不同的是，他支持自定義?console.log?的內容，包括文件名，路徑，大小等，還可以添加自己喜歡的?emoji?表情，快捷鍵?ctrl + alt + L。

代碼片段類插件

這一類的插件都很多，但功能都是提供代碼片段，作用就是使用幾個字符的簡寫，就可以敲出整段代碼。

JavaScript (ES6) code snippets
Jest Snippets
HTML Snippets
Vue VSCode Snippets
Vue 3 Snippets
... ...

代碼格式化

Beautify

用來代碼格式化的，但是我好像安裝了沒怎么用，我一直都是?eslint + prettier，有正在用的小伙伴可以在評論區發表一下看法，感興趣的請自己搜索使用方法。

ESLint

這個就不用說了吧，代碼檢查，不符合規范的就會跟你報錯，或者警告。具體的規范需要在根目錄下新建?.eslintrc.js?文件去配置，也可以用很多大公司現有的規范，太復雜了就不細講了，貼出教程鏈接。

Eslint 超簡單入門教程

Prettier - Code formatter

代碼格式化插件，這個插件通常搭配?eslint?使用，也可以單獨使用。

在根目錄下新建?.prettierrc.json?文件，在里面書寫自己想要的格式就行了。更具體的配置內容查看鏈接

# vscode 使用Prettier插件格式化配置使用

vetur / volar

使用?vue?進行開發的小伙伴都少不了跟它們打交道，volar?是跟?vue3?更配的，功能也能多，由于這兩個插件功能過于龐大，就不展開講了，感興趣的自行搜索使用。

其他好玩的插件

除了功能性插件，當然還有很多花里胡哨的玩意。下面給大家介紹幾款可能對開發影響不大，但是非常好玩的插件。

小霸王

還記得小時候玩的手柄游戲嗎？大佬已經給我們出了插件了，不過我還是要友情提醒一句：游戲有風險，摸魚需謹慎！

操作非常簡單，安裝完左側會出現游戲手柄圖標，點擊打開就可以下載游戲進行玩耍。

Emoji

在代碼中添加?emoji?表情，我自己除了寫一些注釋，console.log?之外，基本沒有別的作用，但是挺好玩的，別人看你的代碼中各種小表情，也會覺得你是一個可愛的人吧。

它的官方示例里面還可以把?emoji?設為變量名，我可不建議你們這樣做。使用方法也是非常的簡單，按?f1（windows）?輸入?emoji?，可以看到有三個選項，分別是?emoji?表情，markdown?下的?emoji，還有?unicode?下的?emoji。選中一個模式回車進入列表，再回車就可以輸入到代碼中了。