今天分享 6 個 Vue3 開發(fā)必備的 VSCode 插件，可以直接用過 VSCode 的插件中心直接安裝使用。

1. Volar

:fire: 下載數(shù) 153 萬+

相信使用 VSCode 開發(fā) Vue2 的同學(xué)一定對 Vetur 插件不會陌生，作為 Vue2 配套的 VSCode 插件，它的主要作用是對 Vue 單文件組件提供高亮、語法支持以及語法檢測。

而隨著 Vue3 正式版發(fā)布，Vue 團(tuán)隊官方推薦Volar 插件來代替 Vetur 插件，不僅支持 Vue3 語言高亮、語法檢測，還支持 TypeScript 和基于vue-tsc 的類型檢查功能。

使用時需要注意：

首先要禁用 Vetur 插件，避免沖突；

推薦使用css /less /scss 作為<style> 的語言，因?yàn)檫@些基于vscode-css-language 服務(wù)提供了可靠的語言支持；

如果使用postcss /stylus /sass 的話，需要安裝額外的語法高亮擴(kuò)展。postcss 使用language-postcss，stylus 使用language-stylus 拓展，sass 使用Sass 拓展；

Volar 不包含 ESLint 和 Prettier，而官方的ESLint 和Prettier 擴(kuò)展支持 Vue，所以需要自行安裝。

2.Vue VSCode Snippets

:fire: 下載數(shù) 152 萬+

Vue VSCode Snippets 插件旨在為開發(fā)者提供最簡單快速的生成 Vue 代碼片段的方法，通過各種快捷鍵就可以在 .vue 文件中快速生成各種代碼片段。簡直是 Vue3 開發(fā)必備神器。

該插件支持：Volar、Vue2 和 Vue3。

使用方式如下：

• 新建一個.vue 文件，輸入vbase 會提示生成的模版內(nèi)容：

• 輸入vfor 快速生成v-for 指令模版：

• 輸入v3onmounted 快速生成onMounted 生命周期函數(shù)：

其他就不再演示啦，功能實(shí)在太強(qiáng)大，常用快捷鍵非常多，具體可以查看文檔。

3. Auto Close Tag

:fire: 下載數(shù) 769 萬+

Auto Close Tag 插件是一個很好用的 VS Code 擴(kuò)展，它對生產(chǎn)率有很大影響。顧名思義，當(dāng)我們在結(jié)束標(biāo)記中鍵入結(jié)束括號時，它將添加結(jié)束標(biāo)記。它支持HTML，Handlebars，XML，PHP，Vue，JavaScript，Typescript，JSX等。

4. Vue Peek

:fire: 下載數(shù) 49 萬+

Vue Peek 插件用來拓展 Vue 代碼編輯的體驗(yàn)，可以讓我們快速跳轉(zhuǎn)到組件、模塊定義的文件。

使用方式如下：

• 右鍵組件標(biāo)簽，跳轉(zhuǎn)到組件定義的文件：

• 右鍵組件標(biāo)簽，彈窗顯示組件定義的文件：

5. Vue Theme

:fire: 下載數(shù) 34 萬+

Vue Theme 插件提供了不錯的 Vue 主題，還支持配置不同顏色，感覺還不錯。

6. Vite

:fire: 下載數(shù) 8.9 萬+

Vite 插件可以讓我們打開項目后，就能自動啟動開發(fā)服務(wù)器，允許開發(fā)者無需離開編輯器即可預(yù)覽和調(diào)試應(yīng)用。支持一鍵啟動、構(gòu)建和重啟項目。

總結(jié)

今天分享的 6 個插件，大家可以按需安裝使用。

我比較強(qiáng)烈推薦實(shí)用Volar 和Vue VSCode Snippets 這 2 個插件。