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:

  1. Vetur
  2. ESLint
  3. Vue VSCode Snippets
  4. Prettier
  5. Auto Rename Tag
  6. Debugger for Chrome
  7. Code Metrics
  8. TSlint
  9. json2ts
  10. Vue Peek
  11. Formatting Toggle
  12. Auto Close Tag
  13. Bracket Pair Colorizer
  14. Path Intellisense
  15. npm
  16. npm Intellisense
  17. EditorConfig


Author image

Learn how to build scalable, fast and accessible web applications.

Follow us on Twitter

hello@nordschool.com