Adding the right VS Code extensions to Visual Studio can make your life as a developer much easier.

They help with formatting, scalability, enforcing best practices, and thus automating many of the forgotten tasks of development. They can also just be fun extensions that make our code look prettier/easier to write.

As a Vue enthusiast, I spend a lot of time looking for the best VS Code extensions for Vue developers. Here are a few things that have made my life so easy.

Are you ready?

Let’s cut to the chase.

Vetur

If you downloaded a VS Code extension from this article, it must be Vetur.

A Vue toolkit for VS Code — it provides Vue specific syntax highlighting, Code snippets for common Code snippets, and much more that all Vue developers need.

Vetur is well maintained — it even provides support for Vue3 Typescript.

There really isn’t much else to say about Vetur — there you have it. This will make your development better.

ESLint Plugin VueJS

Most developers are familiar with ESLint — one of the most popular Linter tools that can help you keep your code consistent with best practices and readable in large code bases.

VueJS has its own ESLint plugin to check the syntax of individual file components. I think it’s one of the best tools for writing maintainable and scalable code.

There’s nothing worse than looking at some old code and not even knowing where to start debugging it.

ESLint can help you stay organized, and as support for Vue3 increases, you’ll be writing extensible Vue projects.

Vue VSCode Snippets

Sarah Drasner’s VSCode extension will save you a lot of development time. It provides auto-populated code snippets for common Vue use cases. In her own words…

Focus on developer ergonomics from the perspective of Vue for real world use. These include parts that I’m personally tired of typing, as well as boilerplate files that help with quick deletion.

It is ideal for writing fast SFC, Vue instructions, and fast access lifecycle hooks.

Bookmarks

Many Vue developers’ VSCode extensions don’t really reach their full potential until they reach large projects.

That’s how Bookmarks works. This extension allows you to tag and name locations in your code. You can then switch between these different “Bookmarks” to speed up development.

Gone are the days when you had to carefully scroll up and down your files to find a feature.

Bracket Pair Colorizer

The Bracket Pair Colorizer does exactly what it says – it needs to match the brackets and give them a unique matching color.

While this may seem like a small detail, it can really help you fix pesky nesting errors, and it can help you, too.

I also enjoy the visuals — making my code colorful without making it too distracting.

It’s definitely worth a look.

Auto Rename Tag

Auto Rename Tag is a useful VSCode extension that will help prevent errors from appearing in your template code.

The Auto Rename Tag will automatically Rename another Tag whenever you change the HTML parenthesis pair of one Tag (either the opening or closing Tag).

This small optimization can help prevent so many errors, especially when working with large templates.

NPM Intellisense

When you write import statements in Javascript, NPM Intellisense automatically completes your NPM module.

This saves you the time needed to remember the exact name of an NPM module.

I’ve used it in a lot of my projects, and it’s definitely something I’ve become very used to.

conclusion

In summary, there are many VS Code extensions available to Vue developers.

While many of the changes in this list may seem trivial at first, these small changes can save you a lot of development time. I highly recommend at least trying everything.

Who knows — you might fall in love with some of them.

If you think there are other VS Code extensions worthy of making this list — let me know!

Welcome to pay attention to my public number – code non translation station, if you have a favorite foreign language technical articles, you can recommend to me through the public number message.