As vscode and vue became more and more popular, the name vetur became more and more familiar.

Vetur is a vscode plug-in that provides code highlighting and syntax support for.vue single file components.

However, for well-known reasons, Vue and Vetur are not friendly to ts support. Before @vue/composition-api came out, vue2’s TS needed to use vue-prototype-decorator to emulate the decorator pattern, but because it wasn’t supported from the bottom up, the ts experience was a mess.

On September 18, 2020, vuE3 – One Piece was officially released. With that comes a whole new underlayer that uses TS from start to finish and a whole new comic-API. Volar, meanwhile, adapted.

VolarWhat is the

Like vetur, volar is a vscode plug-in for vue, but unlike vetur, volar offers much more powerful functionality that makes people say oh my god.

To install it, simply search for volar in vscode’s plugin marketplace and click install.

With just over 16,000 downloads, I think it’s partly because Vetur is already powerful, and partly because a lot of developers don’t know about Volar.

VolarThe function of the

Here comes the big one!

As the second generation plug-in of Vue, Volar integrates the related functions of Vetur, such as highlighting, syntax hints, etc., but what makes me pay more attention to is its unique functions.

Some features aren’t available yet, but you can get a taste of the new features by downloading the source code at Github

Feature 1: You no longer need a unique root tag

Vue templates require a unique root tag, which is determined by vUE. In VUe3, however, this restriction is removed. As long as you can use multiple root tags within a template, you no longer need to worry about the problems caused by a unique root tag.

To be honest, this is not a new feature of Volar, it is vue3, but with Volar there will be no errors.

Function two: editor quick segmentation

Vue single file component, according to the function, there are template, script, style three root elements.

Just like regular HTML files, having too much functionality in a single file can lead to file redundancy. A vUE page with a little more data might have two or three thousand lines of code. With it comes all kinds of inconveniences: inconvenient data finding, inconvenient context switching, inconvenient development, and so on.

To solve these problems, Volar provides a shortcut.

After installing Volar, enter the.vue single file component and you will see an extra icon in the upper right corner

Then we write the template, script, style root element on the page and click on the icon

An exciting thing happened. Our vue file was split into three Windows, by function, and each window was responsible for its own function. The other two root elements were merged.

In other words, we can easily separate template, script, and style files, split one file into three Windows, and when three files are used, and the plugin does it for you, we just need to click on it.

I have to say, I love this feature.

This feature is already available in volar, as long as you download it from the vscode plugin center. The next few features, which I found in the Volar source code, are pleasant surprises.

Three features:ref sugarSyntax quick change support

Ref Sugar is an RFC feature, but it has been around for a long time and is now available in vuE3. I won’t go into the exact usage and syntax, but I’m going to focus on volar and ref sugar.

The error is caused by eslint-plugin-vue

You can see that after ref Sugar, there’s a little ref Sugar icon on top of the script with a check box, so let’s click on that check box and see what happens.

As you can see, when we click on this little check box, it changes from the ref Sugar syntax to the normal Script setup mode.

It’s not a surprise, it’s not a surprise.

Four features:styleThe inside of theclassreference

You can see that a 1 reference icon appears above the.foo class name, indicating that the current class has a reference. Let’s click on that 1 reference

A popup window appears showing where the current class is being used.

Features five:classtrace

We create a template root element and write to it

<template>
  <div class="foo"></div>
</template>
Copy the code

Write in style

<style scoped>
.foo {}
</style>
Copy the code

In addition to the 1 reference icon above.foo in style, a line will appear below foo in class=”foo”.

For developers who use vscode a lot, it’s easy to say what this means.

We follow the prompt, hold down Command and click, and see that the cursor moves itself before.foo in style.

Wow, awesome!

Six features:css moduleType hinting

CSS modules are mostly used in react stacks. Personally, I’ve never used them in Vue because vue provides scoped scope. It’s easier to use the preprocessor without having to worry about style conflicts.

We create the following code

<template>
  <div :class="$style.foo"></div>
</template>

<style module>
.foo { }
</style>
Copy the code

Then move the mouse over $style

Kind of interesting, looks like vscode is letting volar play with it.

Features seven:langGrammar tip

Vue can use the lang attribute to select the language to use, such as HTML and pug in Template, TS in script, SCSS in style, and so on.

But in the old days, we typed it manually, the editor, or Vetur didn’t give us any hints, and it was possible that you were looking for a long time for a puzzling question because the lang was written incorrectly.

But all that, with Volar, is different

Volar now gives us a clear indication of which languages we can write in when selecting a preprocessor using lang.

Features eight:templateThe syntax conversion

Vue provides two templates for use by default, but generally uses HTML, the other is called PUG.

Pug is more yML-like than HTML, with a high degree of brevity.

In Volar, you can convert HTML and PUG to each other.

<template>
  <div>
    <li></li>
    <li></li>
    <li>
      <img />
    </li>
  </div>
</template>

Copy the code

After we write template, a small pug icon appears at the top of the template, and we can see that it is not selected at this point

At this point we’re going to click on the icon and make it selected.

Something amazing happened.

The HTML template we’ve written is automatically converted to puG, and with a click, we’re back to familiar HTML

The end of the

Starting from function 3, they are basically new functions for internal testing. I found these when I downloaded Volar to the local for checking by chance. Want to can download the source code, and then in the packages/vscode – vue – languageservice/the testCases directory experience.

Hopefully these features will be released soon!