Popular VS Code Extensions for Vue.js & Nuxt.js Developers in 2022

If you’re coding in JavaScript or TypeScript with Vue 3 or Nuxt and looking for ways to make the most of your setup on VS Code, this article is for you! We talk here about Vetur and Volar and go through linting, formatting and autocompletion tips you wish you knew earlier.

I was in a coffee shop last week when a friend of mine asked me what kind of plugins she should set up on VS Code. She was coding in JavaScript, sometimes in TypeScript, and dealing most of the time with frameworks like Vue 3 or Nuxt.

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.

A Word About Volar vs. Vetur

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.

1. 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:

• Syntax highlighting for Vue 3 SFC and the <script setup> syntax. Also, it supports syntax highlighting for CSS, LESS and SCSS.
• TypeScript support.
• You can right-click on a prop or a component, go to its definition or find all references.
• Autorename component import will rename the file’s name.
• Auto rename tag. Make sure "editor.linkedEditing": true is enabled.
• Auto close tag. Make sure "html.autoClosingTags": true is enabled. (Instead of using the Auto Close Tag extension.)
• Automatically includes your components.

Things you should know:

• It does not include snippets like Vetur did.
• It does not include ESLint and Prettier. Use the official ESLint and Prettier extensions as they support Vue.
• It does not support PostCSS, Stylus or Sass. But you can use these additional extension if you need syntax highlighting for these languages: language-postcss, language-stylus, sass-indented.

2. Vue VSCode Snippets

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. 🤓

3. Vue 3 Snippets

Marketplace Visual Studio link: Vue 3 Snippets

Provides snippets like the one above. Maybe you will prefer this syntax as it has more installs. 😇

4. Vue Discovery

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.

5. Vue Peek

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.

6. Project Explorer With Raycast

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).

7. Gitlens

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. 🤩

8. Duplicate Action

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. 💪

9. Material Icon Theme & Palenight Theme

Theme: Material Icon Theme
Theme: Palenight Theme

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. 🎨

10. Todo Highlight & Todo Tree

Link: Todo Highlight
Link: Todo Tree

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.

Where To Go From Here?

One last tip I can give you is to regularly go on these links to discover trending VS Code extensions 😁:

• Trending VS Code Extensions
• Trending VS Code Extensions for Vue
• Trending VS Code Extensions for Nuxt

I am also happy to read your comments and Twitter messages @RifkiNada. And in case you are curious about my work or other articles, you can look at them here www.nadarifki.com. 😉

Thank you for reading!