VSCode 輕量、開源，新鮮下載的 vscode 可謂是身無長物、一窮二白，連個項目管理的功能都沒有。
身輕如燕的 VSCode 對于后端開發說可能有點幼稚，但對于前端來說剛剛好，畢竟不需要搞什么 Docker、數據庫等等，裝倆 VSCode 插件，打開網頁，就能開工了。
這篇文章將從前端開發者的角度來介紹一些裸 VSCode 必備插件，打造一個前端友好的開發 IDE。【推薦學習：VSCode、VSCode】
1. Project Manager
VSCode 用于管理項目，有了它，可以幫你在 VSCode 中快速地在各個項目中切換，不需要痛苦地從文件目錄中一級一級最終選到你想要的項目文件。
立即學習“前端免費學習筆記（深入）”；
只需要在 Palette 輸入 Save Project，回車保存當前項目。
然后可以在右側菜單查看你添加的項目，點擊指點項目就能切換到該項目，非常方便。
它還提供了 Tag 標簽，可以細分你的項目。
2. GitLens
VSCode 從名字就能知道它是干嘛的，VSCode 內置 Git 幫助加上這個插件交互體驗是優于 Webstorm 的。
它可以方便地查看代碼修改信息。
可以查看某一行的改動信息
Hover 上去還能查看具體信息
GitLens 的介紹頁有萬字多，可見功能之齊全，這里就不啰嗦了。
3. Tabout
VSCode 的 Tab 鍵默認輸出 t，對于習慣用過 WebStorm、Eclipse 的人來說非常不舒服，想要在括號處用 Tab 跳出，就可以利用到這個 VSCode。
4. Live Server
VSCode 也算是有口皆碑，它可以實時去熱加載并更新代碼。
實際上是起了一個 Websocket 來實現代碼更新的，Live Server 在編寫一些測試 HTML 頁面確實好用。
5. Code Spell Checker
在拼寫一些變量方法的時候，我們可以會拼錯單詞，VSCode 可以幫助檢測你的錯誤。
當檢測出錯誤單詞，你還可以看看它給你的一些單詞建議：
6. Image Preview
當項目中引入多個圖片 URL 的時候，想要預覽每張圖片是一張痛苦的事情，VSCode 解決了這樣的事情。
7. Import Cost
在前端項目中，我們經常需要導入各類的依賴包，通過 VSCode 可以查看導入包的大小，便于優化。
8. Parameter Hints
VSCode 會展示函數的參數名稱。
9. Highlight Matching Tag
VSCode 可以高亮你的 HTML、JSX 代碼配對符號。
10. indent-rainbow
VSCode 把代碼縮進也可以變成好看的彩虹 ?。
11. Blockman
VSCode 可以會高亮框出你當前所處的代碼編輯塊。
后記
對于 VSCode 來說，插件數量多入牛毛，對于常見開發場景來說，有很多對應的處理插件，需要用到就在 Marketplace 搜索一下即可，比如 React 項目：
值得注意的是，裝過多的插件并不見得是一件好事，VSCode 的插件機制也是事件驅動的，過多的插件帶來的弊端一方面是插件功能沖突，另一方面是性能消耗，也就是讓 VSCode 變得卡頓。
更多關于VSCode的相關知識，請訪問：VSCode！
