Of course, I introduced her to Vetur and Volar while making sure to highlight the difference. But, while browsing both plugins’ documentation, I noticed how much stuff I ignored. We probably spent a few hours tinkering with our editor, and I learned so many new things about linting, formatting and autocompletion that I wish I had known earlier.
This was when I said to myself, let’s write an article about the most popular VS Code extensions for Vue! 🤓
Note: I will not talk about the most popular ubiquitous extensions like ESLint, Debugger for Chrome, Auto Close Tag, etc. Also keeps in mind that VS Code comes with Emmet directly installed, so you do not have to install an extension for it.
Volar (AKA Vue Language Features) and Vetur are two of the most popular VS Code extensions for Vue and Nuxt developers. But, the thing is that they are not meant to be used together (as it will cause conflicts).
So let’s put things into context. Before Vue 3, Vetur was the recommended choice. But, with the arrival of TypeScript in the ecosystem, the extension got some issues to support it properly. Also, most of the time, a lot of computing was done in
the background, which could cause the editor to become slow. Another thing is that it had no support for Vue 3’s new
<script setup> syntax with the composition API which was gaining a lot of popularity.
Thus, Volar was created to solve these issues in order to ensure that the development experience remains enjoyable for Vue 3 TypeScript developers.
Well … which one should we use? 🤷
Long story short: If you are using Vue 3, choose Volar. Vue’s creator, Evan You, advises this, which also seems to be the recommended extension for Vite development.
Volar is the new recommendation for Vue 3 in all cases.— Evan You (@youyuxi) November 9, 2021
Then … when should we use Vetur? 🤔
If you are still coding in Vue 2 or Nuxt 2, you will be more than happy with Vetur. It has syntax and semantic highlighting for SFC, snippets, formatting and linting. But, as you can see by going to the repository, the extension has not been updated for many months (even though it recently got a new maintainer).
But in my opinion, the appropriate choice is to go for Volar when possible, as you can also use it for Vue 2 (see setup for Vue 2).
But as I said, if you are using Vue 2/Nuxt 2, Vetur is an excellent choice. If you still want to use Vetur with Vue 3 and TypeScript, I recommend you also install VueDX (AKA Vue Developer Experience). It fills many holes Vetur has regarding TypeScript and provides features like type checking, completion, renaming and refactoring for .vue files by extending the TypeScript extension.
As you can understand now, I won’t talk much more about Vetur. We will focus our attention on Volar.
Marketplace Visual Studio link: Volar
Vue Language Features is a language support extension built for Vue, Vitepress and petite-vue. This is based on
@vue/reactivity to calculate everything on-demand, to implement native TypeScript language service level performance.
Here are a few features that come out of the box with Volar:
<script setup>syntax. Also, it supports syntax highlighting for CSS, LESS and SCSS.
"editor.linkedEditing": trueis enabled.
"html.autoClosingTags": trueis enabled. (Instead of using the Auto Close Tag extension.)
Things you should know:
Marketplace Visual Studio link: Vue VSCode Snippets
Volar does not include snippets like Vetur did. If you are looking to supercharge your workflow, I suggest you look at Vue VSCode Snippets. It was created by Sarah Drasner and supports Vue 2 and Vue 3.
In the long run, this extension will probably save you time. The only thing is that you have to take a few minutes to read the snippets. If you just install it, it will not help you. I recommend you print the snippets and keep them next to your desk in a visible space. 🤓
Marketplace Visual Studio link: Vue 3 Snippets
Provides snippets like the one above. Maybe you will prefer this syntax as it has more installs. 😇
Marketplace Visual Studio link: Vue Discovery
This extension discovers Vue components in your project and allows you to import automatically, register and expand the required props. It can be helpful if you are using Vetur. I haven’t tested it with Volar, though.
Marketplace Visual Studio link: Vue Peek
Volar already has this feature included, but if you are using Vetur, it will allow you to go to the definition of your component by right-clicking on it. I used this one for a long time to quickly jump to or peek into my components.
Marketplace Visual Studio link: Project Explorer With Raycast
A must-have extension for all developers dealing with multiple projects (which means most of us 😁), it will allow you to quickly jump between them by clicking on the left sidebar. You can manage all your projects’ paths in a JSON file, making it easy to update.
I also use this extension in combination with Visual Studio Code Recent Projects with Raycast (it replaces Spotlight on macOs).
Marketplace Visual Studio link: Gitlens
This extension lets you see who edited each line (and in which commit). It includes many features, probably too many to be added here, so I’ll let you click on the link above and see for yourself. The file history is also handy as it lets you see the changes per commit. 🤩
Marketplace Visual Studio link: Duplicate Action
Need to right-click on a file and duplicate it? This extension has been made for this. I don’t know why VS Code does not come natively with this feature, but this package does the job. 💪
For people who like beautiful icons next to their files, check the Material Icon Theme.
My friend also asked me about my theme, so I use the Palenight Theme as it has one of the beautiful combinations of colors. 🎨
Ensure your team is OK with this way of working before using them.
The first one lets you leave TODO-type comments in your code for the tasks you should do in the future. Things like:
// TODO: Add tests // FIXME: Bug with Mozilla Firefox.
In combination with the Todo Tree extension, you can quickly search your workspace for these comments.
One last tip I can give you is to regularly go on these links to discover trending VS Code extensions 😁:
Thank you for reading!
Subscribe to be the first to get our expert-written articles and tutorials for developers!
All fields are required