开发vue3必备的几个vscode插件,你用上了吗?

2022-12-02 11:13:30 浏览数 (1)

大家好,我是前端实验室的大师兄!

不知道大家有没有用上Vue3呢?

大师兄已经使用将近半年的Vue3了,从开始的组合式API到现在稳定的setup语法糖,经过这半年的真实开发经历,大师兄使用了几款vscode的插件,这些插件在开发Vue3的时候能够极大的提高效率和方便程度

今天大师兄就把这几个插件分享出来,希望能够帮助大家提升开发效率

Vue Theme

Vue Theme是我一直在使用的主题插件,它的主题配色和Vue一致,优雅而又美观

volar(Vue Language Features)

说起vue的插件就不得不提及vetur,vetur是对Vue2支持很友好的插件,用于为.vue单文件组件提供代码高亮以及语法支持。

但是它对于ts的支持,并不友好,而且Vue3是一整套从头到尾使用ts的新底层以及全新的composition-api,所以此时volar顺应而生。

volar不仅支持 Vue3 语言高亮、语法检测,还支持 TypeScript 和基于 vue-tsc 的类型检查功能。

需要注意的是:使用时需要禁用 Vetur 插件,Volar与它会有冲突

Vue VSCode Snippets

此插件为开发者提供了快速的生成 Vue 代码片段的方法,通过各种快捷键就可以在 .vue文件中快速生成各种代码片段。

只需要记住几个快捷键,就能少敲很多代码,妥妥的开发利器,提升效率的必备神器

这里我列举几个最常用的快捷键操作:

  • 在新建的.vue文件里,输入 vbase 就会提示生成的模版内容:
  • 输入 vfor 就会提示for循环的模板

还有很多快捷方式,大家可以自行探索

Vue Peek

公司的项目一般会很大,.vue文件组件会很多,此时要想找到准确的对应的vue文件就会很麻烦。需要在目录文件夹中不停地跳转

Vue Peek 插就可以让我们快速跳转到组件、模块定义的文件。

Auto Close Tag

Auto Close Tag插件一直很实用,它在我们结束标记中键入结束括号时,它将添加结束标记。它支持众多语言,比如 HTML,PHP,Vue,JavaScript,Typescript,JSX 等。

Auto Rename Tag

Auto Rename Tag是一个自动重命名tag的插件,就是修改其中一个tag,另一半也会跟着变。

最后

欢迎加入前端实验室读者交流群,群里有不少技术大神,不定时会分享一些技术要点,更有一些资源收藏爱好者会分享一些优质的学习资料。吃瓜、摸鱼、白嫖技术就等你了~

进群方式:在下方公众号后台,回复 111 ,按提示操作即可进群。

0 人点赞