在前端開(kāi)發(fā)中浪规，vscode 是最常用的編輯器，而 vscode 有著各種實(shí)用插件涕俗，有些可以幫助我們提升效率罗丰，有些可以讓我們的工作過(guò)程變得更加快樂(lè)。
今天我們就來(lái)介紹一下這些好用的插件吧~
提效類(lèi)插件
代碼神器 - Power Mode
首先再姑，介紹的第一款插件是 Power Mode萌抵，它可以讓你的編程過(guò)程變得更加快樂(lè)（如下圖）。
除了上面那種效果外，這個(gè)插件還有其他的幾種效果绍填，都是不錯(cuò)的霎桅。接下來(lái)我們來(lái)學(xué)習(xí)一下如何使用吧！
首先我們?cè)?vscode 插件欄搜索 Power Mode（如下圖）讨永。
然后我們點(diǎn)擊安裝滔驶，安裝后我們按下鍵盤(pá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ā)中著角，代碼文件越寫(xiě)越多，單文件越來(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 中快速定位到這行注釋?zhuān)ㄈ缦聢D）审葬。
我們還可以通過(guò)下面的設(shè)置（setting.json）深滚，自定義顏色與高亮代碼，然后我們就可以迅速定義關(guān)鍵方法的位置啦（如下圖）涣觉。
"todo-tree.highlights.customHighlight": {
"API": { // 關(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
寫(xiě)代碼總是離不開(kāi)各種類(lè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)位置和類(lèi)型，這樣你就可以快速定位啦Ｏツ（如下圖）
拼寫(xiě)檢查 - Code Spell Checker
我們?cè)谄綍r(shí)的開(kāi)發(fā)過(guò)程中鸦难，有時(shí)候會(huì)因?yàn)樽兞棵x時(shí)和使用時(shí)不一致，debug 半天最后發(fā)現(xiàn)是拼寫(xiě)問(wèn)題员淫。
我們可以使用 Code Spell Checker 插件進(jìn)行拼寫(xiě)檢測(cè)合蔽，我們安裝插件后，還可以在 setting.json 中指定檢測(cè)的文件介返，比如我這里開(kāi)啟了對(duì) Vue 文件的拼寫(xiě)檢查（如下圖）拴事。
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 里畫(huà)流程圖 - draw.io
安裝 draw.io 后寿烟，新建一個(gè) helloworld.drawio，就可以在 vscode 里面畫(huà)流程圖啦（如下圖）辛燥！
用來(lái)畫(huà)一些簡(jiǎn)單的流程圖還是不錯(cuò)的，vscode 全棧工程師缝其。
彩虹屁 - Rainbow Fart
Rainbow Fart 是個(gè)鼓勵(lì)師插件挎塌，在你敲代碼的時(shí)候一直鼓勵(lì)你，語(yǔ)音包可以選擇聲音甜美的小姐姐内边。
安裝完成后榴都，按下鍵盤(pán)組合鍵 Ctrl + Shift + P，輸入 Enable Rainbow Fart 并回車(chē)漠其，這時(shí)候會(huì)打開(kāi)一個(gè)新頁(yè)面用于播放語(yǔ)音（如下圖）嘴高。
這時(shí)候，新建一個(gè)文件開(kāi)始敲代碼吧和屎，比如寫(xiě)一個(gè) for 循環(huán)拴驮，或者寫(xiě)一個(gè) function，都會(huì)有驚喜喲~
總結(jié)
好啦柴信，本次的 vscode 插件分析就到這里啦套啤！大家有什么好用的插件也可以在留言區(qū)留言分享喲~
下期預(yù)告：
盤(pán)一盤(pán)那些提效/創(chuàng)意的網(wǎng)站
最后一件事
如果您已經(jīng)看到這里了，希望您還是點(diǎn)個(gè)贊再走吧~
您的點(diǎn)贊是對(duì)作者的最大鼓勵(lì)随常，也可以讓更多人看到本篇文章潜沦！
如果覺(jué)得本文對(duì)您有幫助，請(qǐng)幫忙在 github 上點(diǎn)亮 star 鼓勵(lì)一下吧绪氛！
