vscode 插件

Rainbow Brackets

編碼過程中，尤其在我們使用js進行函數式編程時，代碼里會有很多的花括號，想要保證它們對稱十分困難，所以就出現了上面小粉同學的尷尬局面，相信很多人都遇到過類似的情況。

Rainbow Brackets，可以將同一對花括號給定相同的顏色，可以一眼就看出配對的兩個花括號。

Indent Rainbow

Indent Rainbow 則可以給代碼的縮進提供顏色上提示，和 Rainbow Brackets 這搭配使用，可以在代碼層級較多時，也能看起來很清晰，一目了然。

Project Manager

工作中，我們經常會來回切換多個項目，每次都要找到對應項目的目錄再打開，比較麻煩。Project Manager插件可以解決這樣的煩惱，它提供了專門的視圖來展示你的項目，我們可以把常用的項目保存在這里，需要時一鍵切換，十分方便，媽媽再也不用擔心我忘記把項目放在哪個目錄下了。

Import Cost

在項目開發過程中，我們會引入很多npm包，有時候可能只用到了某個包里的一個方法，卻引入了整個包，導致代碼體積增大很多。Import Cost 可以在代碼中友好的提示我們，當前引入的包會增加多少體積，這很有助于幫我們優化代碼的體積。

Pigment

遇到顏色代碼時，Pigment會將顏色渲染在這段代碼的下面。

關注我的頭條號，分享更多的技術學習文章，我自己是一名從事了多年開發的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個月整理了一份最適合2019年學習的web前端學習干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關注我的頭條號并在后臺私信我：前端，即可免費獲取。

GitLens

GitLens可以顯示每一行代碼的作者，提交時間，以及commit信息，在想要知道哪行代碼是誰改動的時候非常的實用。

把鼠標移到這條提示上，會彈出更詳細的描述，

不止如此，GitLens 還可以查看代碼的歷史記錄，能夠查看某個 commit 的代碼改動，能夠 diff 任意commit或branch，進行對比。

Settings Sync

Settings Sync 提供了同步個人設置的功能，當我們需要換電腦進行開發時，比如回家用自己的電腦，或者換了新的電腦，該插件可以幫你同步之前做的設置，不需要在每臺電腦上都重新設置一次。

Markdown Preview Enhanced

超級強大的 Markdown 插件，這款插件可以讓你擁有飄逸的 Markdown 寫作體驗。

程序員怎么可能不寫文檔？！Markdown Preview Enhanced 對Markdown語法進行了增強。

支持了目錄，批注，自定義預覽css，插入公式，純文本繪圖，導出導入文檔，制作幻燈片，甚至，還可以在文檔中跑代碼。總之一句話非常強大，非常好用。

文末給出了Markdown Preview Enhanced 的中文文檔地址，感興趣可以去了解一下。

ESlint

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

關于eslint的更多使用方法，請戳 談談前端代碼規范

Path Intellisense

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

Document This

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

分享插件，除了將插件名字告訴你的小伙伴，當然還有其他的辦法了！

可以在項目的 .vscode 目錄下創建文件 extensions.json。然后給 recommendations 提供一個想要分享給同伴的插件的 ID 數組，這樣當他們打開項目，并且沒有安裝某些插件時，VS Code就會提示安裝了，并且可以一鍵全部安裝。

.vscode/extensions.json 文件內是這樣的。

{ "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' ]}

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

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

總結

以上是生活随笔為你收集整理的2020idea插件怎么同步_没有用过这些插件，别说你在用vscode的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。