In this post I will explain how to get best possible development experience for VueJs using VSCode using available extensions and configuration options.
Install Vue.js Extension Pack from the VSCode Market Place, which will automaticaly install all the required extensions.
Open VSCode and search for Vue.js Extension Pack in the extension store. Click install, wait for all the dependdies to finish install and then Restart VSCode.
Add these to dev dependies of your project
This will install ESLint and required ESLint plugins to enable linting support. You can also install these packages globallay using
npm install -g pakcage_name
Now we need to configure ESLint to enable linting support for
.vue files. There are two necessary steps to do this:
VSCode user settings
Open user settings from the menu (
Ctrl + , to open) and add the following settings.
Visual Studio Code Vue Js Example Java
Adding .eslintrc.json (in root of the project folder)
Now we need to add a rule configuration file for the ESLint in our project. This can be either done manualy, but recomended to use command line in VSCode. Press
CTRL + Shift + p to open command panel in VSCode, search
eslint and select
Create .eslintrc.json File in the list.
Make changes to
.eslintrc.json file to enable
vue eslint plugin make it look like this:
Visual Studio Code Vue Js Example Key
Now you are ready to devlop using VueJs with best support from VSCode for Code Format, Intellisense, Snippets, Tag Editing and Linting support.