Top 3 VSCode Plugins for VueJS Development

Here we explore shortly top 3 Plugins for VueJS Development in VSCode. Note that we left out vuedevtools, since it is not a VSCode Plugin, but a very powerful tool indeed.

#1: Vetur

Vetur is THE Plugin for VSCode that makes your life easier. The most important part of it is the autocomplete feature. It will auto recognize your data and computed properties. That way be able to use autocomplete on your variables, that were defined in another part of your VueJS Object (data, computed).

 

Vetur Autocomplete

Download: https://marketplace.visualstudio.com/items?itemName=octref.vetur

How to become a Vue.js Developer?

We've got something for you. Check out the VueJS Junior Course. In this online course you will dive deep into how Components work and how you can quickly create a Vue.js Website.

#2: Vue 2 Snippets

Now Vue 2 Snippets makes your life easier if you are starting with a new project or if you like to experiment. In both cases, the plugin has a great variety of Code Snippets that will save you a lot of typing and remembering. As an example below: Whenever you create a new Single File Component in VueJS (.vue File), you have to create a template, script and style tag. Now that becomes really annoying after a few Components. Vue 2 Snippets comes to help.

VueJS Snippets Single FIle Component

Download: https://marketplace.visualstudio.com/items?itemName=hollowtree.vue-snippets

 

#3: ESlint

Now the obvious part. As your code grows, it is beneficial to have style guidelines, so that your code looks the same everywhere. This will make you happy in the future when you will work on your Components again. ESLint will also make your Co-Workers happy for a readable code. 

Download: https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

 

For Debugging Tools refer to: https://vuejs.org/v2/cookbook/debugging-in-vscode.html

Leave a comment

Please note, comments must be approved before they are published