今天分享 6 個 Vue3 開發(fā)必備的 VSCode 插件衷旅，可以直接用過 VSCode 的插件中心直接安裝使用。
如果有覺得有幫助纵朋，還請點贊??支持一下~
1. Volar
?? 下載數(shù) 153 萬+
相信使用 VSCode 開發(fā) Vue2 的同學(xué)一定對 Vetur 插件不會陌生柿顶，作為 Vue2 配套的 VSCode 插件，它的主要作用是對 Vue 單文件組件提供高亮操软、語法支持以及語法檢測嘁锯。
而隨著 Vue3 正式版發(fā)布，Vue 團(tuán)隊官方推薦 Volar 插件來代替 Vetur 插件聂薪，不僅支持 Vue3 語言高亮家乘、語法檢測，還支持 TypeScript 和基于 vue-tsc 的類型檢查功能藏澳。
[圖片上傳失敗...(image-f8310-1660048745315)]
使用時需要注意：
- 首先要禁用 Vetur 插件仁锯，避免沖突；
- 推薦使用
css/less/scss作為<style>的語言翔悠，因為這些基于 vscode-css-language 服務(wù)提供了可靠的語言支持业崖； - 如果使用
postcss/stylus/sass的話，需要安裝額外的語法高亮擴展蓄愁。postcss 使用 language-postcss双炕，stylus 使用 language-stylus 拓展，sass 使用 Sass 拓展涝登； - Volar 不包含 ESLint 和 Prettier雄家，而官方的 ESLint 和 Prettier 擴展支持 Vue，所以需要自行安裝胀滚。
2. Vue VSCode Snippets
?? 下載數(shù) 152 萬+
Vue VSCode Snippets 插件旨在為開發(fā)者提供最簡單快速的生成 Vue 代碼片段的方法趟济，通過各種快捷鍵就可以在 .vue文件中快速生成各種代碼片段。簡直是 Vue3 開發(fā)必備神器咽笼。
該插件支持：Volar顷编、Vue2 和 Vue3。
[圖片上傳失敗...(image-9cf8af-1660048745315)]
使用方式如下：
- 新建一個
.vue文件剑刑，輸入vbase會提示生成的模版內(nèi)容：
[圖片上傳失敗...(image-4c5503-1660048745316)]
- 輸入
vfor快速生成v-for指令模版：
[圖片上傳失敗...(image-fbe06e-1660048745316)]
- 輸入
v3onmounted快速生成onMounted生命周期函數(shù)：
[圖片上傳失敗...(image-3546e7-1660048745316)]
其他就不再演示啦媳纬，功能實在太強大，常用快捷鍵非常多施掏，具體可以查看文檔钮惠。
3. Auto Close Tag
?? 下載數(shù) 769 萬+
Auto Close Tag 插件是一個很好用的 VS Code 擴展，它對生產(chǎn)率有很大影響七芭。顧名思義素挽，當(dāng)我們在結(jié)束標(biāo)記中鍵入結(jié)束括號時，它將添加結(jié)束標(biāo)記狸驳。它支持HTML预明，Handlebars缩赛，XML，PHP撰糠，Vue酥馍，JavaScript，Typescript阅酪，JSX等旨袒。
[圖片上傳失敗...(image-e9288a-1660048745316)]
4. Vue Peek
?? 下載數(shù) 49 萬+
Vue Peek 插件用來拓展 Vue 代碼編輯的體驗，可以讓我們快速跳轉(zhuǎn)到組件遮斥、模塊定義的文件峦失。
[圖片上傳失敗...(image-88d8b6-1660048745316)]
使用方式如下：
- 右鍵組件標(biāo)簽，跳轉(zhuǎn)到組件定義的文件：
[圖片上傳失敗...(image-4b3984-1660048745316)]
- 右鍵組件標(biāo)簽术吗，彈窗顯示組件定義的文件：
[圖片上傳失敗...(image-194199-1660048745316)]
5. Vue Theme
?? 下載數(shù) 34 萬+
Vue Theme 插件提供了不錯的 Vue 主題，還支持配置不同顏色帆精，感覺還不錯较屿。
[圖片上傳失敗...(image-9674f3-1660048745316)]
6. Vite
?? 下載數(shù) 8.9 萬+
Vite 插件可以讓我們打開項目后，就能自動啟動開發(fā)服務(wù)器卓练，允許開發(fā)者無需離開編輯器即可預(yù)覽和調(diào)試應(yīng)用隘蝎。支持一鍵啟動、構(gòu)建和重啟項目襟企。
[圖片上傳失敗...(image-c04d1e-1660048745316)]
總結(jié)
今天分享的 6 個插件嘱么，大家可以按需安裝使用。
我比較強烈推薦實用 Volar 和 Vue VSCode Snippets 這 2 個插件顽悼。
如果覺得不錯曼振，還請點贊支持。??
大家有更好的插件蔚龙，歡迎評論分享~??
歡迎關(guān)注我的微信公眾號“前端自習(xí)課”冰评。
