Top 5 VS Code extensions for Vue developers for 2022
Tags: vue, vscode, javascript, webdev
Published: 2021-12-20 21:27:32

_by author [Arek Nawo](https://blog.openreplay.com/authors/arek-nawo)_


There’s a high chance that, if you’re a web developer, you’re using **VS Code**. After all, it’s the most popular code editor around. In large part, it owes its popularity to being mostly open-source, highly configurable, and very **extensible**.

In this article, we’ll take a look at some of the best VS Code extensions specifically for **Vue**. With the adoption of Vue 3, there’s been quite a lot of changes in the ecosystem, and related tooling is no exception. Here’s all you need to know about ongoing changes and what extensions to use for 2022!

## Volar

With **Vue 3 + TypeScript** combo gaining popularity, Vue’s official VS Code extension - Vetur - began to have issues, like [high CPU usage](https://github.com/vuejs/vetur/issues/1051) when using Vue with TypeScript or [lack of support](https://github.com/vuejs/vetur/issues/2296) for Vue 3’s new `<script setup>` syntax.

That’s why [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) was created - to solve Vetur’s issues and provide the best development experience possible for Vue 3 + TypeScript users. It offers full language support for Vue 3 - including standard **Single File Component** (SFC) syntax and its latest additions like `<script setup>`.

If you’re using Vue 3 - especially with TypeScript - you should take a look at Volar. It’s been [recommended by Vue’s creator](https://twitter.com/youyuxi/status/1458004347854356484), and it’s also the [recommended extension](https://github.com/vitejs/vite/pull/4842) for [Vite](https://vitejs.dev/) development.

## Vetur

Even though Volar is the current recommendation for Vue 3, [Vetur](https://marketplace.visualstudio.com/items?itemName=octref.vetur) isn’t going anywhere anytime soon. It’s still by far the most popular Vue-related VS Code extension out there, and with a lot of the ecosystem still running on **Vue 2**, it’s the best choice for those who have not upgraded.

Like Volar, Vetur provides full language support, that although is more mature and feature-rich, is somewhat lacking in Vue 3 and TS support. You can still use it with Vue 3 and TS just fine, but you should be aware the experience can be lacking.

There have been [talks](https://github.com/vuejs/vetur/discussions/2842) [to](https://github.com/vuejs/vetur/discussions/3183) combine modern Vue tooling under Vetur once again; however, currently, you still have to pick which one to use for your workflow.

## VueDX

Developers who want to use Vetur for some of its [additional features](https://github.com/vuejs/vetur/discussions/2842#discussion-3307419) (Snippets, ESLint, and Prettier integration) but would like to have a good Vue 3 + TS experience have one more solution - [VueDX](https://marketplace.visualstudio.com/items?itemName=znck.vue-language-features).

VueDX (aka Vue Developer Experience) is a set of tools created to improve development experience in Vue - especially for those using it with TypeScript. It integrates exceptionally well with Vetur, filling many of its feature holes.

The primary extension - [VueDX](https://marketplace.visualstudio.com/items?itemName=znck.vue-language-features) - extends TS to provide type checking, completion, renaming, and refactoring for *.vue* SFCs. Additionally, there’s also an [extension](https://marketplace.visualstudio.com/items?itemName=znck.vue) for SFC syntax highlighting and a unique [Preview - VueDX](https://marketplace.visualstudio.com/items?itemName=znck.preview) extension for live-preview of your Vue components right in the VS Code.

## Open Source Session Replay
Debugging a web application in production may be challenging and time-consuming. [OpenReplay](https://github.com/openreplay/openreplay) is an Open-source alternative to FullStory, LogRocket and Hotjar. It allows you to monitor and replay everything your users do and shows how your app behaves for every issue.
It’s like having your browser’s inspector open while looking over your user’s shoulder.
OpenReplay is the only open-source alternative currently available.

![OpenReplay](https://raw.githubusercontent.com/openreplay/openreplay/main/static/replayer.png)

Happy debugging, for modern frontend teams - [Start monitoring your web app for free](https://github.com/openreplay/openreplay).


## Vue VSCode Snippets

Snippets have always been a great way of boosting your coding productivity, and in the case of Vue - there’s no exception.

[Vue VSCode Snippets](https://marketplace.visualstudio.com/items?itemName=sdras.vue-vscode-snippets) provides a great set of snippets to use with both Vue 2 and Vue 3. There are snippets for common imports, Vue 3’s Composition API, Options API, lifecycle hooks, and tons more.

## ESLint

This extension integrates the awesome [ESLint](https://eslint.org/) linter directly into VS Code, showing you all the linting issues directly in your code. While not Vue-specific, Vue provides official plugin for ESLint assure correctness and use of best practices in your Vue code.

To configure your setup correctly, make sure to follow the [official documentation](https://eslint.vuejs.org/). The plugin provides many linting rules and you can use them through one of the provided presets or on one-by-one basis. If you’re using TypeScript - you should also check out the [TypeScript ESLint](https://typescript-eslint.io/) tooling.

## The must-haves

Now, apart from all the above, VS Code marketplace is full of extensions that I’d say are must-haves no matter what kind of web development you’re doing. Here are some of my personal top picks.

### Prettier

[Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) is an opinionated code formatted that can quickly format your code on any configured action, e.g., file save. Supports Vue SFC syntax out-of-the-box.

### GitLens

[GitLens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens) is a feature-packed extension for all your Git needs. My favorite features are Git revision navigation, Git code lens, and rich sidebar view for all things Git.

### GitHub Repositories

Talking about Git, [GitHub Repositories](https://marketplace.visualstudio.com/items?itemName=GitHub.remotehub) is a fairly-new extension (currently in preview) that allows you to search for, fetch and browse the code of any accessible GitHub repository right from the comfort of your VS Code editor. Combine this with GitLens, and working on any open-source Vue project will be a blast!

Worth noting is that this extension might become a [built-in feature](https://code.visualstudio.com/updates/v1_56#_remote-repositories-remotehub) in the near future.

### Code Spell Checker

[Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) encourages you to make your code more readable and grammatically correct. It’ll check words in your code against any installed dictionary to make sure it’s correct and human-readable in the first place. If you want to one-up your naming game - it’s a must-have.

### TODO Highlight

If you’re used to leaving a lot of TODO-type of comments in your code for stuff you should do in the future, [TODO Highlight](https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight) is just for you. It’ll not only highlight comments with labels like `// TODO:` or `// FIXME:` but will also show you a summery of all your TODOs!

## Conclusion

So, that’s it! Hopefully, you found this article insightful and now know what extensions you should consider for Vue development. There’s a lot of changes taking place in the Vue ecosystem right now, and I hope you’re as excited as I am to see what the future holds in 2022.