Hello，大家好，我是 Sunday。

很多同學(xué)在使用 VSCode 進(jìn)行項(xiàng)目開(kāi)發(fā)時(shí)，會(huì)遇到兩個(gè)極端的情況：

• 沒(méi)有安裝任何插件，直接把 VSCode 當(dāng)成“記事本”再用；
• 安裝了一大堆的插件，卡的要死不說(shuō)，各種插件還會(huì)產(chǎn)生沖突。

所以，咱們今天就列舉出 10 個(gè)常用的提效插件，幫助你明確插件使用，再也不會(huì)為 VSCode 插件煩惱啦！

01：Material Icon Theme（圖標(biāo)美化）

圖片

這款插件的作用很簡(jiǎn)單粗暴：給你的項(xiàng)目文件夾和文件加上漂亮的圖標(biāo)。

不同類(lèi)型的文件，比如 .js、.vue、.ts、.json、圖片、字體文件等，都會(huì)有專(zhuān)屬的圖標(biāo)，一眼就能分辨出文件類(lèi)別。

如果你經(jīng)常要在項(xiàng)目里找文件，沒(méi)有統(tǒng)一好看的圖標(biāo)，真的是一件很痛苦的事。  安裝這個(gè)插件后，整個(gè)項(xiàng)目看起來(lái)既整潔又專(zhuān)業(yè)，找文件快了，心情也變好了。

02：Tabnine（AI 自動(dòng)代碼補(bǔ)全）

圖片

Tabnine 是一款基于 AI 的智能代碼補(bǔ)全神器。

不同于傳統(tǒng)的簡(jiǎn)單關(guān)鍵詞補(bǔ)全，它可以通過(guò)學(xué)習(xí)你的編程習(xí)慣，智能預(yù)測(cè)你接下來(lái)要寫(xiě)的代碼，大大提升敲代碼的速度。

不夸張地說(shuō)，裝了它之后，很多簡(jiǎn)單邏輯幾乎可以做到 “腦子一動(dòng)，代碼就到位了”。

特別是當(dāng)你寫(xiě)一些重復(fù)性的邏輯，或者需要大量調(diào)用已有接口的時(shí)候，Tabnine 真的能救命。

03：Prettier（代碼格式化工具）

圖片

Prettier 是一款超級(jí)受歡迎的代碼格式化插件。
不管你的項(xiàng)目有多復(fù)雜，有多少不同風(fēng)格的人在參與，只要統(tǒng)一用 Prettier，代碼風(fēng)格就能保持高度一致。

比如：

• 單雙引號(hào)問(wèn)題
• 縮進(jìn) 2 格還是 4 格
• 末尾要不要加分號(hào)
• 括號(hào)換行、對(duì)象換行

……全都交給它搞定！而且可以設(shè)置為保存時(shí)自動(dòng)格式化，再也不用手動(dòng)調(diào)格式了。

04：Vue - Official（Vue 必備）

圖片

如果你是做 Vue 項(xiàng)目的，這個(gè)官方插件必須裝上。

它不僅提供了基本的 .vue 文件的語(yǔ)法高亮，還能在寫(xiě)模板、腳本、樣式時(shí)提供智能提示、代碼補(bǔ)全、錯(cuò)誤校驗(yàn)等一系列服務(wù)。

最關(guān)鍵的是，它和 Vue 生態(tài)（比如 Vue Router、Vuex）都能很好配合，基本做到開(kāi)箱即用，讓你在寫(xiě) Vue 項(xiàng)目時(shí)如有神助。

05：ES7+ React/Redux/React-Native snippets（React 必備）

圖片

如果你寫(xiě) React 項(xiàng)目，不裝它真的血虧！

只要輸入一些小小的快捷命令，比如：

• rafce：創(chuàng)建一個(gè)箭頭函數(shù)組件（帶 export）
• rce：創(chuàng)建一個(gè) class 組件
• reduxslice：快速生成 Redux slice 模板

再也不用每次重復(fù)寫(xiě) import React from 'react' 開(kāi)頭語(yǔ)法了，一鍵生成，提高效率飛起。

06：open in browser / Live Server（運(yùn)行 HTML 到瀏覽器）

圖片

• Open in Browser：安裝后，右鍵 HTML 文件，可以直接選擇“在瀏覽器中打開(kāi)”，簡(jiǎn)單直白。

圖片

• Live Server：可以實(shí)時(shí)監(jiān)聽(tīng)文件變化，保存后瀏覽器自動(dòng)刷新，特別適合前端靜態(tài)頁(yè)面、小型項(xiàng)目開(kāi)發(fā)調(diào)試。

如果你經(jīng)常寫(xiě) HTML、小型 Web 應(yīng)用，這倆插件可以讓你省去打開(kāi)瀏覽器、刷新頁(yè)面的繁瑣步驟。

07：別名路徑跳轉(zhuǎn)（path-intellisense + jsconfig.json）

圖片

大型項(xiàng)目里，層級(jí)嵌套很深，像 ../../../components/Button.vue 這種路徑，又丑又容易出錯(cuò)。

通過(guò)在 jsconfig.json 或 tsconfig.json 中配置路徑別名，比如 @/components/Button.vue，再配合 path-intellisense 插件，跳轉(zhuǎn)、智能補(bǔ)全、定位，全都順滑無(wú)比。

08：Code Spell Checker（檢查和糾正代碼中拼寫(xiě)錯(cuò)誤）

圖片

這款插件雖然不起眼，但真的很有用。  它可以幫你實(shí)時(shí)檢查代碼中的英文單詞拼寫(xiě)，比如注釋、變量名、函數(shù)名等等。

有時(shí)候，一個(gè)簡(jiǎn)單的小單詞拼錯(cuò)了，被 Review 提出來(lái)，真的很尷尬。有了它，就像帶了一個(gè)安靜的英語(yǔ)老師在旁邊，隨時(shí)提醒你哪里拼寫(xiě)出錯(cuò)了。

09：A-super-translate（英語(yǔ)小白必備良藥）

圖片

英文文檔看不懂怎么辦？復(fù)制粘貼到翻譯軟件里再回來(lái)繼續(xù)寫(xiě)？太麻煩了！

裝了 A-super-translate，選中英文，快捷鍵一按，直接彈出中文翻譯，整個(gè)過(guò)程無(wú)感知，完全不會(huì)打斷你的思路。

支持自定義翻譯源（比如谷歌、DeepL、騰訊等），翻譯質(zhì)量很高。

10：Codelf（變量起名神器）

圖片

起變量名，起函數(shù)名，想破腦袋還是覺(jué)得丑？Codelf 可以幫你解決這個(gè)問(wèn)題。

你只需要輸入一個(gè)關(guān)鍵詞，比如 user，它就能基于 Github、Gitlab 等大平臺(tái)上開(kāi)源代碼中的實(shí)際用法，給你列出一大堆優(yōu)雅又真實(shí)的命名參考。