我的 VSCode 都安裝了什么插件？
Hello，大家好，我是 Sunday。
有很多同學(xué)問(wèn)我："Sunday 老師，你 VSCode 中都安裝了什么插件??？"
其實(shí)我安裝的插件并不多，我也看到過(guò)很多同學(xué)安裝了巨多的插件，非但不能加快開(kāi)發(fā)速度，反而導(dǎo)致各個(gè)插件之間產(chǎn)生沖突，從而出現(xiàn)很多奇怪的問(wèn)題。
因此，今天就把我使用的插件分享給大家，以幫助大家確定哪些插件是有用的！
先給大家上一個(gè)”全家?！暗膱D。
圖片
沒(méi)錯(cuò)！ 我一共就只安裝了這些插件，共計(jì) 12 個(gè)。
那么下面咱們分別來(lái)看看他們的作用吧！
別名路徑跳轉(zhuǎn)
圖片
這個(gè)名字還是很直白的 ??
顧名思義，他就是用來(lái)處理項(xiàng)目中別名路徑跳轉(zhuǎn)的庫(kù)。比如：@符號(hào)代表 src 在個(gè)別項(xiàng)目中跳轉(zhuǎn)不過(guò)去的時(shí)候，安裝了這個(gè)插件可以解決這個(gè)問(wèn)題
圖片
Live Server 和 open in browser
圖片
圖片
他們兩個(gè)都是 快速?gòu)臑g覽器訪問(wèn) html 的庫(kù)。不過(guò)區(qū)別是：
- Live Server 會(huì)啟動(dòng)一個(gè)本地服務(wù)，訪問(wèn)時(shí)會(huì)通過(guò) IP 地址 的形式進(jìn)行訪問(wèn)
- open in browser 不會(huì) 啟動(dòng)本地服務(wù)，訪問(wèn)時(shí)直接通過(guò) file 協(xié)議進(jìn)行訪問(wèn)
Code Spell Checker
圖片
這是一個(gè)專門做 代碼拼寫檢查 的庫(kù)。
很多同學(xué)在寫代碼的時(shí)候，會(huì)出現(xiàn)單詞拼寫的錯(cuò)誤，從而產(chǎn)生很多不必要的問(wèn)題。
那么有了這個(gè)庫(kù)就可以盡量減少這種錯(cuò)誤的出現(xiàn)啦
圖片
Dependency Cruiser Extension
圖片
這是一個(gè)項(xiàng)目的 依賴關(guān)系分析庫(kù)，可以根據(jù)你的項(xiàng)目生成對(duì)應(yīng)的依賴關(guān)系圖表
圖片
不過(guò)這個(gè)庫(kù)很多同學(xué)應(yīng)該是不適用的。
Material Icon Theme
圖片
這是一個(gè) 圖標(biāo) icon 庫(kù)，這是非常有用的。不光好看，還可以幫助我們解決一些文件名拼寫錯(cuò)誤的問(wèn)題。
拼寫正確展示圖標(biāo)
拼寫錯(cuò)誤圖標(biāo)消失
Prettier
圖片
老牌的格式化處理工具了。
安裝了這個(gè)插件之后，我們?cè)谂渲?.prettierrc 時(shí)就可以得到對(duì)應(yīng)的提示
圖片
Tailwind CSS IntelliSense
圖片
和上面的 prettier 類似，它是 Tailwind CSS 的輔助插件。
通過(guò)它可以得到 tailwind css 的書寫提示:
先敲空格，在輸入即可
ES7+ React/Redux/React-Native snippets
圖片
React 的必備插件了。這個(gè)就不多說(shuō)了。
Vue - Official
圖片
Volar 的替代品?，F(xiàn)在屬于 Vue 開(kāi)發(fā)的必備插件了！
env-cmd-file-syntax
圖片
在項(xiàng)目中，我們經(jīng)常會(huì)寫入很多 環(huán)境變量。這些文件多以 .env.xxxxx 的方式命名。
圖片
這樣格式的文件在寫入內(nèi)容時(shí)，是沒(méi)有代碼顏色劃分的，就會(huì)很不方便。
那么通過(guò)這個(gè)庫(kù)就可以讓你的代碼具有顏色劃分和提示。
圖片
Chinese (Simplified) (簡(jiǎn)體中文)
圖片
為 VSCode 提供中文語(yǔ)言包的庫(kù)，這個(gè)很多同學(xué)應(yīng)該是知道的，這里就不多說(shuō)了。
