分享 6 个 Vue3 开发必备的 VSCode 插件

今天分享 6 个 Vue3 开发必备的 VSCode 插件，可以直接用过 VSCode 的插件中心直接安装使用。

如果有觉得有帮助，还请点赞👍支持一下~

1. Volar

🔥 下载数 153 万 +

相信使用 VSCode 开发 Vue2 的同学一定对 Vetur 插件不会陌生，作为 Vue2 配套的 VSCode 插件，它的主要作用是对 Vue 单文件组件提供高亮、语法支持以及语法检测。

而随着 Vue3 正式版发布，Vue 团队官方推荐 Volar 插件来代替 Vetur 插件，不仅支持 Vue3 语言高亮、语法检测，还支持 TypeScript 和基于 vue-tsc 的类型检查功能。

使用时需要注意：

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

推荐使用 css/less/scss 作为 <style></code>的语言，因为这些基于 <a href="https://github.com/microsoft/vscode-css-languageservice" title>vscode-css-language</a> 服务提供了可靠的语言支持；</p></li><li><p data-number="3">如果使用 <code>postcss</code>/<code>stylus</code>/<code>sass</code> 的话，需要安装额外的语法高亮扩展。postcss 使用 <a href="https://marketplace.visualstudio.com/items?itemName=cpylua.language-postcss" title>language-postcss</a>，stylus 使用 <a href="https://marketplace.visualstudio.com/items?itemName=sysoev.language-stylus" title>language-stylus</a> 拓展，sass 使用 <a href="https://marketplace.visualstudio.com/items?itemName=Syler.sass-indented" title>Sass</a> 拓展；</p></li><li><p data-number="4">Volar 不包含 ESLint 和 Prettier，而官方的 <a href="https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint" title>ESLint</a> 和 <a href="https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode" title>Prettier</a> 扩展支持 Vue，所以需要自行安装。</p></li></ol><h2>2. Vue VSCode Snippets</h2><p><i>🔥 下载数 152 万 +</i></p><p><a href="https://marketplace.visualstudio.com/items?itemName=sdras.vue-vscode-snippets" title>Vue VSCode Snippets</a> 插件旨在为开发者提供最简单快速的生成 Vue 代码片段的方法，通过各种快捷键就可以在 <code>.vue</code>文件中快速生成各种代码片段。简直是 Vue3 开发必备神器。</p><p>该插件支持：Volar、Vue2 和 Vue3。</p><img src="https://static001.geekbang.org/infoq/b4/b4b7448be5b6a1cd593baa6b285161ea.png" alt/><p>使用方式如下：</p><ul><li><p>新建一个 <code>.vue</code>文件，输入 <code>vbase</code>会提示生成的模版内容：</p></li></ul><img src="https://static001.geekbang.org/infoq/9a/9af4c1b5d4353b4ce9eb7ff200c8ebc5.png" alt/><ul><li><p>输入 <code>vfor</code>快速生成 <code>v-for</code>指令模版：</p></li></ul><img src="https://static001.geekbang.org/infoq/39/39fa517c354b28c3070f57d66c139b48.png" alt/><ul><li><p>输入 <code>v3onmounted</code>快速生成 <code>onMounted</code>生命周期函数：</p></li></ul><img src="https://static001.geekbang.org/infoq/54/54169f069920b3811a6d98126588aaea.png" alt/><p>其他就不再演示啦，功能实在太强大，常用快捷键非常多，具体可以查看<a href="https://marketplace.visualstudio.com/items?itemName=sdras.vue-vscode-snippets" title>文档</a>。</p><h2>3. Auto Close Tag</h2><p><i>🔥 下载数 769 万 +</i></p><p><a href="https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag" title>Auto Close Tag</a> 插件是一个很好用的 VS Code 扩展，它对生产率有很大影响。顾名思义，当我们在结束标记中键入结束括号时，它将添加结束标记。它支持 HTML，Handlebars，XML，PHP，Vue，JavaScript，Typescript，JSX 等。</p><img src="https://static001.geekbang.org/infoq/52/52358decf372fd4697d8a23fc94ed239.png" alt/><h2>4. Vue Peek</h2><p><i>🔥 下载数 49 万 +</i></p><p><a href="https://marketplace.visualstudio.com/items?itemName=dariofuzinato.vue-peek" title>Vue Peek</a> 插件用来拓展 Vue 代码编辑的体验，可以让我们快速跳转到组件、模块定义的文件。</p><img src="https://static001.geekbang.org/infoq/ac/ac76494121ac6547974232d2aab56c4c.png" alt/><p>使用方式如下：</p><ul><li><p>右键组件标签，跳转到组件定义的文件：</p></li></ul><img src="https://static001.geekbang.org/infoq/2f/2fc7a592f327aa8bd2cf0fb6486ce02e.png" alt/><ul><li><p>右键组件标签，弹窗显示组件定义的文件：</p></li></ul><img src="https://static001.geekbang.org/infoq/27/2748611d87712b3d8b0fa82dc44b0cb6.png" alt/><h2>5. Vue Theme</h2><p><i>🔥 下载数 34 万 +</i></p><p><a href="https://marketplace.visualstudio.com/items?itemName=mariorodeghiero.vue-theme" title>Vue Theme</a> 插件提供了不错的 Vue 主题，还支持配置不同颜色，感觉还不错。</p><img src="https://static001.geekbang.org/infoq/c6/c68b8c7263d3c306e16c7d042af6d268.png" alt/><h2>6. Vite</h2><p><i>🔥 下载数 8.9 万 +</i></p><p><a href="https://marketplace.visualstudio.com/items?itemName=antfu.vite" title>Vite</a> 插件可以让我们打开项目后，就能自动启动开发服务器，允许开发者无需离开编辑器即可预览和调试应用。支持一键启动、构建和重启项目。</p><img src="https://static001.geekbang.org/infoq/04/041025f5bf53222b86488c6479850214.png" alt/><h2>总结</h2><p>今天分享的 6 个插件，大家可以按需安装使用。</p><p>我比较强烈推荐实用 <a href="https://marketplace.visualstudio.com/items?itemName=Vue.volar" title>Volar</a> 和 <a href="https://marketplace.visualstudio.com/items?itemName=sdras.vue-vscode-snippets" title>Vue VSCode Snippets</a> 这 2 个插件。如果觉得不错，还请点赞支持。👍</p><p>大家有更好的插件，欢迎评论分享~🔥</p><p>欢迎关注我的微信公众号“前端自习课”。</p></style>