vscode 插件
Rainbow Brackets
編碼過程中，尤其在我們使用js進行函數式編程時，代碼里會有很多的花括號，想要保證它們對稱十分困難，所以就出現了上面小粉同學的尷尬局面，相信很多人都遇到過類似的情況。
Rainbow Brackets，可以將同一對花括號給定相同的顏色，可以一眼就看出配對的兩個花括號。
Indent Rainbow
Indent Rainbow 則可以給代碼的縮進提供顏色上提示，和 Rainbow Brackets 這搭配使用，可以在代碼層級較多時，也能看起來很清晰，一目了然。
Project Manager
工作中，我們經常會來回切換多個項目，每次都要找到對應項目的目錄再打開，比較麻煩。Project Manager插件可以解決這樣的煩惱，它提供了專門的視圖來展示你的項目，我們可以把常用的項目保存在這里，需要時一鍵切換，十分方便，媽媽再也不用擔心我忘記把項目放在哪個目錄下了。
Import Cost
在項目開發過程中，我們會引入很多npm包，有時候可能只用到了某個包里的一個方法，卻引入了整個包，導致代碼體積增大很多。Import Cost 可以在代碼中友好的提示我們，當前引入的包會增加多少體積，這很有助於幫我們優化代碼的體積。
Pigment
遇到顏色代碼時，Pigment會將顏色渲染在這段代碼的下面。
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的時候，分析我們的代碼，對有錯誤或不符合規范的地方，給出提示，讓我們第一時間發現代碼的問題。同時，還能在保存時，幫助我們自動修復一些問題。
Path Intellisense
Path Intellisense可以智能提示路徑，並幫我們自動補全路徑
Document This
可以幫我們快速生成代碼注釋，比如一些函數的注釋，能夠自動抽取出參數的定義。比如下面的函數，只需在上面輸入/**， 就會自動觸發 Document This插件，生成如下的注釋。
如果上述說的沒有記住，可以在項目的 .vscode 目錄下創建文件 extensions.json。然后給recommendations 提供一個想要分享給同伴的插件的 ID 數組，這樣當他們打開項目，並且沒有安裝某些插件時，VS Code就會提示安裝了，並且可以一鍵全部安裝。
.vscode/extensions.json 文件內是這樣的。
1 { 2 "recommendations": [ 3 '2gua.rainbow-brackets', 4 'oderwat.indent-rainbow', 5 'alefragnani.project-manager', 6 'wix.vscode-import-cost', 7 'jaspernorth.vscode-pigments', 8 'eamodio.gitlens', 9 'shan.code-settings-sync', 10 'shd101wyy.markdown-preview-enhanced', 11 'dbaeumer.vscode-eslint', 12 'christian-kohler.path-intellisense', 13 'joelday.docthis' 14 ] 15 }
可以直接復制上面的代碼到自己項目的.vscode/extensions.json 文件中，一鍵安裝本文介紹的所有插件。
上述的插件我是從https://mp.weixin.qq.com/s/Tz8pbQDEq24C06ApooW6xg摘錄過來的，為了記錄下，可以自己用