作者：一尾流鶯

鏈接：https://juejin.cn/post/6994327298740600839

本文不做任何編輯器的比較，只是我本人日常使用 vscode 進(jìn)行開(kāi)發(fā)，并且比較喜歡折騰 vscode ，會(huì)到處找這一些好玩的插件，于是越攢越多，今天給大家推薦一下我收藏的 60 多個(gè) vscode 插件，據(jù)說(shuō)插件裝太多，編輯器會(huì)變卡，可能是我的電腦配置還頂?shù)米?#xff0c;目前并沒(méi)有感覺(jué)到卡卡的。

接下來(lái)我會(huì)將會(huì)以 優(yōu)化外觀，功能擴(kuò)展，提升編碼效率，代碼格式化，其它插件 幾個(gè)分類(lèi)來(lái)進(jìn)行介紹。

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

好馬用好鞍，好看的編輯器外觀，可以提升程序員的編碼體驗(yàn)，可以讓開(kāi)發(fā)人員的心情變好，讓寫(xiě) bug 更有動(dòng)力。

Better Comments

一款美化注釋的插件，可以根據(jù)不同種類(lèi)的注釋，顯示不同的顏色，一目了然。

安裝完以后，插件會(huì)默認(rèn)自帶幾種顏色的注釋，還可以通過(guò) vscode 的配置文件自定義任何顏色，類(lèi)型的注釋。具體的配置方法我給你們找好了。

Bracket Pair Colorizer / Bracket Pair Colorizer 2

這是一個(gè)找對(duì)象的插件，不是幫你們找對(duì)象啊，是幫你找到括號(hào)的另一半。目前有兩個(gè)版本，Bracket Pair Colorizer 2 是增強(qiáng)版，具體我沒(méi)有深入研究具體增強(qiáng)了哪些內(nèi)容。而且它有挺多的設(shè)置項(xiàng)，反正安裝完默認(rèn)的配置已經(jīng)夠用了，感興趣的同學(xué)自行發(fā)覺(jué)更多有趣玩法吧。

大家可以看到配對(duì)的括號(hào)是相同的顏色，并且當(dāng)我選中一個(gè)括號(hào)以后，會(huì)出現(xiàn)一條線幫你找到它對(duì)應(yīng)的另一半括號(hào)。

Highlight Matching Tag

這也是一個(gè)找對(duì)象的插件，找的是標(biāo)簽的對(duì)象，看我上一個(gè)插件的演示圖片中，當(dāng)我點(diǎn)擊一下 html 標(biāo)簽，配對(duì)的標(biāo)簽就會(huì)出現(xiàn)下劃線來(lái)指示你誰(shuí)和誰(shuí)是一對(duì)。

Chinese

讓你的 vscode 變成中文，像我這種英語(yǔ)弱雞才會(huì)用，大佬們略過(guò)。為什么要放在優(yōu)化外觀的分類(lèi)里，因?yàn)槲矣X(jué)得中文比英文好看🧐🧐，安裝完重啟就行了。

Color Highlight

看名字就知道了，用于給我們代碼中的顏色進(jìn)行高亮展示的插件?？梢钥吹较聢D中我設(shè)置的 css 顏色屬性，直觀的展示了出來(lái)。

Community Material Theme / Material Theme

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

Material Theme Icons

設(shè)置文件圖標(biāo)的，這個(gè)插件的長(zhǎng)這個(gè)樣子，還有很多其它修改文件圖標(biāo)的插件，不喜歡這一款的，大家可以自行找一找。

Error Gutters

報(bào)錯(cuò)的地方都有大紅波浪線提示，可以說(shuō)是非常的直觀了。

Image preview

預(yù)覽代碼中圖片的引用，鼠標(biāo)移上去就會(huì)有小窗展示圖片。

indent-rainbow

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

Indenticator

當(dāng)你點(diǎn)擊一個(gè)縮進(jìn)部分的時(shí)候，會(huì)出現(xiàn)一條白線來(lái)告訴你當(dāng)前處于的縮進(jìn)層級(jí)，可以更方便的查看代碼結(jié)構(gòu)。

Trailing Spaces

把尾隨空格顯示出來(lái)。

VSCode Great Icons

另一個(gè)修改文件圖標(biāo)的插件，我用的就是這個(gè)，相對(duì)于 Material Theme Icons 我更喜歡這個(gè)的風(fēng)格，蘿卜青菜可有所愛(ài)，大家各取所需。

編輯器自身的功能還是有限的，為了應(yīng)付日常開(kāi)發(fā)，不得不安裝很多其他的軟件進(jìn)行輔助，不過(guò)也可以通過(guò)插件的方式引入一些常用的輔助軟件，它們的功能可能沒(méi)有原生的強(qiáng)大，但是基本上已經(jīng)夠用，并且是真的很方便。

AZ AL Dev Tools/AL Code Outline

用來(lái)梳理代碼結(jié)構(gòu)的插件，安裝完后在文件圖標(biāo)里就會(huì)多出一個(gè) AL OUTLINE 的選項(xiàng)。

為了演示我找了一個(gè)比較長(zhǎng)，比較典型的 vue 文件，請(qǐng)忽略我的代碼內(nèi)容，專(zhuān)注于插件的功能🤣🤣， 可以看到展開(kāi)第一層是極具 vue 單文件組件特點(diǎn)的 template，script，style。逐層展開(kāi)就可以看到 dom 節(jié)點(diǎn)， methods 里面定義的函數(shù)等，然后點(diǎn)擊就可以快速定位到目標(biāo)所在位置，媽媽再也不用擔(dān)心我全局搜啦！

注：它這個(gè)里面好像是默認(rèn)展開(kāi)的，應(yīng)該是可以設(shè)置是否默認(rèn)展開(kāi)，但我沒(méi)研究過(guò)，感興趣的大佬可以深入調(diào)查一下。

Code Runner

運(yùn)行代碼，可以在編輯器中查看結(jié)果，前端同學(xué)可以在控制臺(tái)看 console.log ，還有很多其他玩法，具體使用參考此篇文章

CodeIf

在網(wǎng)上看到一句話，在計(jì)算機(jī)科學(xué)中只有兩件難事:緩存失效和命名。哈哈哈，確實(shí)如此，當(dāng)開(kāi)發(fā)項(xiàng)目時(shí)，命名一直都是一種讓人痛苦的事情。

但是命名又是開(kāi)發(fā)過(guò)程中一項(xiàng)非常重要的事情，一個(gè)好的函數(shù)命名，能夠讓你瞬間明白它實(shí)現(xiàn)的功能，所以，每當(dāng)開(kāi)發(fā)過(guò)程中遇到要命名的變量、函數(shù)、類(lèi)時(shí)就要冥思苦想，各種翻譯。

但是，CodeIf 的出現(xiàn)讓這個(gè)問(wèn)題迎刃而解，它通過(guò)搜索 GitHub, Bitbucket, GitLab 來(lái)找到真實(shí)的使用變量名，為你提供一些高頻使用的詞匯。

使用時(shí)只需要選中變量名，然后 右鍵 選擇 CodeIf 就可以跳轉(zhuǎn)到網(wǎng)頁(yè)，顯示候選命名。

Color Info

查看顏色詳細(xì)信息的插件，可以小窗口顯示顏色值，rgb,hsl,cmyk,hex等等，可以在配置項(xiàng)里添加要展示的信息類(lèi)型。

Code Spell Checker

檢查代碼中單詞拼寫(xiě)是否正確，當(dāng)單詞不正常的時(shí)候，就會(huì)在下方出現(xiàn)波浪線進(jìn)行提示，還可以自定義詞典，忽略某個(gè)單詞的檢查等，更多用法參考下面鏈接。

Debugger for Chrome

這款插件是專(zhuān)門(mén)為前端調(diào)試開(kāi)發(fā)的，很方便調(diào)試，跟谷歌的控制臺(tái)是一樣的功能，安裝以后，無(wú)需打開(kāi)瀏覽器的控制臺(tái)就能進(jìn)行斷點(diǎn)調(diào)試。對(duì)應(yīng)的還有 Debugger for Firefox，Debugger for Microsoft Edge等，其他的我沒(méi)用過(guò)，大家按需安裝即可，使用方法應(yīng)該都大同小異。

安裝完以后，左邊會(huì)出現(xiàn)一個(gè)調(diào)試的小圖標(biāo)，打開(kāi)以后再點(diǎn)擊上方小齒輪進(jìn)行配置。根目錄下會(huì)自動(dòng)新建 .vscode 文件夾以及 launch.json 文件，不用管。

配置文件的具體內(nèi)容和使用方法可以看這一篇，很詳細(xì)。

Git History

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

GitLens — Git supercharged

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

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

LeetCode

可以在 vscode 中刷算法題的。我自己沒(méi)用過(guò)😣😣

Local History

這個(gè)就很強(qiáng)了，本地代碼的修改記錄。通常我們寫(xiě)錯(cuò)代碼了可以撤銷(xiāo)，但是撤銷(xiāo)完以后再修改，想要取消撤銷(xiāo)就難了。有了這個(gè)插件直接看代碼的修改記錄。還可以跟當(dāng)前版本進(jìn)行對(duì)比，神器。

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

open in browser

在瀏覽器中打開(kāi) html 文件。

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

Partial Diff

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

Postcode

Postman 都聽(tīng)說(shuō)過(guò)吧，這個(gè)插件就基本上可以理解為，在 vscode 里面使用 postman 。

安裝完以后左側(cè)菜單會(huì)出現(xiàn)一個(gè) 小盒子 的圖標(biāo)，點(diǎn)開(kāi)以后點(diǎn)擊 Create Request 就可以正常使用了。

Project Manager

項(xiàng)目管理器，適用于經(jīng)常切換項(xiàng)目的大佬，雖然我平時(shí)接觸的項(xiàng)目也不多，不過(guò)自己搞著玩的工程也不少。有了這個(gè)插件，就不用新窗口打開(kāi)項(xiàng)目了。

安裝完以后左側(cè)列表會(huì)出現(xiàn)一個(gè) 文件夾 的小圖標(biāo)，點(diǎn)開(kāi)以后就可以進(jìn)行項(xiàng)目管理了，通常都是操作projects.json 這個(gè)文件，點(diǎn)擊項(xiàng)目名字就可以切換了，也可以新窗口打開(kāi)。

Quokka.js

實(shí)時(shí)顯示代碼的運(yùn)行結(jié)果，使用方法請(qǐng)?zhí)D(zhuǎn)鏈接

如何達(dá)到極致的編碼效率，當(dāng)然是能不手寫(xiě)則不手寫(xiě)。下面這些插件就是輔助大家進(jìn)行一些自動(dòng)化，這樣就可以節(jié)省下很多的時(shí)間用來(lái)摸魚(yú)了。

Auto Import

Typescript 自動(dòng)導(dǎo)入，其實(shí)現(xiàn)在很多的插件基本都內(nèi)置了這種功能，已經(jīng)不是必須品了?？赡苁且?yàn)槲已b了各種奇奇怪怪的插件，我現(xiàn)在想導(dǎo)入什么東西的時(shí)候，一大堆的提示，隨便選一個(gè)都能導(dǎo)進(jìn)來(lái)😂

Auto Rename Tag

自動(dòng)修改標(biāo)簽名，重命名一個(gè)開(kāi)始標(biāo)簽時(shí)，自動(dòng)重命名配對(duì)的結(jié)束標(biāo)簽。

一下子就對(duì)應(yīng)的全修改掉了，是不是很 nice。

change-case

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

CSS Peek

可以通過(guò)點(diǎn)擊類(lèi)名迅速定位到樣式的定義。不知道是不是我自己的原因，有的時(shí)候會(huì)失效，需要點(diǎn)擊 禁用 ，再點(diǎn)擊 啟用 就好使了。具體使用方法參考鏈接

ECMAScript Quotes Transformer

用于 模板字符串 和 普通字符串拼接 的相互轉(zhuǎn)化，但其實(shí)我日常開(kāi)發(fā)基本上都是統(tǒng)一使用模板字符串的，很少有這種互相轉(zhuǎn)化的需求。

用法也是非常簡(jiǎn)單，選中需要轉(zhuǎn)化的行，按 f1 輸入命令即可，一般輸入 esq 就出現(xiàn)提示了。

embrace

快速的在選中代碼兩邊添加各種引號(hào)、括號(hào)，不用來(lái)回移動(dòng)光標(biāo)，不過(guò)好像現(xiàn)在市面上的編輯器大多都內(nèi)置這功能了吧🤨🤨

File Utils

創(chuàng)建，復(fù)制，移動(dòng)，重命名，刪除文件和目錄的便捷方法，演示圖片來(lái)自官網(wǎng)。

javascript console utils

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

json2ts

自動(dòng)把 json 格式轉(zhuǎn)成 ts 的類(lèi)型，復(fù)制 json 之后按 ctrl + alt + v 即可。

koroFileHeader

自動(dòng)添加 頭部注釋 和 函數(shù)注釋 的插件。支持自定義內(nèi)容，需要在 settings.json 中進(jìn)行自定義配置。

"fileheader.customMade": {"Author": "一尾流鶯","Description": "","Date": "Do not edit","LastEditTime": "Do not edit","FilePath": ""},"fileheader.cursorMode": {"description": "","param": "","return": ""},

Mithril Emmet

快速生成代碼結(jié)構(gòu)，不過(guò)好像新版本 vscode 已經(jīng)內(nèi)置了。

Path Intellisense

引入文件的時(shí)候，路徑自動(dòng)補(bǔ)全。

Npm Intellisense

導(dǎo)入 npm 包的時(shí)候，智能提示。

px to rem & rpx (cssrem)

自動(dòng)換算單位的插件。

很簡(jiǎn)單，出現(xiàn)提示以后回車(chē)即可。

Turbo Console Log

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

代碼片段類(lèi)插件

這一類(lèi)的插件都很多，但功能都是提供代碼片段，作用就是使用幾個(gè)字符的簡(jiǎn)寫(xiě)，就可以敲出整段代碼。

• JavaScript (ES6) code snippets

• Jest Snippets

• HTML Snippets

• Vue VSCode Snippets

• Vue 3 Snippets

• ... ...

Beautify

用來(lái)代碼格式化的，但是我好像安裝了沒(méi)怎么用，我一直都是 eslint + prettier，有正在用的小伙伴可以在評(píng)論區(qū)發(fā)表一下看法，感興趣的請(qǐng)自己搜索使用方法。

ESLint

這個(gè)就不用說(shuō)了吧，代碼檢查，不符合規(guī)范的就會(huì)跟你報(bào)錯(cuò)，或者警告。具體的規(guī)范需要在根目錄下新建 .eslintrc.js 文件去配置，也可以用很多大公司現(xiàn)有的規(guī)范，太復(fù)雜了就不細(xì)講了，貼出教程鏈接。

Prettier - Code formatter

代碼格式化插件，這個(gè)插件通常搭配 eslint 使用，也可以單獨(dú)使用。

在根目錄下新建 .prettierrc.json 文件，在里面書(shū)寫(xiě)自己想要的格式就行了。更具體的配置內(nèi)容查看鏈接

vetur / volar

使用 vue 進(jìn)行開(kāi)發(fā)的小伙伴都少不了跟它們打交道，volar 是跟 vue3 更配的，功能也能多，由于這兩個(gè)插件功能過(guò)于龐大，就不展開(kāi)講了，感興趣的自行搜索使用。

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

小霸王

還記得小時(shí)候玩的手柄游戲嗎？大佬已經(jīng)給我們出了插件了，不過(guò)我還是要友情提醒一句：游戲有風(fēng)險(xiǎn)，摸魚(yú)需謹(jǐn)慎！

操作非常簡(jiǎn)單，安裝完左側(cè)會(huì)出現(xiàn)游戲手柄圖標(biāo)，點(diǎn)擊打開(kāi)就可以下載游戲進(jìn)行玩耍。

Emoji

在代碼中添加 emoji 表情，我自己除了寫(xiě)一些注釋，console.log 之外，基本沒(méi)有別的作用，但是挺好玩的，別人看你的代碼中各種小表情，也會(huì)覺(jué)得你是一個(gè)可愛(ài)的人吧。

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

Settings Sync

可以同步 vscode 配置的插件，由于我沒(méi)有換過(guò)電腦，所以還沒(méi)親測(cè)，但是網(wǎng)上用的人還是蠻多的。

END

各位伙伴們好，詹帥本帥搭建了一個(gè)個(gè)人博客和小程序，匯集各種干貨和資源，也方便大家閱讀，感興趣的小伙伴請(qǐng)移步小程序體驗(yàn)一下哦！（歡迎提建議）

推薦閱讀

牛逼！Python常用數(shù)據(jù)類(lèi)型的基本操作（長(zhǎng)文系列第①篇）

牛逼！Python的判斷、循環(huán)和各種表達(dá)式（長(zhǎng)文系列第②篇）

牛逼！Python函數(shù)和文件操作（長(zhǎng)文系列第③篇）

牛逼！Python錯(cuò)誤、異常和模塊（長(zhǎng)文系列第④篇）

與50位技術(shù)專(zhuān)家面對(duì)面20年技術(shù)見(jiàn)證，附贈(zèng)技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的60 个神级 VS Code 插件！的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。