php入門到就業(yè)線上直播課：進入學(xué)習(xí)
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API調(diào)試工具：點擊使用

VSCode 輕量、開源，新鮮下載的 VSCode 可謂是身無長物、一窮二白，連個項目管理的功能都沒有。

身輕如燕的 VSCode 對于后端開發(fā)說可能有點幼稚，但對于前端來說剛剛好，畢竟不需要搞什么 Docker、數(shù)據(jù)庫等等，裝倆 VSCode 插件，打開網(wǎng)頁，就能開工了。

這篇文章將從前端開發(fā)者的角度來介紹一些裸 VSCode 必備插件，打造一個前端友好的開發(fā) IDE。【推薦學(xué)習(xí)：vscode教程、編程視頻】

1. Project Manager

Project Manager 用于管理項目，有了它，可以幫你在 VSCode 中快速地在各個項目中切換，不需要痛苦地從文件目錄中一級一級最終選到你想要的項目文件。

只需要在 Palette 輸入 Save Project，回車保存當(dāng)前項目。

然后可以在右側(cè)菜單查看你添加的項目，點擊指點項目就能切換到該項目，非常方便。

它還提供了 Tag 標(biāo)簽，可以細(xì)分你的項目。

2. GitLens

GitLens 從名字就能知道它是干嘛的，VSCode 內(nèi)置 Git 幫助加上這個插件交互體驗是優(yōu)于 Webstorm 的。

它可以方便地查看代碼修改信息。

可以查看某一行的改動信息

Hover 上去還能查看具體信息

GitLens 的介紹頁有萬字多，可見功能之齊全，這里就不啰嗦了。

3. Tabout

VSCode 的 Tab 鍵默認(rèn)輸出 t，對于習(xí)慣用過 WebStorm、Eclipse 的人來說非常不舒服，想要在括號處用 Tab 跳出，就可以利用到這個 TabOut。

4. Live Server

Live Server 也算是有口皆碑，它可以實時去熱加載并更新代碼。

實際上是起了一個 Websocket 來實現(xiàn)代碼更新的，Live Server 在編寫一些測試 HTML 頁面確實好用。

5. Code Spell Checker

在拼寫一些變量方法的時候，我們可以會拼錯單詞，Code Spell Checker 可以幫助檢測你的錯誤。

當(dāng)檢測出錯誤單詞，你還可以看看它給你的一些單詞建議：

6. Image Preview

當(dāng)項目中引入多個圖片 URL 的時候，想要預(yù)覽每張圖片是一張痛苦的事情，Image preview 解決了這樣的事情。

7. Import Cost

在前端項目中，我們經(jīng)常需要導(dǎo)入各類的依賴包，通過 Import Cost 可以查看導(dǎo)入包的大小，便于優(yōu)化。

8. Parameter Hints

Parameter Hints 會展示函數(shù)的參數(shù)名稱。

9. Highlight Matching Tag

Highlight Matching Tag 可以高亮你的 HTML、JSX 代碼配對符號。

10. indent-rainbow

Indent-rainbow 把代碼縮進也可以變成好看的彩虹 ?。

11. Blockman

Blockman 可以會高亮框出你當(dāng)前所處的代碼編輯塊。

后記

對于 VSCode 來說，插件數(shù)量多入牛毛，對于常見開發(fā)場景來說，有很多對應(yīng)的處理插件，需要用到就在 Marketplace 搜索一下即可，比如 React 項目：

值得注意的是，裝過多的插件并不見得是一件好事，VSCode 的插件機制也是事件驅(qū)動的，過多的插件帶來的弊端一方面是插件功能沖突，另一方面是性能消耗，也就是讓 VSCode 變得卡頓。