小黑

怎么了，小粉，愁眉苦臉的

小粉

剛剛一個(gè)問題找了半個(gè)小時(shí)，居然。。。

小黑

居然怎么樣？

小粉

說了你不許笑我蠢，，， 找了半個(gè)小時(shí)，

居然因?yàn)樯賹懥艘粋€(gè)括號(hào)?

小黑

哈哈哈

小粉

你還笑，這效率，

看來今晚又要加班了o(╥﹏╥)o

小黑

別苦著臉了，試試這幾個(gè)vscode插件，

保證你開發(fā)效率提上來

小粉

真的嗎，我看看... ...

---

vscode?插件Rainbow Brackets編碼過程中，尤其在我們使用js進(jìn)行函數(shù)式編程時(shí)，代碼里會(huì)有很多的花括號(hào)，想要保證它們對(duì)稱十分困難，所以就出現(xiàn)了上面小粉同學(xué)的尷尬局面，相信很多人都遇到過類似的情況。Rainbow Brackets，可以將同一對(duì)花括號(hào)給定相同的顏色，可以一眼就看出配對(duì)的兩個(gè)花括號(hào)。Indent RainbowIndent Rainbow?則可以給代碼的縮進(jìn)提供顏色上提示，和?Rainbow Brackets?這搭配使用，可以在代碼層級(jí)較多時(shí)，也能看起來很清晰，一目了然。Project Manager工作中，我們經(jīng)常會(huì)來回切換多個(gè)項(xiàng)目，每次都要找到對(duì)應(yīng)項(xiàng)目的目錄再打開，比較麻煩。Project Manager插件可以解決這樣的煩惱，它提供了專門的視圖來展示你的項(xiàng)目，我們可以把常用的項(xiàng)目保存在這里，需要時(shí)一鍵切換，十分方便，媽媽再也不用擔(dān)心我忘記把項(xiàng)目放在哪個(gè)目錄下了。Import Cost在項(xiàng)目開發(fā)過程中，我們會(huì)引入很多npm包，有時(shí)候可能只用到了某個(gè)包里的一個(gè)方法，卻引入了整個(gè)包，導(dǎo)致代碼體積增大很多。Import Cost可以在代碼中友好的提示我們，當(dāng)前引入的包會(huì)增加多少體積，這很有助于幫我們優(yōu)化代碼的體積。Pigment? ??遇到顏色代碼時(shí)，Pigment會(huì)將顏色渲染在這段代碼的下面。GitLensGitLens可以顯示每一行代碼的作者，提交時(shí)間，以及commit信息，在想要知道哪行代碼是誰改動(dòng)的時(shí)候非常的實(shí)用。把鼠標(biāo)移到這條提示上，會(huì)彈出更詳細(xì)的描述，不止如此，GitLens 還可以查看代碼的歷史記錄，能夠查看某個(gè) commit 的代碼改動(dòng)，能夠 diff 任意commit或branch，進(jìn)行對(duì)比。Settings SyncSettings Sync 提供了同步個(gè)人設(shè)置的功能，當(dāng)我們需要換電腦進(jìn)行開發(fā)時(shí)，比如回家用自己的電腦，或者換了新的電腦，該插件可以幫你同步之前做的設(shè)置，不需要在每臺(tái)電腦上都重新設(shè)置一次。Markdown Preview Enhanced超級(jí)強(qiáng)大的 Markdown 插件，這款插件可以讓你擁有飄逸的 Markdown 寫作體驗(yàn)。程序員怎么可能不寫文檔？！Markdown Preview Enhanced對(duì)Markdown語法進(jìn)行了增強(qiáng)。支持了目錄，批注，自定義預(yù)覽css，插入公式，純文本繪圖，導(dǎo)出導(dǎo)入文檔，制作幻燈片，甚至，還可以在文檔中跑代碼。總之一句話非常強(qiáng)大，非常好用。文末給出了Markdown Preview Enhanced的中文文檔地址，感興趣可以去了解一下。ESlint

ESlint可以在我們?cè)赾oding的時(shí)候，分析我們的代碼，對(duì)有錯(cuò)誤或不符合規(guī)范的地方，給出提示，讓我們第一時(shí)間發(fā)現(xiàn)代碼的問題。同時(shí)，還能在保存時(shí)，幫助我們自動(dòng)修復(fù)一些問題。

關(guān)于eslint的更多使用方法，請(qǐng)戳 談?wù)勄岸舜a規(guī)范

Path Intellisense

Path Intellisense可以智能提示路徑，并幫我們自動(dòng)補(bǔ)全路徑

Document This

可以幫我們快速生成代碼注釋，比如一些函數(shù)的注釋，能夠自動(dòng)抽取出參數(shù)的定義。比如下面的函數(shù)，只需在上面輸入/**， 就會(huì)自動(dòng)觸發(fā) Document This插件，生成如下的注釋。

---

小粉

哇，感覺好棒啊，我都要用起來，

你剛剛給我說了插件有?

Markdown Preview Enhanced，還有，，，

還有啥了，我記不住了

小黑

。。。?。。。?。。。豬腦子

小粉

你剛才都說哪些插件了，再說一遍！

小黑

那你晚上陪我看電影，我就告訴你?

小粉

啥？？？我晚上要加班呢?

小黑

有了這些插件，你還用加班呢？！

小粉

是哦，那好吧。

---

如何分享插件分享插件，除了將插件名字告訴你的小伙伴，當(dāng)然還有其他的辦法了！可以在項(xiàng)目的 .vscode 目錄下創(chuàng)建文件?extensions.json。然后給 recommendations提供一個(gè)想要分享給同伴的插件的 ID 數(shù)組，這樣當(dāng)他們打開項(xiàng)目，并且沒有安裝某些插件時(shí)，VS Code就會(huì)提示安裝了，并且可以一鍵全部安裝。.vscode/extensions.json文件內(nèi)是這樣的。{ "recommendations":?[ '2gua.rainbow-brackets',??????'oderwat.indent-rainbow',?????????????'alefragnani.project-manager',?????????????'wix.vscode-import-cost',?????????????'jaspernorth.vscode-pigments',?????????????'eamodio.gitlens',?????????????'shan.code-settings-sync',?????????????'shd101wyy.markdown-preview-enhanced',?????????????'dbaeumer.vscode-eslint',?????????????'christian-kohler.path-intellisense',?????????????'joelday.docthis'???????]}

可以直接復(fù)制上面的代碼到自己項(xiàng)目的.vscode/extensions.json 文件中，一鍵安裝本文介紹的所有插件。

recommendations數(shù)組中是插件的ID，不是名字，插件ID可以在這里查看。

---

小粉

哇~ 一下子就都安裝上了，好贊啊

小黑

嘿嘿嘿，別忘了去看電影啊~

小粉

最近 「哪吒」比較火，要不就看它？

小黑

好呀，我們下班走起

小粉

看完電影是不是太晚了？沒地鐵了咋辦

(小黑偷笑，，，此處省略××字，具體情節(jié)請(qǐng)自行腦補(bǔ))

---

故事純屬虛構(gòu)，如有雷同，純屬巧合。祝大家提高效率，不再加班！相關(guān)鏈接Markdown Preview Enhanced文檔：https://shd101wyy.github.io/markdown-preview-enhanced/#/zh-cn/

初識(shí)Threejs，一起學(xué)習(xí)成長(zhǎng)

長(zhǎng)按關(guān)注?“初識(shí)Threejs”

把有用的知識(shí)，分享給更多人

你“在看”我嗎？

總結(jié)

以上是生活随笔為你收集整理的js函数提示 vscode_工欲善其事，必先利其器，VSCode高效插件的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。