在前端開(kāi)發(fā)中，vscode 是最常用的編輯器，而 vscode 有著各種實(shí)用插件，有些可以幫助我們提升效率，有些可以讓我們的工作過(guò)程變得更加快樂(lè)。

今天我們就來(lái)介紹一下這些好用的插件吧~

提效類插件

代碼神器 - Power Mode

首先，介紹的第一款插件是 Power Mode，它可以讓你的編程過(guò)程變得更加快樂(lè)（如下圖）。

除了上面那種效果外，這個(gè)插件還有其他的幾種效果，都是不錯(cuò)的。接下來(lái)我們來(lái)學(xué)習(xí)一下如何使用吧！

首先我們?cè)?vscode 插件欄搜索 Power Mode（如下圖）。

然后我們點(diǎn)擊安裝，安裝后我們按下鍵盤組合鍵 Ctrl + Shift + P，然后輸入 setting，打開(kāi) JSON 配置文件（如下圖）

在最后添加下面三行配置：

"powermode.enabled": true, // 開(kāi)啟 Power Mode

"powermode.shakeIntensity": 0, // 關(guān)閉抖動(dòng)（喜歡的也可以選擇不關(guān)閉）

"powermode.presets": "particles", // 特效預(yù)設(shè)，還有 "fireworks", "flames", "magic", "clippy", "simple-rift", "exploding-rift"

好了，可以開(kāi)始你的 “特效編程之旅” 了！

高亮標(biāo)識(shí) - Todo Tree

我們?cè)谄綍r(shí)的業(yè)務(wù)開(kāi)發(fā)中，代碼文件越寫越多，單文件越來(lái)越長(zhǎng)。在修改代碼時(shí)，總是需要頻繁在文件中尋找想要的內(nèi)容，或者在文件中上下滾動(dòng)來(lái)尋找目標(biāo)代碼，然后進(jìn)行修改。

這里可以推薦一個(gè)插件來(lái)幫助提高效率，那就是 Todo Tree，我們?cè)趹?yīng)用商店搜索進(jìn)行安裝后，我們只需要添加 // TODO: 這樣的注釋代碼，我們就可以在 Todo Tree 中快速定位到這行注釋（如下圖）。

我們還可以通過(guò)下面的設(shè)置（setting.json），自定義顏色與高亮代碼，然后我們就可以迅速定義關(guān)鍵方法的位置啦（如下圖）。

"background": "green", // 背景顏色

"icon": "issue-closed", // icon

"rulerColour": "green", // 文字顏色

"iconColour": "green" // icon 顏色

},

"METHOD": {

"foreground": "black",

"background": "yellow",

"icon": "issue-closed",

"rulerColour": "yellow",

"iconColour": "yellow"

},

},

快速定位括號(hào) - Bracket Pair Colorizer

寫代碼總是離不開(kāi)各種類型的括號(hào)，當(dāng)嵌套比較深的時(shí)候，然后需要改動(dòng)結(jié)構(gòu)時(shí)，括號(hào)問(wèn)題經(jīng)常會(huì)困擾我們。

Bracket Pair Colorizer 可以幫助你快速區(qū)分括號(hào)位置和類型，這樣你就可以快速定位啦?。ㄈ缦聢D）

拼寫檢查 - Code Spell Checker

我們?cè)谄綍r(shí)的開(kāi)發(fā)過(guò)程中，有時(shí)候會(huì)因?yàn)樽兞棵x時(shí)和使用時(shí)不一致，debug 半天最后發(fā)現(xiàn)是拼寫問(wèn)題。

我們可以使用 Code Spell Checker 插件進(jìn)行拼寫檢測(cè)，我們安裝插件后，還可以在 setting.json 中指定檢測(cè)的文件，比如我這里開(kāi)啟了對(duì) Vue 文件的拼寫檢查（如下圖）。

Git 管理

vscode 有很多 Gi1t 管理的插件，可以幫助你來(lái)管理 Git 倉(cāng)庫(kù)。

Git History

Git History 可以幫助你迅速查看 Git 歷史記錄，圖形化的頁(yè)面，使 Git 歷史一目了然（如下圖）。

我們還可以查看指定文件的指定版本（如下圖）

我們還可以將光標(biāo)停留在某一行代碼，查看該行代碼的提交信息（提交人、提交時(shí)間、提交信息）（如下圖）

Git Graph

Git Graph 可以幫助你更好的分析分支之間的關(guān)系（如下圖）

Git Emoji

Git Emoji 可以更好的幫助團(tuán)隊(duì)形成提交規(guī)范，使用一個(gè) Emoji 表情概括本次提交，再加上一些文本描述信息，提交記錄將會(huì)變得賞心悅目（如下圖）。

GitLens

GitLens 可以幫助你快速比對(duì)不同分支的代碼差異（如下圖）

番外

在 vscode 里畫流程圖 - draw.io

安裝 draw.io 后，新建一個(gè) helloworld.drawio，就可以在 vscode 里面畫流程圖啦（如下圖）！

用來(lái)畫一些簡(jiǎn)單的流程圖還是不錯(cuò)的，vscode 全棧工程師。

彩虹屁 - Rainbow Fart

Rainbow Fart 是個(gè)鼓勵(lì)師插件，在你敲代碼的時(shí)候一直鼓勵(lì)你，語(yǔ)音包可以選擇聲音甜美的小姐姐。

安裝完成后，按下鍵盤組合鍵 Ctrl + Shift + P，輸入 Enable Rainbow Fart 并回車，這時(shí)候會(huì)打開(kāi)一個(gè)新頁(yè)面用于播放語(yǔ)音（如下圖）。

這時(shí)候，新建一個(gè)文件開(kāi)始敲代碼吧，比如寫一個(gè) for 循環(huán)，或者寫一個(gè) function，都會(huì)有驚喜喲~

總結(jié)

好啦，本次的 vscode 插件分析就到這里啦！大家有什么好用的插件也可以在留言區(qū)留言分享喲~

到此這篇關(guān)于盤一盤那些提效/創(chuàng)意的vscode插件(小結(jié))的文章就介紹到這了,更多相關(guān)vscode 插件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

最新評(píng)論