給大伙兒盤幾個(gè)提效/創(chuàng)意的 vscode 插件

原文：https://juejin.im/post/6870428510041833480

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

今天我們就來介紹一下這些好用的插件吧~

提效類插件

代碼神器 - Power Mode

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

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

首先我們在 vscode 插件欄搜索 Power Mode（如下圖）。

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

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

"powermode.enabled": true, // 開啟 Power Mode
"powermode.shakeIntensity": 0, // 關(guān)閉抖動(dòng)（喜歡的也可以選擇不關(guān)閉）
"powermode.presets": "particles", // 特效預(yù)設(shè)，還有 "fireworks", "flames", "magic", "clippy", "simple-rift", "exploding-rift"

好了，可以開始你的 “特效編程之旅” 了！

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

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

這里可以推薦一個(gè)插件來幫助提高效率，那就是 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)嵌套比較深的時(shí)候，然后需要改動(dòng)結(jié)構(gòu)時(shí)，括號問題經(jīng)常會困擾我們。

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

拼寫檢查 - Code Spell Checker

我們在平時(shí)的開發(fā)過程中，有時(shí)候會因?yàn)樽兞棵x時(shí)和使用時(shí)不一致，debug 半天最后發(fā)現(xiàn)是拼寫問題。

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

Git 管理

vscode 有很多 Gi1t 管理的插件，可以幫助你來管理 Git 倉庫。

Git History

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

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

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

Git Graph

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

Git Emoji

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

GitLens

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

番外

在 vscode 里畫流程圖 - draw.io

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

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

彩虹屁 - Rainbow Fart

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

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

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

總結(jié)

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

下期預(yù)告：

盤一盤那些提效/創(chuàng)意的網(wǎng)站

最后一件事

如果您已經(jīng)看到這里了，希望您還是點(diǎn)個(gè)贊再走吧~

您的點(diǎn)贊是對作者的最大鼓勵(lì)，也可以讓更多人看到本篇文章！

如果覺得本文對您有幫助，請幫忙在 github 上點(diǎn)亮 star 鼓勵(lì)一下吧！