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>的语言，因为这些基于 vscode-css-language 服务提供了可靠的语言支持；
如果使用 postcss/stylus/sass 的话，需要安装额外的语法高亮扩展。postcss 使用 language-postcss，stylus 使用 language-stylus 拓展，sass 使用 Sass 拓展；
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 个插件。
到此这篇关于Vue3开发必备的六个VSCode插件推荐的文章就介绍到这了,更多相关Vue3必备VSCode插件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
Vue3项目中配置TypeScript和JavaScript的兼容
在Vue3开发中,常见的使用JavaScript（JS）编写代码,但也会有调整编写语言使用TypeScript（TS）的需求,因此,在Vue3项目设置中兼容TS和JS是刻不容缓的重要任务,2023-08-08
这篇文章主要为大家详细介绍了vue实现滑动解锁功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
我们有时候会遇到要输入框自动获取焦点的情况,下面这篇文章主要给大家介绍了关于Vue Input输入框自动获得焦点的简单方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-11-11
这篇文章主要介绍了vue弹窗插件实战代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了VUE如何将方法名字作为变量进行调用问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
本文主要介绍了Avue和Element-UI动态三级表头的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-07-07
本篇文章主要介绍了新手vue构建单页面应用实例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
vue3 新增的 Composition API中的 watchEffect 和 watch都可在 setup() 函数中使用，本文重点介绍vue3中watch与watchEffect的区别，感兴趣的朋友一起看看吧2023-02-02
这篇文章主要介绍了Vue3计算属性是如何实现的，对于任何包含响应式数据的复杂逻辑，我们都应该使用计算属性，更多相关内容需要的小伙伴可以参考一下2022-08-08
使用vis-timeline绘制甘特图并实现时间轴的中文化(案例代码)
这篇文章主要介绍了使用vis-timeline绘制甘特图并实现时间轴的中文化(案例代码),本文结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-02-02
最新评论