2019 Top Vue Visual Studio Code Extensions
At the time of writing this, my go-to editor is VS Code.
One of the crucial factors that helps us developers decide on which editor to use is the tooling support and the community around it and VS Code has both of these with an awesome community around it.
In this post I will be listing out all my favorite Vue VS Code extensions that have boosted my productivity while working on Vue applications.
I am aiming to keep this up to date as much as possible, so here is the list for 2019:
You can skip to the end of the page to find the full list with links.
Must Haves
These extensions are the must haves for any Vue developer in my opinion and all of them have been very popular recently.
Vetur
Allows quickly jumping to or peeking into files that are referenced as components or modules
ESLint
Integrates ESLint into VS Code
Vue VSCode Snippets
Makes you type less.
Prettier
Package to format your JavaScript / TypeScript / CSS using Prettier.
Auto Rename Tag
Automatically renames paired HTML/XML tag.
Debugger for Chrome
Makes life a lot easier when working with debugging any JavaScript code in VS Code.
Personal Favorites
These extensions are my personal favorites which I find helpful anytime I write Vue code.
Code Metrics
Computes complexity in TypeScript / JavaScript / Lua files.
TSlint
Integrates TSLint into VS Code. If you are not linting your code you should start doing it from today!
Bonus: Here is my own ts-linter config file which I try to keep up to date with the latest recommendations.
json2ts
How many times you had to copy the API's json response and make interfaces out of it? This small extension will make this process smoother, you are welcome!
Vue Peek
Allows quickly jumping to or peeking into files that are referenced as components or modules.
Generic extensions
These extensions are more generic but I strongly recommend checking them out.
Formatting Toggle
Allows you to toggle the formatter (Prettier, Beautify, …) ON and OFF with a simple click.
Auto Close Tag
Automatically adds HTML/XML close tag.
Bracket Pair Colorizer
Allows matching brackets to be identified with colors.
Path Intellisense
Autocompletes filenames.
npm
Supports running npm scripts defined in the package.json file and validating the installed modules against the dependencies defined in the package.json.
npm Intellisense
Autocompletes npm modules in import statements.
EditorConfig
Awesome for maintaining consistent configurations for VS Code.
That is it folks, happy productive coding!
You can find a similar list for Angular here.
Shortlist:
