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是一個針對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目錄下體驗。

但願這些功能能夠儘快發佈！