60 個(gè)神級(jí) VS Code 插件！
點(diǎn)擊上方“小白學(xué)視覺(jué)”，選擇加"星標(biāo)"或“置頂”
重磅干貨，第一時(shí)間送達(dá) 
vscode 進(jìn)行開(kāi)發(fā)，并且比較喜歡折騰 vscode ，會(huì)到處找這一些好玩的插件，于是越攢越多，今天給大家推薦一下我收藏的 60 多個(gè) vscode 插件，據(jù)說(shuō)插件裝太多，編輯器會(huì)變卡，可能是我的電腦配置還頂?shù)米。壳安](méi)有感覺(jué)到卡卡的。
vscode 配置，以及插件的不同，部分插件可能在你電腦上不會(huì)生效。文中提到的快捷鍵都是 windows 下的，其他操作系統(tǒng)的快捷鍵請(qǐng)自行了解。
bug 更有動(dòng)力。
Better Comments
安裝完以后，插件會(huì)默認(rèn)自帶幾種顏色的注釋，還可以通過(guò) vscode 的配置文件自定義任何顏色，類型的注釋。具體的配置方法我給你們找好了。
Bracket Pair Colorizer 2 是增強(qiáng)版，具體我沒(méi)有深入研究具體增強(qiáng)了哪些內(nèi)容。而且它有挺多的設(shè)置項(xiàng)，反正安裝完默認(rèn)的配置已經(jīng)夠用了，感興趣的同學(xué)自行發(fā)覺(jué)更多有趣玩法吧。
html 標(biāo)簽，配對(duì)的標(biāo)簽就會(huì)出現(xiàn)下劃線來(lái)指示你誰(shuí)和誰(shuí)是一對(duì)。
vscode 變成中文，像我這種英語(yǔ)弱雞才會(huì)用，大佬們略過(guò)。為什么要放在優(yōu)化外觀的分類里，因?yàn)槲矣X(jué)得中文比英文好看????，安裝完重啟就行了。
css 顏色屬性，直觀的展示了出來(lái)。
Material Theme Palenight High Contrast 這一款。安裝完了以后點(diǎn)擊 設(shè)置顏色主題 就可以了。
Material Theme Icons
Material Theme Icons 我更喜歡這個(gè)的風(fēng)格，蘿卜青菜可有所愛(ài)，大家各取所需。
AZ AL Dev Tools/AL Code Outline
AL OUTLINE 的選項(xiàng)。
vue 文件，請(qǐng)忽略我的代碼內(nèi)容，專注于插件的功能????， 可以看到展開(kāi)第一層是極具 vue 單文件組件特點(diǎn)的 template，script，style。逐層展開(kāi)就可以看到 dom 節(jié)點(diǎn)， methods 里面定義的函數(shù)等，然后點(diǎn)擊就可以快速定位到目標(biāo)所在位置，媽媽再也不用擔(dān)心我全局搜啦！
Code Runner
console.log ，還有很多其他玩法，具體使用參考此篇文章
CodeIf 的出現(xiàn)讓這個(gè)問(wèn)題迎刃而解，它通過(guò)搜索 GitHub, Bitbucket, GitLab 來(lái)找到真實(shí)的使用變量名，為你提供一些高頻使用的詞匯。
CodeIf 就可以跳轉(zhuǎn)到網(wǎng)頁(yè)，顯示候選命名。
Debugger for Firefox，Debugger for Microsoft Edge等，其他的我沒(méi)用過(guò)，大家按需安裝即可，使用方法應(yīng)該都大同小異。
.vscode 文件夾以及 launch.json 文件，不用管。
配置文件的具體內(nèi)容和使用方法可以看這一篇，很詳細(xì)。
Git History
Git：View File History 來(lái)以列表的形式查看所有的提交記錄。
git 相關(guān)的插件，功能比上一個(gè)要強(qiáng)大一些。上一個(gè)插件的演示圖片中可以看到我的每一行代碼都有上一次 git 提交的記錄，那就是這個(gè)插件的功勞。
LeetCode
vscode 中刷算法題的。我自己沒(méi)用過(guò)????
.history 的文件夾。代碼的修改記錄就會(huì)放在這里面。記得添加.gitignore，不然每次提交代碼的時(shí)候就要遭重了。
html 文件。
html 文件上右擊，選擇 open in default browser 即可打開(kāi)使用瀏覽器打開(kāi)文件。
Beyond Compare 了，但是它是收費(fèi)的！那么 Partial Diff 這款神奇的插件就成為了良好的替代品，選中一代碼，右鍵 Select Text for Compare ，選中另外一部分代碼，右鍵Compare Text with Previous Selection即可。我的是中文的，就更明顯了????
Postman 都聽(tīng)說(shuō)過(guò)吧，這個(gè)插件就基本上可以理解為，在 vscode 里面使用 postman 。
Create Request 就可以正常使用了。
projects.json 這個(gè)文件，點(diǎn)擊項(xiàng)目名字就可以切換了，也可以新窗口打開(kāi)。
Auto Import
Typescript 自動(dòng)導(dǎo)入，其實(shí)現(xiàn)在很多的插件基本都內(nèi)置了這種功能，已經(jīng)不是必須品了。可能是因?yàn)槲已b了各種奇奇怪怪的插件，我現(xiàn)在想導(dǎo)入什么東西的時(shí)候，一大堆的提示，隨便選一個(gè)都能導(dǎo)進(jìn)來(lái)??
nice。
F1（windows） ，輸入對(duì)應(yīng)命令即可。
f1 輸入命令即可，一般輸入 esq 就出現(xiàn)提示了。
console.log ，那么這就是一款快速生成 console.log 的插件。使用方法非常簡(jiǎn)單， 選中變量，然后按 ctrl + shift + L 就可以生成了。需要?jiǎng)h除的時(shí)候按 ctrl + shift + D 即可刪除。
json 格式轉(zhuǎn)成 ts 的類型，復(fù)制 json 之后按 ctrl + alt + v 即可。
settings.json 中進(jìn)行自定義配置。
"fileheader.customMade": {
"Author": "一尾流鶯",
"Description": "",
"Date": "Do not edit",
"LastEditTime": "Do not edit",
"FilePath": ""
},
"fileheader.cursorMode": {
"description": "",
"param": "",
"return": ""
},Mithril Emmet
vscode 已經(jīng)內(nèi)置了。
npm 包的時(shí)候，智能提示。
console.log 的插件，不同的是，他支持自定義 console.log 的內(nèi)容，包括文件名，路徑，大小等，還可以添加自己喜歡的 emoji 表情，快捷鍵 ctrl + alt + L。
-
JavaScript (ES6) code snippets -
Jest Snippets -
HTML Snippets -
Vue VSCode Snippets -
Vue 3 Snippets -
... ...
用來(lái)代碼格式化的，但是我好像安裝了沒(méi)怎么用，我一直都是 eslint + prettier，有正在用的小伙伴可以在評(píng)論區(qū)發(fā)表一下看法，感興趣的請(qǐng)自己搜索使用方法。
.eslintrc.js 文件去配置，也可以用很多大公司現(xiàn)有的規(guī)范，太復(fù)雜了就不細(xì)講了，貼出教程鏈接。
eslint 使用，也可以單獨(dú)使用。
.prettierrc.json 文件，在里面書(shū)寫(xiě)自己想要的格式就行了。更具體的配置內(nèi)容查看鏈接
vue 進(jìn)行開(kāi)發(fā)的小伙伴都少不了跟它們打交道，volar 是跟 vue3 更配的，功能也能多，由于這兩個(gè)插件功能過(guò)于龐大，就不展開(kāi)講了，感興趣的自行搜索使用。
emoji 表情，我自己除了寫(xiě)一些注釋，console.log 之外，基本沒(méi)有別的作用，但是挺好玩的，別人看你的代碼中各種小表情，也會(huì)覺(jué)得你是一個(gè)可愛(ài)的人吧。
emoji 設(shè)為變量名，我可不建議你們這樣做。使用方法也是非常的簡(jiǎn)單，按 f1（windows） 輸入 emoji ，可以看到有三個(gè)選項(xiàng)，分別是 emoji 表情，markdown 下的 emoji，還有 unicode 下的 emoji。選中一個(gè)模式回車(chē)進(jìn)入列表，再回車(chē)就可以輸入到代碼中了。
可以同步 vscode 配置的插件，由于我沒(méi)有換過(guò)電腦，所以還沒(méi)親測(cè)，但是網(wǎng)上用的人還是蠻多的。
作者：一尾流鶯
鏈接：https://juejin.cn/post/6994327298740600839
下載1：OpenCV-Contrib擴(kuò)展模塊中文版教程
在「小白學(xué)視覺(jué)」公眾號(hào)后臺(tái)回復(fù)：擴(kuò)展模塊中文教程，即可下載全網(wǎng)第一份OpenCV擴(kuò)展模塊教程中文版，涵蓋擴(kuò)展模塊安裝、SFM算法、立體視覺(jué)、目標(biāo)跟蹤、生物視覺(jué)、超分辨率處理等二十多章內(nèi)容。
下載2：Python視覺(jué)實(shí)戰(zhàn)項(xiàng)目52講
在「小白學(xué)視覺(jué)」公眾號(hào)后臺(tái)回復(fù)：Python視覺(jué)實(shí)戰(zhàn)項(xiàng)目，即可下載包括圖像分割、口罩檢測(cè)、車(chē)道線檢測(cè)、車(chē)輛計(jì)數(shù)、添加眼線、車(chē)牌識(shí)別、字符識(shí)別、情緒檢測(cè)、文本內(nèi)容提取、面部識(shí)別等31個(gè)視覺(jué)實(shí)戰(zhàn)項(xiàng)目，助力快速學(xué)校計(jì)算機(jī)視覺(jué)。
下載3：OpenCV實(shí)戰(zhàn)項(xiàng)目20講
在「小白學(xué)視覺(jué)」公眾號(hào)后臺(tái)回復(fù)：OpenCV實(shí)戰(zhàn)項(xiàng)目20講，即可下載含有20個(gè)基于OpenCV實(shí)現(xiàn)20個(gè)實(shí)戰(zhàn)項(xiàng)目，實(shí)現(xiàn)OpenCV學(xué)習(xí)進(jìn)階。
交流群
歡迎加入公眾號(hào)讀者群一起和同行交流，目前有SLAM、三維視覺(jué)、傳感器、自動(dòng)駕駛、計(jì)算攝影、檢測(cè)、分割、識(shí)別、醫(yī)學(xué)影像、GAN、算法競(jìng)賽等微信群（以后會(huì)逐漸細(xì)分），請(qǐng)掃描下面微信號(hào)加群，備注：”昵稱+學(xué)校/公司+研究方向“，例如：”張三 + 上海交大 + 視覺(jué)SLAM“。請(qǐng)按照格式備注，否則不予通過(guò)。添加成功后會(huì)根據(jù)研究方向邀請(qǐng)進(jìn)入相關(guān)微信群。請(qǐng)勿在群內(nèi)發(fā)送廣告，否則會(huì)請(qǐng)出群，謝謝理解~
下載1：OpenCV-Contrib擴(kuò)展模塊中文版教程
在「小白學(xué)視覺(jué)」公眾號(hào)后臺(tái)回復(fù)：擴(kuò)展模塊中文教程，即可下載全網(wǎng)第一份OpenCV擴(kuò)展模塊教程中文版，涵蓋擴(kuò)展模塊安裝、SFM算法、立體視覺(jué)、目標(biāo)跟蹤、生物視覺(jué)、超分辨率處理等二十多章內(nèi)容。
下載2：Python視覺(jué)實(shí)戰(zhàn)項(xiàng)目52講
在「小白學(xué)視覺(jué)」公眾號(hào)后臺(tái)回復(fù)：Python視覺(jué)實(shí)戰(zhàn)項(xiàng)目，即可下載包括圖像分割、口罩檢測(cè)、車(chē)道線檢測(cè)、車(chē)輛計(jì)數(shù)、添加眼線、車(chē)牌識(shí)別、字符識(shí)別、情緒檢測(cè)、文本內(nèi)容提取、面部識(shí)別等31個(gè)視覺(jué)實(shí)戰(zhàn)項(xiàng)目，助力快速學(xué)校計(jì)算機(jī)視覺(jué)。
下載3：OpenCV實(shí)戰(zhàn)項(xiàng)目20講
在「小白學(xué)視覺(jué)」公眾號(hào)后臺(tái)回復(fù)：OpenCV實(shí)戰(zhàn)項(xiàng)目20講，即可下載含有20個(gè)基于OpenCV實(shí)現(xiàn)20個(gè)實(shí)戰(zhàn)項(xiàng)目，實(shí)現(xiàn)OpenCV學(xué)習(xí)進(jìn)階。
交流群
歡迎加入公眾號(hào)讀者群一起和同行交流，目前有SLAM、三維視覺(jué)、傳感器、自動(dòng)駕駛、計(jì)算攝影、檢測(cè)、分割、識(shí)別、醫(yī)學(xué)影像、GAN、算法競(jìng)賽等微信群（以后會(huì)逐漸細(xì)分），請(qǐng)掃描下面微信號(hào)加群，備注：”昵稱+學(xué)校/公司+研究方向“，例如：”張三 + 上海交大 + 視覺(jué)SLAM“。請(qǐng)按照格式備注，否則不予通過(guò)。添加成功后會(huì)根據(jù)研究方向邀請(qǐng)進(jìn)入相關(guān)微信群。請(qǐng)勿在群內(nèi)發(fā)送廣告，否則會(huì)請(qǐng)出群，謝謝理解~
評(píng)論
圖片
表情