Top VS Code Extensions For Vue.js Development
Tags: javascript, vue, vscode, productivity
Published: 2019-10-11 07:52:03

I have beeing using VS Code from last around 2 years. Before that, I was using webstorm for JavaScript development. But I found the VS Code more useful. Now it is my primary editor for any JavaScript development. The most important feature of VS Code is that it has a lot of plugins for your specific requirement. This makes it easy to use for everyone whether he/she is an experienced developer or new developer. Today I am sharing some useful extension for Vue.js development.

1. [Vetur](https://marketplace.visualstudio.com/items?itemName=octref.vetur)
This is the most useful plugins for Vue.js development. This plugin is specific to vue.js development. It has Syntax-highlighting, Snippet support, Formatting, lots of Framework Support and more. checkout https://vuejs.github.io/vetur/

2. [Quokka.js](https://quokkajs.com/docs/)
This one is my favourite. Generally, when we want to do some stuff in JavaScript we will go to either jsbin or jsfiddle or codepan. But this plugin gives the same thing in VS Code itself. Like
 ![Alt text of image](https://miro.medium.com/max/2348/1*kWbMpYUy0R1KcdTvCU_DzQ.png)

3. [Auto Close Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag)
This plugins automatically add HTML/XML close tag. From VS Code 1.16, it has built-in close tag support for HTML, Handlebars and Razor files. This extension is enabled for other languages like XML, PHP, Vue, JavaScript, TypeScript, JSX, TSX and so on. It is configurable.

4. [Auto Import](https://marketplace.visualstudio.com/items?itemName=steoates.autoimport&ssr=false#review-details)
Automatically finds, parses and provides code actions and code completion for all available imports.

5. [Bracket Pair Colorizer](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer)
This extension allows matching brackets to be identified with colours. The user can define which characters to match, and which colours to use. Like
![Alt text of image](https://miro.medium.com/max/3684/1*BN02cbEumNG0VWoeQMwLzw.png)

6. [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
Integrates ESLint JavaScript into VS Code.

7. [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
It is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.

8. [GitLens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)
This is a very useful plugin. It adds Git capabilities built into Visual Studio Code — Visualize code authorship at a glance via Git blame annotations and code len and many more things.

9. [Better Comments](https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments)
The Better Comments extension will help you create more human-friendly comments in your code. It highlights your comments with colour. Like
![Alt text of image](https://miro.medium.com/max/2284/1*BAPRm0wpNy_ZQD3q6tP5TA.png)

10. [Plastic](https://marketplace.visualstudio.com/items?itemName=will-stone.plastic)
Plastic is my favourite theme for VS Code. Try it, you will love its simplicity.