✔︎ Last updated on April 26th, 2024
If you’re developing Vue apps in Visual Studio Code, you might have noticed that the official Vue extension doesn’t offer full autocompletion.
Specifically, when working within HTML tags, Vue-specific autocompletion doesn’t kick in unless you type out a Vue-specific attribute name, like @keydown or v-if. Even when you’ve typed out the entire event name, you don’t get suggestions for modifiers, which would have been quite helpful to know.
I also faced this issue so I decided to dig deeper and investigate. What I found was that with the release of their new VS Code extension (called Vue official), they have chosen to provide you more details instead of the list of all options.
Also read: How to Lighten or Darken a Color with Pure CSS
For example, when you type the @ symbol in an HTML tag’s attribute, the details you get are comprehensive, sourced directly from Vue’s official documentation.
This, while being useful, wasn’t exactly what I was looking for.
What I wanted was a list of all the Vue-specific options when typing out an attribute’s name. After all, the purpose of autocomplete is to save you from having to remember everything and instead pick and choose from a range of options.
Surprisingly, the previously official VS Code extension, ‘Vetur by Pine Wu’, supports this functionality. With Vetur, pressing space in an HTML tag automatically suggests Vue-specific options like key, events, as well as other attributes such as v-if and v-html.
This feature proved to be quite handy, saving me a significant amount of typing time and mental effort.
When I found this, I immediately disabled the new Vue-official version and stuck with Volar for my coding sessions.
It seems I’m not alone in this decision, as many others have experienced similar issues with the new Vue extension, finding it broken, sluggish, or unresponsive.
Also read: Creating the Sieve of Eratosthenes Animation in Vue
If you’re facing issues with autocomplete in Vue files on VS Code, the solution is simple: use the Vetur extension until the new official extension is fixed.
While Vetur is fast and provides all the Vue-specific options, keep in mind that you’ll be sacrificing the detailed documentation that the new Vue extension offers for each option.
Personally, I don’t miss the documentation as I use AI in Raycast and the Codeium extension which puts all the documentation at just a shortcut away. Ultimately, it’s up to you to decide what’s more important for your workflow.
Also read: How to Create a Typewriter Effect in Vue.js
Thanks for reading this article. If you liked it, please share it with your friends on social media.
You can reach out to me on Twitter for any queries.