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

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

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

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

1. Project Manager

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

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

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

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

2. GitLens

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

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

可以查看某一行的改動(dòng)信息

Hover 上去還能查看具體信息

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

3. Tabout

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

4. Live Server

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

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

5. Code Spell Checker

在拼寫一些變量方法的時(shí)候，我們可以會(huì)拼錯(cuò)單詞，Code Spell Checker 可以幫助檢測你的錯(cuò)誤。

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

6. Image Preview

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

7. Import Cost

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

8. Parameter Hints

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

9. Highlight Matching Tag

Highlight Matching Tag 可以高亮你的 HTML、JSX 代碼配對(duì)符號(hào)。

10. indent-rainbow

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

11. Blockman

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

后記

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

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