Hello，大家好，我是 Sunday。

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

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

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

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

圖片

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

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

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

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

圖片

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

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

不夸張地說，裝了它之后，很多簡單邏輯幾乎可以做到 “腦子一動，代碼就到位了”。

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

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

圖片

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

比如：

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

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

04：Vue - Official（Vue 必備）

圖片

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

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

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

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

圖片

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

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

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

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

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

圖片

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

圖片

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

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

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

圖片

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

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

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

圖片

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

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

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

圖片

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

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

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

10：Codelf（變量起名神器）

圖片

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

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