Volar - vue终极开发神器!

随着vscode以及vue的越来越普及,vetur这个名字也越来越被人熟知。

vetur是一个vscode插件,用于为.vue单文件组件提供代码高亮以及语法支持。

可是由于众所周知的原因,vue以及vetur对于ts的支持,并不友好。在@vue/composition-api这个插件 出来之前,vue2的ts需要使用vue-prototype-decorator这个插件,来通过装饰器的模式进行模拟,但是由于不是从底层支持,因此vue2的ts使用体验可谓是一塌糊涂。

在2020年9月18日,vue3 - one piece正式发布。随之而来的,是一整套从头到尾使用ts的新底层以及全新的composition-api。与此同时,volar顺应而生。

Volar是什么

vetur相同,volar是一个针对vuevscode插件,不过与vetur不同的是,volar提供了更为强大的功能,让人直呼卧槽

安装的方式很简单,直接在vscode的插件市场搜索volar,然后点击安装就可以了。

Volar的功能

功能一: 不再需要唯一根标签

学过vue语法的应该都知道,在vuetemplate中,需要一个唯一的根标签,这是vue决定的,但是在vue3中,去除了这个限制,只要在template中,可以使用多个根标签,不再需要考虑因为唯一根标签所引起的问题。

Volar - vue终极开发神器!_第1张图片

说实话这不是volar的新功能,是vue3的,只不过使用volar之后不会报错了。

功能二:编辑器快捷分割

vue单文件组件,按照功能,存在templatescriptstyle三个根元素。

就像常规的html文件,在单一文件内功能太多,容易造成文件冗余。一个数据稍微多点的vue页面,就可能有两三千行代码。随之带来的,就是各种不方便:找数据不方便、上下文切换不方便、开发不方便,等等等等。

为了解决这些问题,volar提供了一个快捷方式。

在安装好volar之后,进入.vue单文件组件,会发现右上角多了一个图标

volar快捷功能

然后我们在页面中写入templatescriptstyle根元素,点击一下这个图标


Volar - vue终极开发神器!_第2张图片

令人激动的事情发生了,我们的vue文件,按照功能,被拆分成了三个视窗,并且每个视窗都负责自己的功能,其他的两个根元素都被合并了。

也就是说,我们可以非常容易的进行区分开templatescriptstyle了,把一个文件拆成三个窗口,当三个文件来用,而且全部由插件来帮你完成,我们只需要点一下即可。

不得不说,我特别喜欢这个功能。

功能三: ref sugar语法快捷改动支持

ref sugar是一个还在rfc阶段的功能,但是已经持续很久了,现在的vue3版本已经可以尝鲜使用了。具体的用法以及语法我就不展开赘述了,我主要说一下volarref sugar的结合。

Volar - vue终极开发神器!_第3张图片

可以看到,在使用了ref sugar之后,script上面出现了一个ref sugar的小图标,并且打了个对勾,那么我们点一下那个对勾,看看会发生什么。


Volar - vue终极开发神器!_第4张图片

可以看到,我们点击这个小对勾之后,它由原本的ref sugar语法变为了普通的script setup模式。

功能四: style里面的class引用
 

Volar - vue终极开发神器!_第5张图片

可以看到,在.foo这个类名上面,出现了一个1 reference的小图标,代表着当前class有一次引用,我们点击一下这个1 reference
 

Volar - vue终极开发神器!_第6张图片

功能五: class追溯

我们创建一个template根元素,在里面写入


style中写入


除了style中的.foo上面会出现1 reference的小图标之外,在class="foo"foo下面,会出现一道横线。

Volar - vue终极开发神器!_第7张图片

对于经常使用vscode的开发人员来说,这代表什么意义就不必多说了。

我们根据提示,按住command然后点击,会发现光标自己移动到了style中的.foo之前。

功能六: css module类型提示

css module一般是react技术栈用的会比较多一些,就我个人来说,是从没在vue里面使用它的,因为vue提供了scoped作用域,不用担心样式冲突,直接使用预处理器会更加简单方便。

我们创建如下代码




然后将鼠标移动到$style

Volar - vue终极开发神器!_第8张图片

有点意思,看来vscode是让volar玩明白了。

功能七: lang语法提示

vue可以使用lang属性来选择使用的语言,比如template中的htmlpugscript中的tsstyle中的scss等。

但是在以前,我们都是手动输入的,编辑器,或者说vetur并没有给我们提供任何提示,有可能你找了很久的莫名其妙的问题,就是因为lang写错了。

但是这一切,在有了volar之后,都不同了

Volar - vue终极开发神器!_第9张图片

现在我们在使用lang进行选择预处理器的时候,volar为我们提供了明确的提示,告知我们可以使用哪几种语言来进行编写。

功能八: template语法转换

vue默认提供了两种模板供我们使用,但是一般都会使用html,另外一种叫做pug

相对于htmlpug更偏向于yml那种,简洁程度特别高。

volar中,为我们提供了htmlpug互相转换的功能。


在我们书写template之后,template顶部会出现一个小小的pug图标,我们可以看到此时它是没有被选中的

Volar - vue终极开发神器!_第10张图片

这个时候我们点击一下这个图标,让它选中。

神奇的事情发生了。

Volar - vue终极开发神器!_第11张图片

我们写好的html模板,被自动转化成了pug,再点击一下,又回到了我们熟悉的html

pug


链接:https://www.imooc.com/article/317810

你可能感兴趣的:(#,Vue,VsCode,vue3,volar)