小黑

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

小粉

剛剛一個問題找了半個小時，居然。。。

小黑

居然怎么樣？

小粉

說了你不許笑我蠢，，， 找了半個小時，

居然因為少寫了一個括號?

小黑

哈哈哈

小粉

你還笑，這效率，

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

小黑

別苦著臉了，試試這幾個vscode插件，

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

小粉

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

---

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

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

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

Path Intellisense

Path Intellisense可以智能提示路徑，并幫我們自動補全路徑

Document This

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

---

小粉

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

你剛剛給我說了插件有?

Markdown Preview Enhanced，還有，，，

還有啥了，我記不住了

小黑

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

小粉

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

小黑

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

小粉

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

小黑

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

小粉

是哦，那好吧。

---

如何分享插件分享插件，除了將插件名字告訴你的小伙伴，當(dāng)然還有其他的辦法了！可以在項目的 .vscode 目錄下創(chuàng)建文件?extensions.json。然后給 recommendations提供一個想要分享給同伴的插件的 ID 數(shù)組，這樣當(dāng)他們打開項目，并且沒有安裝某些插件時，VS Code就會提示安裝了，并且可以一鍵全部安裝。.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ù)制上面的代碼到自己項目的.vscode/extensions.json 文件中，一鍵安裝本文介紹的所有插件。

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

---

小粉

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

小黑

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

小粉

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

小黑

好呀，我們下班走起

小粉

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

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

---

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

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

長按關(guān)注?“初識Threejs”

把有用的知識，分享給更多人

你“在看”我嗎？

總結(jié)

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

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