随着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是一个针对vue的vscode插件，不过与vetur不同的是，volar提供了更为强大的功能，让人直呼卧槽。
安装的方式很简单，直接在vscode的插件市场搜索volar，然后点击安装就可以了。
现在只有16000多的下载，我觉得是一方面是
vetur已经很强大了，另一方面，则是众多开发者并不知道volar这个东西。
Volar的功能
重头戏来了！
Volar作为vue的二代插件，除了集成了vetur的相关功能，如高亮、语法提示等之外，更让我关注的，是它独有的功能。
某些功能现在还没发布，不过可以通过在
github下载源码，来抢先体验新功能
功能一： 不再需要唯一根标签
学过vue语法的应该都知道，在vue的template中，需要一个唯一的根标签，这是vue决定的，但是在vue3中，去除了这个限制，只要在template中，可以使用多个根标签，不再需要考虑因为唯一根标签所引起的问题。
说实话这不是
volar的新功能，是vue3的，只不过使用volar之后不会报错了。
功能二：编辑器快捷分割
vue单文件组件，按照功能，存在template、script、style三个根元素。
就像常规的html文件，在单一文件内功能太多，容易造成文件冗余。一个数据稍微多点的vue页面，就可能有两三千行代码。随之带来的，就是各种不方便：找数据不方便、上下文切换不方便、开发不方便，等等等等。
为了解决这些问题，volar提供了一个快捷方式。
在安装好volar之后，进入.vue单文件组件，会发现右上角多了一个图标
然后我们在页面中写入template、script、style根元素，点击一下这个图标
令人激动的事情发生了，我们的vue文件，按照功能，被拆分成了三个视窗，并且每个视窗都负责自己的功能，其他的两个根元素都被合并了。
也就是说，我们可以非常容易的进行区分开template、script、style了，把一个文件拆成三个窗口，当三个文件来用，而且全部由插件来帮你完成，我们只需要点一下即可。
不得不说，我特别喜欢这个功能。
这个功能现在的
volar已经有了，只要你在vscode插件中心下载就可以使用了。接下来的几个功能，是我在volar源代码中找到的，都是惊喜。
功能三: ref sugar语法快捷改动支持
ref sugar是一个还在rfc阶段的功能，但是已经持续很久了，现在的vue3版本已经可以尝鲜使用了。具体的用法以及语法我就不展开赘述了，我主要说一下volar和ref sugar的结合。
报错不用管，是
eslint-plugin-vue的原因
可以看到，在使用了ref sugar之后，script上面出现了一个ref sugar的小图标，并且打了个对勾，那么我们点一下那个对勾，看看会发生什么。
可以看到，我们点击这个小对勾之后，它由原本的ref sugar语法变为了普通的script setup模式。
惊不惊喜，意不意外。
功能四: style里面的class引用
可以看到，在.foo这个类名上面，出现了一个1 reference的小图标，代表着当前class有一次引用，我们点击一下这个1 reference
出现了一个弹窗，里面是当前class的具体使用位置。
功能五: class追溯
我们创建一个template根元素，在里面写入
<template>
<div class="foo"></div>
</template>
复制代码
在style中写入
<style scoped>
.foo {}
</style>
复制代码
除了style中的.foo上面会出现1 reference的小图标之外，在class="foo"的foo下面，会出现一道横线。
对于经常使用vscode的开发人员来说，这代表什么意义就不必多说了。
我们根据提示，按住command然后点击，会发现光标自己移动到了style中的.foo之前。
哇，awesome!
功能六： css module类型提示
css module一般是react技术栈用的会比较多一些，就我个人来说，是从没在vue里面使用它的，因为vue提供了scoped作用域，不用担心样式冲突，直接使用预处理器会更加简单方便。
我们创建如下代码
<template>
<div :class="$style.foo"></div>
</template>
<style module>
.foo { }
</style>
复制代码
然后将鼠标移动到$style上
有点意思，看来vscode是让volar玩明白了。
功能七: lang语法提示
vue可以使用lang属性来选择使用的语言，比如template中的html和pug，script中的ts，style中的scss等。
但是在以前，我们都是手动输入的，编辑器，或者说vetur并没有给我们提供任何提示，有可能你找了很久的莫名其妙的问题，就是因为lang写错了。
但是这一切，在有了volar之后，都不同了
现在我们在使用lang进行选择预处理器的时候，volar为我们提供了明确的提示，告知我们可以使用哪几种语言来进行编写。
功能八: template语法转换
vue默认提供了两种模板供我们使用，但是一般都会使用html，另外一种叫做pug。
相对于html，pug更偏向于yml那种，简洁程度特别高。
在volar中，为我们提供了html和pug互相转换的功能。
<template>
<div>
<li></li>
<li></li>
<li>
<img />
</li>
</div>
</template>
复制代码
在我们书写template之后，template顶部会出现一个小小的pug图标，我们可以看到此时它是没有被选中的
这个时候我们点击一下这个图标，让它选中。
神奇的事情发生了。
我们写好的html模板，被自动转化成了pug，再点击一下，又回到了我们熟悉的html
尾声
从功能三开始，基本都是算内测的新功能，我是机缘巧合之下，将
volar下到本地进行查看的时候发现的这些。想尝鲜的可以自己下载源码，然后在packages/vscode-vue-languageservice/testCases目录下体验。作者：Asarua
链接：https://juejin.cn/post/6966106927990308872
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。