在前端開發(fā)中壤躲，vscode 是最常用的編輯器泼诱，而 vscode 有著各種實(shí)用插件，有些可以幫助我們提升效率耳璧，有些可以讓我們的工作過程變得更加快樂。
今天我們就來介紹一下這些好用的插件吧~
提效類插件
代碼神器 - Power Mode
首先展箱，介紹的第一款插件是 Power Mode旨枯，它可以讓你的編程過程變得更加快樂（如下圖）。
除了上面那種效果外混驰，這個插件還有其他的幾種效果召廷，都是不錯的。接下來我們來學(xué)習(xí)一下如何使用吧账胧！
首先我們在 vscode 插件欄搜索 Power Mode（如下圖）竞慢。
然后我們點(diǎn)擊安裝，安裝后我們按下鍵盤組合鍵 Ctrl + Shift + P治泥，然后輸入 setting筹煮，打開 JSON 配置文件（如下圖）
在最后添加下面三行配置：
"powermode.enabled": true, // 開啟 Power Mode
"powermode.shakeIntensity": 0, // 關(guān)閉抖動（喜歡的也可以選擇不關(guān)閉）
"powermode.presets": "particles", // 特效預(yù)設(shè)，還有 "fireworks", "flames", "magic", "clippy", "simple-rift", "exploding-rift"
好了居夹，可以開始你的 “特效編程之旅” 了败潦！
高亮標(biāo)識 - Todo Tree
我們在平時的業(yè)務(wù)開發(fā)中，代碼文件越寫越多准脂，單文件越來越長劫扒。在修改代碼時，總是需要頻繁在文件中尋找想要的內(nèi)容狸膏，或者在文件中上下滾動來尋找目標(biāo)代碼沟饥，然后進(jìn)行修改。
這里可以推薦一個插件來幫助提高效率湾戳，那就是 Todo Tree贤旷，我們在應(yīng)用商店搜索進(jìn)行安裝后，我們只需要添加 // TODO: 這樣的注釋代碼砾脑，我們就可以在 Todo Tree 中快速定位到這行注釋（如下圖）幼驶。
我們還可以通過下面的設(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"
},
},
快速定位括號 - Bracket Pair Colorizer
寫代碼總是離不開各種類型的括號购桑，當(dāng)嵌套比較深的時候漓帚，然后需要改動結(jié)構(gòu)時屏积，括號問題經(jīng)常會困擾我們。
Bracket Pair Colorizer 可以幫助你快速區(qū)分括號位置和類型浸赫，這樣你就可以快速定位啦？湔（如下圖）
拼寫檢查 - Code Spell Checker
我們在平時的開發(fā)過程中，有時候會因?yàn)樽兞棵x時和使用時不一致榴徐，debug 半天最后發(fā)現(xiàn)是拼寫問題守问。
我們可以使用 Code Spell Checker 插件進(jìn)行拼寫檢測，我們安裝插件后坑资，還可以在 setting.json 中指定檢測的文件耗帕，比如我這里開啟了對 Vue 文件的拼寫檢查（如下圖）。
Git 管理
vscode 有很多 Gi1t 管理的插件袱贮，可以幫助你來管理 Git 倉庫仿便。
Git History
Git History 可以幫助你迅速查看 Git 歷史記錄，圖形化的頁面攒巍，使 Git 歷史一目了然（如下圖）嗽仪。
我們還可以查看指定文件的指定版本（如下圖）
我們還可以將光標(biāo)停留在某一行代碼，查看該行代碼的提交信息（提交人柒莉、提交時間闻坚、提交信息）（如下圖）
Git Graph
Git Graph 可以幫助你更好的分析分支之間的關(guān)系（如下圖）
Git Emoji
Git Emoji 可以更好的幫助團(tuán)隊(duì)形成提交規(guī)范，使用一個 Emoji 表情概括本次提交兢孝，再加上一些文本描述信息窿凤，提交記錄將會變得賞心悅目（如下圖）。
GitLens
GitLens 可以幫助你快速比對不同分支的代碼差異（如下圖）
番外
在 vscode 里畫流程圖 - draw.io
安裝 draw.io 后跨蟹，新建一個 helloworld.drawio雳殊，就可以在 vscode 里面畫流程圖啦（如下圖）！
用來畫一些簡單的流程圖還是不錯的窗轩，vscode 全棧工程師夯秃。
彩虹屁 - Rainbow Fart
Rainbow Fart 是個鼓勵師插件，在你敲代碼的時候一直鼓勵你痢艺，語音包可以選擇聲音甜美的小姐姐寝并。
安裝完成后，按下鍵盤組合鍵 Ctrl + Shift + P腹备，輸入 Enable Rainbow Fart 并回車衬潦，這時候會打開一個新頁面用于播放語音（如下圖）。
這時候植酥，新建一個文件開始敲代碼吧镀岛，比如寫一個 for 循環(huán)弦牡，或者寫一個 function，都會有驚喜喲~
總結(jié)
好啦漂羊，本次的 vscode 插件分析就到這里啦驾锰！大家有什么好用的插件也可以在留言區(qū)留言分享喲~
下期預(yù)告：
盤一盤那些提效/創(chuàng)意的網(wǎng)站
最后一件事
如果您已經(jīng)看到這里了，希望您還是點(diǎn)個贊再走吧~
您的點(diǎn)贊是對作者的最大鼓勵走越，也可以讓更多人看到本篇文章椭豫！
如果覺得本文對您有幫助，請幫忙在 github 上點(diǎn)亮 star 鼓勵一下吧旨指！
