VS Code 有一個(gè)很強(qiáng)大的功能就是支持插件擴(kuò)展,，讓你的編輯器仿佛擁有了三頭六臂，能極大提高工作效率,。

上圖中,，點(diǎn)擊紅框部分，即可在輸入框里,，查找你想要的插件名,，然后進(jìn)行安裝。

這里推薦一些實(shí)用的插件,，建議收藏備用,！

1、GitLens 【薦】

簡(jiǎn)直是 Git 神器,，碼農(nóng)必備,。GitLens 在 Git 管理上有很多強(qiáng)大的功能，比如：

• 將光標(biāo)放置在代碼的當(dāng)前行,，可以看到這樣代碼的提交者是誰,，以及提交時(shí)間。這一點(diǎn),，是 GitLens 最便捷的功能,。

• 查看某個(gè) commit 的代碼改動(dòng)記錄

• 查看不同的分支

• 可以將兩個(gè) commit 進(jìn)行代碼對(duì)比

• 甚至可以將兩個(gè) branch 分支進(jìn)行整體的代碼對(duì)比。這一點(diǎn),，簡(jiǎn)直是 GitLens 最強(qiáng)大的功能,。當(dāng)我們?cè)诓煌种?review 代碼的時(shí)候，就可以用到這一招,。

2,、Git History

有些同學(xué)習(xí)慣使用編輯器中的 Git 管理工具,，而不太喜歡要打開另外一個(gè) Git UI 工具的同學(xué)，這一款插件滿足你查詢所有 Git 記錄的需求,。

3、Live Server 【薦】

在本地啟動(dòng)一個(gè)服務(wù)器,，代碼寫完后可以實(shí)現(xiàn)「熱更新」,，實(shí)時(shí)地在網(wǎng)頁中看到運(yùn)行效果。就不需要每次都得手動(dòng)刷新頁面了,。

使用方式：安裝插件后,，開始寫代碼；代碼寫完后,，右鍵選擇「Open with Live Server」,。

4、Chinese (Simplified) Language Pack for Visual Studio Code

讓軟件顯示為簡(jiǎn)體中文語言,。

5,、Bracket Pair Colorizer 2：突出顯示成對(duì)的括號(hào)【薦】

Bracket Pair Colorizer 2插件：以不同顏色顯示成對(duì)的括號(hào)，并用連線標(biāo)注括號(hào)范圍,。簡(jiǎn)稱彩虹括號(hào),。

另外，還有個(gè)Rainbow Brackets插件,，也可以突出顯示成對(duì)的括號(hào),。

6、sftp：文件傳輸 【薦】

如果你需要將本地文件通過 ftp 的形式上傳到局域網(wǎng)的服務(wù)器,，可以安裝sftp這個(gè)插件,，很好用。在公司會(huì)經(jīng)常用到,。

7,、open in browser

安裝open in browser插件后，在 HTML 文件中「右鍵選擇 --> Open in Default Browser」,，即可在瀏覽器中預(yù)覽網(wǎng)頁,。

8、highlight-icemode：選中相同的代碼時(shí),，讓高亮顯示更加明顯【薦】

VSCode 自帶的高亮顯示,，實(shí)在是不夠顯眼。用插件支持一下吧,。

所用了這個(gè)插件之后,，VS Code 自帶的高亮就可以關(guān)掉了：

在用戶設(shè)置里添加"editor.selectionHighlight": false即可。

9,、vscode-icons

vscode-icons 會(huì)根據(jù)文件的后綴名來顯示不同的圖標(biāo),，讓你更直觀地知道每種文件是什么類型的,。

10、Project Manager

工作中,，我們經(jīng)常會(huì)來回切換多個(gè)項(xiàng)目,，每次都要找到對(duì)應(yīng)項(xiàng)目的目錄再打開，比較麻煩,。Project Manager 插件可以解決這樣的煩惱,，它提供了專門的視圖來展示你的項(xiàng)目，我們可以把常用的項(xiàng)目保存在這里,，需要時(shí)一鍵切換,，十分方便。

11,、TODO Highlight

寫代碼過程中,，突然發(fā)現(xiàn)一個(gè) Bug，但是又不想停下來手中的活,，以免打斷思路,，怎么辦？按照代碼規(guī)范,，我們一般是在代碼中加個(gè) TODO 注釋,。比如：（注意，一定要寫成大寫TODO,，而不是小寫的todo）

//TODO:這里有個(gè)bug,，我一會(huì)兒再收拾你

或者：

//FIXME:我也不知道為啥， but it works only that way.

安裝了插件 TODO Highlight之后,，按住「Cmd + Shift + P」打開命令面板,，輸入「Todohighlist」，選擇相關(guān)的命令,，我們就可以看到一個(gè) todoList 的清單,。

12、Markdown Preview Github Styling 【薦】

以 GitHub 風(fēng)格預(yù)覽 Markdown 樣式,，十分簡(jiǎn)潔優(yōu)雅,。就像下面這樣，左側(cè)書寫 Markdown 文本,，右側(cè)預(yù)覽 Markdown 的渲染效果：

13,、Markdown Preview Enhanced

預(yù)覽 Markdown 樣式。

Markdown All in One

這個(gè)插件將幫助你更高效地在 Markdown 中編寫文檔,。

14,、Vetur

Vue 多功能集成插件，包括：語法高亮，智能提示,，emmet,，錯(cuò)誤提示，格式化,，自動(dòng)補(bǔ)全,，debugger。VS Code 官方欽定 Vue 插件,，Vue 開發(fā)者必備,。

15、ES7 React/Redux/GraphQL/React-Native snippets

React/Redux/react-router 的語法智能提示,。

16、minapp：小程序支持

小程序開發(fā)必備插件,。

17,、Prettier：代碼格式化

Prettier 是一個(gè)代碼格式化工具，只關(guān)注格式化,，但不具備校驗(yàn)功能,。在一個(gè)多人協(xié)同開發(fā)的團(tuán)隊(duì)中，統(tǒng)一的代碼編寫規(guī)范非常重要,。一套規(guī)范可以讓我們編寫的代碼達(dá)到一致的風(fēng)格,，提高代碼的可讀性和統(tǒng)一性。自然維護(hù)性也會(huì)有所提高,。

18,、ESLint：代碼格式校驗(yàn)

日常開發(fā)中，建議用可以用 Prettier 做代碼格式化,，然后用 eslint 做校驗(yàn),。

19、Beautify

代碼格式化工具,。

備注：相比之下,，Prettier 是當(dāng)前最流行的代碼格式化工具，比 Beautify 用得更多,。

20,、JavaScript(ES6) code snippets

ES6 語法智能提示，支持快速輸入,。

21,、Search node_modules 【薦】

node_modules模塊里面的文件夾和模塊實(shí)在是太多了，根本不好找,。好在安裝 Search node_modules 這個(gè)插件后,，輸入快捷鍵「Cmd + Shift + P」，然后輸入 node_modules,，在彈出的選項(xiàng)中選擇 Search node_modules,，即可搜索 node_modules 里的模塊,。

22、indent-rainbow：突出顯示代碼縮進(jìn)

indent-rainbow插件：突出顯示代碼縮進(jìn),。

安裝完成后,，效果如下圖所示：

23、Code Spell Checker：?jiǎn)卧~拼寫錯(cuò)誤檢查

這個(gè)拼寫檢查程序的目標(biāo)是幫助捕獲常見的單詞拼寫錯(cuò)誤,，可以檢測(cè)駝峰命名,。從此告別 Chinglish.

24、Local History 【薦】

維護(hù)文件的本地歷史記錄,，強(qiáng)烈建議安裝,。代碼意外丟失時(shí)，有時(shí)可以救命,。

25,、Polacode-2020：生成代碼截圖 【薦】

可以把代碼片段保存成美觀的圖片，主題不同,，代碼的配色方案也不同,，也也可以自定義設(shè)置圖片的邊框顏色、大小,、陰影,。

尤其是在我們做 PPT 分享時(shí)需要用到代碼片段時(shí)，或者需要在網(wǎng)絡(luò)上優(yōu)雅地分享代碼片段時(shí),，這一招很有用,。

生成的效果如下：

其他同類插件：CodeSnap。我們也可以通過 https://carbon./這個(gè)網(wǎng)站生成代碼圖片

26,、Image Preview 【薦】

圖片預(yù)覽,。鼠標(biāo)移動(dòng)到圖片 url 上的時(shí)候，會(huì)自動(dòng)顯示圖片的預(yù)覽和圖片尺寸,。

27,、Auto Close Tag、Auto Rename Tag

自動(dòng)閉合標(biāo)簽,、自動(dòng)對(duì)標(biāo)簽重命名,。

28、Better Comments

為注釋添加更醒目,、帶分類的色彩,。

29、CSS Peek

增強(qiáng) HTML 和 CSS 之間的關(guān)聯(lián),，快速查看該元素上的 CSS 樣式,。

30、Vue CSS Peek

CSS Peek 對(duì) Vue 沒有支持，該插件提供了對(duì) Vue 文件的支持,。

31,、Color Info

這個(gè)便捷的插件，將為你提供你在 CSS 中使用顏色的相關(guān)信息,。你只需在顏色上懸停光標(biāo),，就可以預(yù)覽色塊中色彩模型的（HEX、 RGB,、HSL 和 CMYK）相關(guān)信息了,。

32、Import Cost

在項(xiàng)目開發(fā)過程中,，我們會(huì)引入很多 npm 包,，有時(shí)候可能只用到了某個(gè)包里的一個(gè)方法，卻引入了整個(gè)包,，導(dǎo)致代碼體積增大很多,。Import Cost插件可以在代碼中友好的提示我們，當(dāng)前引入的包會(huì)增加多少體積,，這很有助于幫我們優(yōu)化代碼的體積。

33,、Paste JSON as Code

此插件可以將剪貼板中的 JSON 字符串轉(zhuǎn)換成工作代碼,。支持多種語言。