vscode插件分享： 6个Vue3开发必备插件

本篇文章给大家整理分享 6 个 vue3 开发必备的 vscode 插件，可以直接用过 vscode 的插件中心直接安装使用，希望对大家有所帮助！

1. Volar

下载数 153 万+

相信使用 VSCode 开发 Vue2 的同学一定对 Vetur 插件不会陌生，作为 Vue2 配套的 VSCode 插件，它的主要作用是对 Vue 单文件组件提供高亮、语法支持以及语法检测。【推荐学习：vscode教程、编程教学、vuejs视频教程】

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

立即学习“前端免费学习笔记（深入）”；

使用时需要注意：

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

• 推荐使用 css/less/scss 作为 <style>的语言，因为这些基于 vscode-css-language 服务提供了可靠的语言支持；

• 如果使用 postcss/stylus/sass 的话，需要安装额外的语法高亮扩展。postcss 使用 language-postcss，stylus 使用 language-stylus 拓展，sass 使用 vscode0 拓展；

• Volar 不包含 ESLint 和 Prettier，而官方的 vscode1 和 vscode2 扩展支持 Vue，所以需要自行安装。

vscode3 插件旨在为开发者提供最简单快速的生成 vscode4 代码片段的方法，通过各种快捷键就可以在 .vue文件中快速生成各种代码片段。简直是 Vue3 开发必备神器。

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

使用方式如下：

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

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

Gridster.js多列网格式拖动布局插件

网页中拖动 DIV 是很常见的操作，今天就分享给大家一个 jQuery 多列网格拖动布局插件，和其它的插件不太一样的地方在于你处理拖放的元素支持不同大小，并且支持多列的网格布局，它们会自动的根据位置自己排序和调整。非常适合你开发具有创意的应用。这个插件可以帮助你将任何的 HTML 元素转换为网格组件

74

查看详情

• 输入 v3onmounted快速生成 onMounted生命周期函数：

其他就不再演示啦，功能实在太强大，常用快捷键非常多，具体可以查看vscode5。

vscode6 插件是一个很好用的 VS Code 扩展，它对生产率有很大影响。顾名思义，当我们在结束标记中键入结束括号时，它将添加结束标记。它支持HTML，Handlebars，XML，PHP，Vue，JavaScript，Typescript，JSX等。

vscode7 插件用来拓展 Vue 代码编辑的体验，可以让我们快速跳转到组件、模块定义的文件。

使用方式如下：

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

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

vscode8 插件提供了不错的 Vue 主题，还支持配置不同颜色，感觉还不错。

vscode9 插件可以让我们打开项目后，就能自动启动开发服务器，允许开发者无需离开编辑器即可预览和调试应用。支持一键启动、构建和重启项目。

总结

今天分享的 6 个插件，大家可以按需安装使用。比较强烈推荐实用 Volar 和 1. Volar

下载数 153 万+

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

更多关于VSCode的相关知识，请访问：1. Volar

下载数 153 万+

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

以上就是vscode插件分享： 6个Vue3开发必备插件的详细内容，更多请关注php中文网其它相关文章！