How to autocomplete Vue templates in Visual Studio Code

Question

I am starting to learn Vue, using Visual Studio Code. I downloaded an extension that adds Vue code snippets (Vue 2 Snippets by hallowtree).

When I start to type "v" in a Vue template, suggestions are shown (v-on, v-bind, etc.), but afterward, no suggestions or autocompletions are shown.

In the following example template, v-on is suggested, but afterward, no suggestions for "click" or any other event. Also, nothing is suggested after "@":

<button v-on:click="changeLink">Click to change Link</button>
<button @click="changeLink">Click to change Link</button>

And in this example, v-bind is suggested, but afterward, no suggestions for "href" or any other HTML properties/attributes:

<a v-bind:href="link">Link</a> 
<a :href="link">Link</a>

Although it's good for me for practicing, it will become a liability. Are there any extensions, options, or commands I can set up to improve the developer experience?

Answer 1

Vetur has had experimental template interpolation for autocomplete and "diagnostics / hover / definition / references" within HTML templates since February 2019.

Enable the Vetur › Experimental: Template Interpolation Service option in your VS Code settings to turn on this feature.

Answer 2

add the Vetur extension on visual-studio-code it includes many other nice features besides auto completion vue code