DEV Community

Cover image for Top VS Code Extensions For Vue.js Development
Deepak Sisodiya
Deepak Sisodiya

Posted on

Top VS Code Extensions For Vue.js Development

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
    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
    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

  3. 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
    Automatically finds, parses and provides code actions and code completion for all available imports.

  5. 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

  6. ESLint
    Integrates ESLint JavaScript into VS Code.

  7. Prettier
    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
    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
    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

  10. Plastic
    Plastic is my favourite theme for VS Code. Try it, you will love its simplicity.

Top comments (2)

Collapse
 
manuelojeda profile image
Manuel Ojeda

This one is really useful if you are doing TS with Vue:
marketplace.visualstudio.com/items...

Collapse
 
deepaksisodiya profile image
Deepak Sisodiya

Currently, I am not using TS but. but thank you for the suggestion. I will try it when I will use TS. May be with Vue 3.