盤一盤那些提效/創(chuàng)意的 vscode 插件

關注▲?W3Cschool▲?，每天一篇文章，與你共同成長

作者丨曬兜斯

來源丨www.juejin.im/post/6870428510041833480

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

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

提效類插件

代碼神器 - Power Mode

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

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

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

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

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

"powermode.enabled":?true,?//?開啟?Power?Mode
"powermode.shakeIntensity":?0,?//?關閉抖動（喜歡的也可以選擇不關閉）
"powermode.presets":?"particles",?//?特效預設，還有?"fireworks",?"flames",?"magic",?"clippy",?"simple-rift",?"exploding-rift"
復制代碼

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

高亮標識 - Todo Tree

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

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

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

"todo-tree.highlights.customHighlight":?{
??"API":?{?//?關鍵詞
????"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

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

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

拼寫檢查 - 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?可以幫助你更好的分析分支之間的關系（如下圖）

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，都會有驚喜喲~

總結

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

下期預告：

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

最后一件事

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

您的點贊是對作者的最大鼓勵，也可以讓更多人看到本篇文章！

如果覺得本文對您有幫助，請幫忙在?GitHub上點亮?star?鼓勵一下吧！

GitHub地址：

https://github.com/a1029563229/Blogs