Adding the right VS Code extension in Visual Studio can make your life easier as a developer.
They can help format, scale, enforce best practices, automate many forgettable tasks during development. They can also be just interesting extensions that make our code look prettier/easier to write.
As a Vue enthusiast, I spent a lot of time looking for the best VS Code extensions for Vue developers. Here are some ways to make my life so easy.
Ready?
Let's get to the point straight.
Vetur
If you downloaded a VS Code extension from this post, it must be Vetur.
A Vue toolkit for VS Code – it provides Vue-specific syntax highlighting, code snippets of common code, and more that all Vue developers need.
Vetur is well maintained – it even provides support for Vue3 Typescript.
There is really not much else to say about Vetur - you understand. This will make your development better.
ESLint Plugin VueJS
Most developers are familiar with ESLint – one of the most popular linter tools that 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 a single file component. I think it is one of the best tools for writing maintainable and scalable code.
There is 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 will write scalable Vue projects.
Vue VSCode Snippets
Sarah Drasner's VSCode extension will save you a lot of development time. It provides auto-filled code snippets for commonly used Vue use cases. In her own words...
Focus on the ergonomics of developers from the perspective of real-world use Vue. This includes the parts that I personally get tired of typing, and boilerplate files that help quickly delete.
It is great for writing fast sfc, Vue instructions, and quick access to lifecycle hooks.
Bookmarks
Many Vue developers' VSCode extensions don't really show their full potential until they get into a large project.
That's how Bookmarks work. This extension allows you to tag and name locations in your code. You can then switch between these different "Bookmarks" to improve development speed.
In order to find a feature, you need to carefully scroll your file up and down, and these days are gone.
Bracket Pair Colorizer
Bracket Pair Colorizer does what it says - it needs to match brackets and give them unique matching colors.
While this may seem like a small detail, it can really help you fix nasty nesting errors and it can help you.
I also enjoyed the visuals of doing this – making my code rich in color without making it too distracting.
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.
Whenever you change the HTML bracket pair of one tag (whether it is the start or end tag), the Auto Rename Tag will automatically rename another one.
This small optimization can help prevent so many errors, especially when dealing with large templates.
NPM Intellisense
When you write import statements in Javascript, NPM Intellisense will automatically complete your NPM module.
This saves you time remembering 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.
in conclusion
Anyway, there are a lot of VS Code extensions available to Vue developers.
While many of the modifications on this list may seem trivial at the beginning, these small modifications can save you a lot of development time. I highly recommend trying at least all of them.
Who knows - you might fall in love with some of them.
If you think there are other VS Code extensions worth it on this list – please let me know!
This is the end of this article about the 7 best VSCode extensions for Vue developers. For more related Vue VSCode extensions, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!