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

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

提效類插件

代碼神器 - Power Mode

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

除了上面那種效果外，這個插件還有其他的幾種效果，都是不錯的。接下來我們來學習一下如何使用吧！

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

然后我們點擊安裝，安裝后我們按下鍵盤組合鍵 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"

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

高亮標識 - Todo Tree

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

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

我們還可以通過下面的設(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"

},

},

快速定位括號 - Bracket Pair Colorizer

寫代碼總是離不開各種類型的括號，當嵌套比較深的時候，然后需要改動結(jié)構(gòu)時，括號問題經(jīng)常會困擾我們。

Bracket Pair Colorizer 可以幫助你快速區(qū)分括號位置和類型，這樣你就可以快速定位啦！（如下圖）

拼寫檢查 - Code Spell Checker

我們在平時的開發(fā)過程中，有時候會因為變量名定義時和使用時不一致，debug 半天最后發(fā)現(xiàn)是拼寫問題。

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

Git 管理

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

Git History

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

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

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

Git Graph

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

Git Emoji

Git Emoji 可以更好的幫助團隊形成提交規(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ū)留言分享喲~

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

最新評論