快捷導(dǎo)航

Vue3開發(fā)必備的六個(gè)VSCode插件推薦

更新時(shí)間：2022年12月13日 10:51:25 作者：hebiwen95

在VSCode中添加好用的插件可以提高我們的開發(fā)效率,這些可以幫助我們格式化,擴(kuò)充性,執(zhí)行最佳實(shí)踐的代碼方式,自動(dòng)完成一些瑣碎的事情,下面這篇文章主要給大家推薦介紹了關(guān)于Vue3開發(fā)必備的六個(gè)VSCode插件,需要的朋友可以參考下

1. Volar

?? 下載數(shù) 153 萬+

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

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

使用時(shí)需要注意：

首先要禁用 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

?? 下載數(shù) 152 萬+

Vue VSCode Snippets 插件旨在為開發(fā)者提供最簡單快速的生成 Vue 代碼片段的方法，通過各種快捷鍵就可以在 .vue文件中快速生成各種代碼片段。簡直是 Vue3 開發(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 萬+

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等。