Hello，大家好，我是 Sunday。

有很多同學問我："Sunday 老師，你 VSCode 中都安裝了什么插件啊？"

其實我安裝的插件并不多，我也看到過很多同學安裝了巨多的插件，非但不能加快開發速度，反而導致各個插件之間產生沖突，從而出現很多奇怪的問題。

因此，今天就把我使用的插件分享給大家，以幫助大家確定哪些插件是有用的！

先給大家上一個”全家福“的圖

沒錯！ 我一共就只安裝了這些插件，共計 12 個。

那么下面咱們分別來看看他們的作用吧！

別名路徑跳轉

圖片

這個名字還是很直白的 。

顧名思義，他就是用來處理項目中別名路徑跳轉的庫。比如：@符號代表 src 在個別項目中跳轉不過去的時候，安裝了這個插件可以解決這個問題

圖片

Live Server 和 open in browser

圖片

他們兩個都是 快速從瀏覽器訪問 html 的庫。不過區別是：

1. Live Server 會啟動一個本地服務，訪問時會通過 IP 地址 的形式進行訪問
2. open in browser 不會 啟動本地服務，訪問時直接通過 file 協議進行訪問

Code Spell Checker

圖片

這是一個專門做 代碼拼寫檢查 的庫。

很多同學在寫代碼的時候，會出現單詞拼寫的錯誤，從而產生很多不必要的問題。

那么有了這個庫就可以盡量減少這種錯誤的出現啦

圖片

Dependency Cruiser Extension

圖片

這是一個項目的 依賴關系分析庫，可以根據你的項目生成對應的依賴關系圖表

圖片

不過這個庫很多同學應該是 不適用 的

Material Icon Theme

圖片

這是一個 圖標 icon 庫，這是非常有用的。不光好看，還可以幫助我們解決一些文件名拼寫錯誤的問題。

拼寫正確展示圖標

拼寫錯誤圖標消失

Prettier

圖片

老牌的格式化處理工具了。

安裝了這個插件之后，我們在配置 .prettierrc 時就可以得到對應的提示

圖片

Tailwind CSS IntelliSense

圖片

和上面的 prettier 類似，它是 Tailwind CSS 的輔助插件。

通過它可以得到 tailwind css 的書寫提示:

圖片

先敲空格，在輸入即可

ES7+ React/Redux/React-Native snippets

圖片

React 的必備插件了。這個就不多說了。

Vue - Official

圖片

Volar 的替代品。現在屬于 Vue 開發的必備插件了！

env-cmd-file-syntax

圖片

在項目中，我們經常會寫入很多 環境變量。這些文件多以 .env.xxxxx 的方式命名。

圖片

這樣格式的文件在寫入內容時，是沒有代碼顏色劃分的，就會很不方便。

那么通過這個庫就可以讓你的代碼具有顏色劃分和提示。

圖片

Chinese (Simplified) (簡體中文)

圖片

為 VSCode 提供中文語言包的庫，這個很多同學應該是知道的，這里就不多說了