Vue3開發(fā)必備的六個VSCode插件推薦
今天分享 6 個 Vue3 開發(fā)必備的 VSCode 插件，可以直接用過 VSCode 的插件中心直接安裝使用。
1. Volar
?? 下載數(shù) 153 萬+
相信使用 VSCode 開發(fā) Vue2 的同學(xué)一定對 Vetur 插件不會陌生，作為 Vue2 配套的 VSCode 插件，它的主要作用是對 Vue 單文件組件提供高亮、語法支持以及語法檢測。
而隨著 Vue3 正式版發(fā)布，Vue 團隊官方推薦 Volar 插件來代替 Vetur 插件，不僅支持 Vue3 語言高亮、語法檢測，還支持 TypeScript 和基于 vue-tsc 的類型檢查功能。
使用時需要注意：
首先要禁用 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。
使用方式如下：
新建一個 .vue文件，輸入 vbase會提示生成的模版內(nèi)容：
輸入 vfor快速生成 v-for指令模版：
輸入 v3onmounted快速生成 onMounted生命周期函數(shù)：
其他就不再演示啦，功能實在太強大，常用快捷鍵非常多，具體可以查看文檔。
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等。
4. Vue Peek
?? 下載數(shù) 49 萬+
Vue Peek 插件用來拓展 Vue 代碼編輯的體驗，可以讓我們快速跳轉(zhuǎn)到組件、模塊定義的文件。
使用方式如下：
右鍵組件標(biāo)簽，跳轉(zhuǎn)到組件定義的文件：
右鍵組件標(biāo)簽，彈窗顯示組件定義的文件：
5. Vue Theme
?? 下載數(shù) 34 萬+
Vue Theme 插件提供了不錯的 Vue 主題，還支持配置不同顏色，感覺還不錯。
6. Vite
?? 下載數(shù) 8.9 萬+
Vite 插件可以讓我們打開項目后，就能自動啟動開發(fā)服務(wù)器，允許開發(fā)者無需離開編輯器即可預(yù)覽和調(diào)試應(yīng)用。支持一鍵啟動、構(gòu)建和重啟項目。
總結(jié)
今天分享的 6 個插件，大家可以按需安裝使用。
我比較強烈推薦實用 Volar 和 Vue VSCode Snippets 這 2 個插件。
到此這篇關(guān)于Vue3開發(fā)必備的六個VSCode插件推薦的文章就介紹到這了,更多相關(guān)Vue3必備VSCode插件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue3項目中配置TypeScript和JavaScript的兼容
在Vue3開發(fā)中,常見的使用JavaScript（JS）編寫代碼,但也會有調(diào)整編寫語言使用TypeScript（TS）的需求,因此,在Vue3項目設(shè)置中兼容TS和JS是刻不容緩的重要任務(wù),2023-08-08
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)滑動解鎖功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
我們有時候會遇到要輸入框自動獲取焦點的情況,下面這篇文章主要給大家介紹了關(guān)于Vue?Input輸入框自動獲得焦點的簡單方法,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
這篇文章主要介紹了vue彈窗插件實戰(zhàn)代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了VUE如何將方法名字作為變量進行調(diào)用問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
Avue和Element-UI動態(tài)三級表頭的實現(xiàn)
本文主要介紹了Avue和Element-UI動態(tài)三級表頭的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
本篇文章主要介紹了新手vue構(gòu)建單頁面應(yīng)用實例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
vue3 新增的 Composition API中的 watchEffect 和 watch都可在 setup() 函數(shù)中使用，本文重點介紹vue3中watch與watchEffect的區(qū)別，感興趣的朋友一起看看吧2023-02-02
這篇文章主要介紹了Vue3計算屬性是如何實現(xiàn)的，對于任何包含響應(yīng)式數(shù)據(jù)的復(fù)雜邏輯，我們都應(yīng)該使用計算屬性，更多相關(guān)內(nèi)容需要的小伙伴可以參考一下2022-08-08
使用vis-timeline繪制甘特圖并實現(xiàn)時間軸的中文化(案例代碼)
這篇文章主要介紹了使用vis-timeline繪制甘特圖并實現(xiàn)時間軸的中文化(案例代碼),本文結(jié)合實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-02-02