本篇文章给大家整理分享 6 个 Vue3 开发必备的 VSCode 插件,可以直接用过 VSCode 的插件中心直接安装使用,希望对大家有所帮助!
![](https://img-blog.csdnimg.cn/img_convert/c0adc6b15820d92b39f8e50ff3a69cec.jpeg)
1. Volar
下载数 153 万+
相信使用 VSCode 开发 Vue2 的同学一定对 Vetur 插件不会陌生,作为 Vue2 配套的 VSCode 插件,它的主要作用是对 Vue 单文件组件提供高亮、语法支持以及语法检测。【推荐学习:vscode教程、编程教学、vuejs视频教程】
而随着 Vue3 正式版发布,Vue 团队官方推荐 Volar 插件来代替 Vetur 插件,不仅支持 Vue3 语言高亮、语法检测,还支持 TypeScript 和基于 vue-tsc 的类型检查功能。
![](https://img-blog.csdnimg.cn/img_convert/41941d22611296799216f40238eb98e1.png)
使用时需要注意:
-
首先要禁用 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。
![](https://img-blog.csdnimg.cn/img_convert/2953f1c970d5b15d398db8a78fd81601.png)
使用方式如下:
- 新建一个
.vue
文件,输入 vbase
会提示生成的模版内容:
![](https://img-blog.csdnimg.cn/img_convert/087961fad56def28aeeed9986eab049a.png)
![](https://img-blog.csdnimg.cn/img_convert/f1961307b42f03cb2b77624855771aeb.png)
- 输入
v3onmounted
快速生成 onMounted
生命周期函数:
![](https://img-blog.csdnimg.cn/img_convert/ead52e19025a5d24697b4fbbcd0a1a37.png)
其他就不再演示啦,功能实在太强大,常用快捷键非常多,具体可以查看文档。
3. Auto Close Tag
下载数 769 万+
Auto Close Tag 插件是一个很好用的 VS Code 扩展,它对生产率有很大影响。顾名思义,当我们在结束标记中键入结束括号时,它将添加结束标记。它支持HTML,Handlebars,XML,PHP,Vue,JavaScript,Typescript,JSX等。
![](https://img-blog.csdnimg.cn/img_convert/2cef39c61237bc8cc25792ee73e1609a.png)
4. Vue Peek
下载数 49 万+
Vue Peek 插件用来拓展 Vue 代码编辑的体验,可以让我们快速跳转到组件、模块定义的文件。
![](https://img-blog.csdnimg.cn/img_convert/9a60c7316b444d4ebb59dc961715e71d.png)
使用方式如下:
![](https://img-blog.csdnimg.cn/img_convert/3475d6ec285878b9a1f45d624e56dcc3.png)
![](https://img-blog.csdnimg.cn/img_convert/5cd6c4acd7288fd84057520405aa6280.png)
5. Vue Theme
下载数 34 万+
Vue Theme 插件提供了不错的 Vue 主题,还支持配置不同颜色,感觉还不错。
![](https://img-blog.csdnimg.cn/img_convert/1b675a42bafe136c05654174da9f7cd9.png)
6. Vite
下载数 8.9 万+
Vite 插件可以让我们打开项目后,就能自动启动开发服务器,允许开发者无需离开编辑器即可预览和调试应用。支持一键启动、构建和重启项目。
![](https://img-blog.csdnimg.cn/img_convert/a97672856d6fa4e5adc27b282cb47217.png)
总结
今天分享的 6 个插件,大家可以按需安装使用。比较强烈推荐实用 Volar 和 Vue VSCode Snippets 这 2 个插件。
更多关于VSCode的相关知识,请访问:vscode基础教程!
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)