明天分享 6 个 Vue3 开发必备的 VSCode 插件，能够间接用过 VSCode 的插件核心间接装置应用。

如果有感觉有帮忙，还请点赞反对一下~

1. Volar

下载数 153 万+

置信应用 VSCode 开发 Vue2 的同学肯定对 Vetur 插件不会生疏，作为 Vue2 配套的 VSCode 插件，它的次要作用是对 Vue 单文件组件提供高亮、语法反对以及语法检测。

而随着 Vue3 正式版公布，Vue 团队官网举荐 Volar 插件来代替 Vetur 插件，不仅反对 Vue3 语言高亮、语法检测，还反对 TypeScript 和基于 vue-tsc 的类型查看性能。

应用时须要留神：

  1. 首先要禁用 Vetur 插件，防止抵触；
  2. 举荐应用 css/less/scss 作为 <style>的语言，因为这些基于 vscode-css-language 服务提供了牢靠的语言反对；
  3. 如果应用 postcss/stylus/sass 的话，须要装置额定的语法高亮扩大。postcss 应用 language-postcss，stylus 应用 language-stylus 拓展，sass 应用 Sass 拓展；
  4. Volar 不蕴含 ESLint 和 Prettier，而官网的 ESLint 和 Prettier 扩大反对 Vue，所以须要自行装置。

2. Vue VSCode Snippets

下载数 152 万+

Vue VSCode Snippets 插件旨在为开发者提供最简略疾速的生成 Vue 代码片段的办法，通过各种快捷键就能够在 .vue文件中疾速生成各种代码片段。几乎是 Vue3 开发必备神器。

该插件反对：Volar、Vue2 和 Vue3。

应用形式如下：

  • 新建一个 .vue文件，输出 vbase会提醒生成的模版内容：

  • 输出 vfor疾速生成 v-for指令模版：

  • 输出 v3onmounted疾速生成 onMounted生命周期函数：

其余就不再演示啦，性能切实太强大，罕用快捷键十分多，具体能够查看文档。

3. Auto Close Tag

下载数 769 万+

Auto Close Tag 插件是一个很好用的 VS Code 扩大，它对生产率有很大影响。顾名思义，当咱们在完结标记中键入完结括号时，它将增加完结标记。它反对HTML，Handlebars，XML，PHP，Vue，JavaScript，Typescript，JSX等。

4. Vue Peek

下载数 49 万+

Vue Peek 插件用来拓展 Vue 代码编辑的体验，能够让咱们疾速跳转到组件、模块定义的文件。

应用形式如下：

  • 右键组件标签，跳转到组件定义的文件：

  • 右键组件标签，弹窗显示组件定义的文件：

5. Vue Theme

下载数 34 万+

Vue Theme 插件提供了不错的 Vue 主题，还反对配置不同色彩，感觉还不错。

6. Vite

下载数 8.9 万+

Vite 插件能够让咱们关上我的项目后，就能主动启动开发服务器，容许开发者无需来到编辑器即可预览和调试利用。反对一键启动、构建和重启我的项目。

总结

明天分享的 6 个插件，大家能够按需装置应用。

我比拟强烈推荐实用 Volar 和 Vue VSCode Snippets 这 2 个插件。
如果感觉不错，还请点赞反对。

大家有更好的插件，欢送评论分享~

欢送关注我的微信公众号“前端自习课”。