VS Code Extensions for Vue.js
Tags: vue, vscode, webdev, codenewbie
Published: 2020-01-13 21:49:14

VS Code is a popular lightweight text editor in the development community. It has a lot of features that are similar to other text editors like Sublime Text and Atom.
No doubt the power of the VS Code comes from the [marketplace](https://marketplace.visualstudio.com/vscode). One of the best features of Visual Studio Code is the tons of extensions offered by the market place. Mostly,  these extensions were customized to meet your needs.
 In this post, I will highlight a few of VS Code extensions for Vue.js that will help improve your code quality and increase productivity. 

## Vetur
![Vetur extension developed by Pine Wu](https://thepracticaldev.s3.amazonaws.com/i/f42m1zlea30lx247dqcu.png)
[Vetur](https://vuejs.github.io/vetur/) was created by Pine Wu and has been downloaded over 3.7 million times. This extension has the following helpful features :
- Syntax-highlighting
- Snippet
- Emmet
- Linting / Error Checking
- Formatting
- Auto Completion
- Debugging

## Vue 2 Snippets
![Vue 2 Snippets](https://thepracticaldev.s3.amazonaws.com/i/x4syig3mil0bp1byg5f5.png)
As the name suggests, [Vue 2 Snippets](https://marketplace.visualstudio.com/items?itemName=hollowtree.vue-snippets) extension adds Vue 2 code snippets to the VS Code. 

## Vue VSCode Snippets
![Vue VSCode Snippets](https://thepracticaldev.s3.amazonaws.com/i/pol5q1g6m0nsj4nh0b9c.png)
[Vue VSCode Snippets](https://marketplace.visualstudio.com/items?itemName=sdras.vue-vscode-snippets) extension was developed by Sarah Drasner. According to her, these snippets help supercharge your Vue workflow in the most seamless manner possible.

## Vue VS Code Extension Pack
![Vue VS Code Extension Pack](https://thepracticaldev.s3.amazonaws.com/i/41mk0n5yokbo9q0xotk0.png)
[Vue VS Code Extension Pack](https://marketplace.visualstudio.com/items?itemName=sdras.vue-vscode-extensionpack) is a collection of extensions for Vue in VS Code. Installing this extension will also install the following extensions as well :
- [Vetur](https://marketplace.visualstudio.com/items?itemName=octref.vetur&WT.mc_id=marketplace-pack-sdras)
- [Vue Snippers](https://marketplace.visualstudio.com/items?itemName=sdras.vue-vscode-snippets&WT.mc_id=marketplace-pack-sdras)
- [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode&WT.mc_id=marketplace-pack-sdras)
- [Formatting toggle](https://marketplace.visualstudio.com/items?itemName=tombonnike.vscode-status-bar-format-toggle&WT.mc_id=marketplace-pack-sdras)
- [Bracket Pair Colorizer](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer&WT.mc_id=marketplace-pack-sdras)
- [Bookmarks](https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks&WT.mc_id=marketplace-pack-sdras)
- [Jumpy](https://marketplace.visualstudio.com/items?itemName=wmaurer.vscode-jumpy&WT.mc_id=marketplace-pack-sdras)
- [NPM Intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense&WT.mc_id=marketplace-pack-sdras)
- [ES6 Snippets](https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets&WT.mc_id=marketplace-pack-sdras)
- [Night Owl](https://marketplace.visualstudio.com/items?itemName=sdras.night-owl&WT.mc_id=marketplace-pack-sdras)

## Conclusion
Finally, using VS Code can be fun but with the right extensions, you can supercharge your workflow. These VS Code extensions for Vue.js can help you increase productivity. 
Check out my post on [Styling Console Messages](https://anansewaa.com/styling-console-messages/).