隨著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，然后點擊安裝就可以了。

Volar的功能

功能一： 不再需要唯一根標簽

學過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了，把一個文件拆成三個窗口，當三個文件來用，而且全部由插件來幫你完成，我們只需要點一下即可。

不得不說，我特別喜歡這個功能。

功能三:?ref sugar語法快捷改動支持

ref sugar是一個還在rfc階段的功能，但是已經持續很久了，現在的vue3版本已經可以嘗鮮使用了。具體的用法以及語法我就不展開贅述了，我主要說一下volar和ref sugar的結合。

可以看到，在使用了ref sugar之后，script上面出現了一個ref sugar的小圖標，并且打了個對勾，那么我們點一下那個對勾，看看會發生什么。

可以看到，我們點擊這個小對勾之后，它由原本的ref sugar語法變為了普通的script setup模式。

功能四:?style里面的class引用
?

可以看到，在.foo這個類名上面，出現了一個1 reference的小圖標，代表著當前class有一次引用，我們點擊一下這個1 reference
?

功能五:?class追溯

我們創建一個template根元素，在里面寫入

<template><div class="foo"></div> </template>

在style中寫入

<style scoped> .foo {} </style>

除了style中的.foo上面會出現1 reference的小圖標之外，在class="foo"的foo下面，會出現一道橫線。

對于經常使用vscode的開發人員來說，這代表什么意義就不必多說了。

我們根據提示，按住command然后點擊，會發現光標自己移動到了style中的.foo之前。

功能六：?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

---

鏈接：https://www.imooc.com/article/317810

總結

以上是生活随笔為你收集整理的Volar - vue终极开发神器！的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。