【推薦】1408- 分享 6 個(gè) Vue3 開(kāi)發(fā)必備的 VSCode 插件
今天分享 6 個(gè) Vue3 開(kāi)發(fā)必備的 VSCode 插件，可以直接用過(guò) VSCode 的插件中心直接安裝使用。
如果有覺(jué)得有幫助，還請(qǐng)點(diǎn)贊??支持一下~
1. Volar
?? 下載數(shù) 153 萬(wàn)+
相信使用 VSCode 開(kāi)發(fā) Vue2 的同學(xué)一定對(duì) Vetur 插件不會(huì)陌生，作為 Vue2 配套的 VSCode 插件，它的主要作用是對(duì) Vue 單文件組件提供高亮、語(yǔ)法支持以及語(yǔ)法檢測(cè)。
而隨著 Vue3 正式版發(fā)布，Vue 團(tuán)隊(duì)官方推薦 Volar 插件來(lái)代替 Vetur 插件，不僅支持 Vue3 語(yǔ)言高亮、語(yǔ)法檢測(cè)，還支持 TypeScript 和基于 vue-tsc 的類(lèi)型檢查功能。
使用時(shí)需要注意：
首先要禁用 Vetur 插件，避免沖突； 推薦使用 css/less/scss作為<style>的語(yǔ)言，因?yàn)檫@些基于 vscode-css-language 服務(wù)提供了可靠的語(yǔ)言支持；如果使用 postcss/stylus/sass的話(huà)，需要安裝額外的語(yǔ)法高亮擴(kuò)展。postcss 使用 language-postcss，stylus 使用 language-stylus 拓展，sass 使用 Sass 拓展；Volar 不包含 ESLint 和 Prettier，而官方的 ESLint 和 Prettier 擴(kuò)展支持 Vue，所以需要自行安裝。
2. Vue VSCode Snippets
?? 下載數(shù) 152 萬(wàn)+
Vue VSCode Snippets 插件旨在為開(kāi)發(fā)者提供最簡(jiǎn)單快速的生成 Vue 代碼片段的方法，通過(guò)各種快捷鍵就可以在 .vue文件中快速生成各種代碼片段。簡(jiǎn)直是 Vue3 開(kāi)發(fā)必備神器。
該插件支持：Volar、Vue2 和 Vue3。
使用方式如下：
新建一個(gè) .vue文件，輸入vbase會(huì)提示生成的模版內(nèi)容：
輸入 vfor快速生成v-for指令模版：
輸入 v3onmounted快速生成onMounted生命周期函數(shù)：
其他就不再演示啦，功能實(shí)在太強(qiáng)大，常用快捷鍵非常多，具體可以查看文檔。
3. Auto Close Tag
?? 下載數(shù) 769 萬(wàn)+
Auto Close Tag 插件是一個(gè)很好用的 VS Code 擴(kuò)展，它對(duì)生產(chǎn)率有很大影響。顧名思義，當(dāng)我們?cè)诮Y(jié)束標(biāo)記中鍵入結(jié)束括號(hào)時(shí)，它將添加結(jié)束標(biāo)記。它支持HTML，Handlebars，XML，PHP，Vue，JavaScript，Typescript，JSX等。
4. Vue Peek
?? 下載數(shù) 49 萬(wàn)+
Vue Peek 插件用來(lái)拓展 Vue 代碼編輯的體驗(yàn)，可以讓我們快速跳轉(zhuǎn)到組件、模塊定義的文件。
使用方式如下：
右鍵組件標(biāo)簽，跳轉(zhuǎn)到組件定義的文件：
右鍵組件標(biāo)簽，彈窗顯示組件定義的文件：
5. Vue Theme
?? 下載數(shù) 34 萬(wàn)+
Vue Theme 插件提供了不錯(cuò)的 Vue 主題，還支持配置不同顏色，感覺(jué)還不錯(cuò)。
6. Vite
?? 下載數(shù) 8.9 萬(wàn)+
Vite 插件可以讓我們打開(kāi)項(xiàng)目后，就能自動(dòng)啟動(dòng)開(kāi)發(fā)服務(wù)器，允許開(kāi)發(fā)者無(wú)需離開(kāi)編輯器即可預(yù)覽和調(diào)試應(yīng)用。支持一鍵啟動(dòng)、構(gòu)建和重啟項(xiàng)目。
總結(jié)
今天分享的 6 個(gè)插件，大家可以按需安裝使用。
我比較強(qiáng)烈推薦實(shí)用 Volar 和 Vue VSCode Snippets 這 2 個(gè)插件。如果覺(jué)得不錯(cuò)，還請(qǐng)點(diǎn)贊支持。??
大家有更好的插件，歡迎評(píng)論分享~??
