How to setup VSCode for Vuejs (JavaScript) development

Visual Studio Code is a lightweight but powerful & fast cross platform source code editor. Although It comes with built-in support for JavaScript, TypeScript and Node.js and has a rich ecosystem of extensions for other languages (such as C++, C#, Python, PHP, Go) and runtimes (such as .NET and Unity).

In this post I will explain how to get best possible development experience for VueJs using VSCode using available extensions and configuration options.

Installation

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.

Setup ESLint

ESLint is a configurable linter tool for identifying and reporting on patterns in JavaScript and HTML/VUE files.

ESLint Installation

Add these to dev dependies of your project package.json.

"eslint": "^3.19.0",
"eslint-friendly-formatter": "^2.0.7",
"eslint-loader": "^1.7.1",
"eslint-plugin-html": "^2.0.0",
"eslint-config-standard": "^6.2.1",
"eslint-plugin-promise": "^3.4.0",
"eslint-plugin-standard": "^2.0.1"

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

Configure ESLint

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.

"eslint.enable": true, //Enable eslint
"eslint.options": {
"extensions": [ //List of file extensions to activate eslint
  ".html",
  ".js",
  ".vue",
  ".jsx"
  ]
},
"eslint.validate": [{ //list of extensions to validate
  "language": "html",
  "autoFix": true
},
{
  "language": "vue",
  "autoFix": true //Autofix any fixable errors when linting
},
{
  "language": "javascript",
  "autoFix": true
},
{
  "language": "javascriptreact",
  "autoFix": true
}
],
// Run the linter on save (onSave) or on type (onType)
"eslint.run": "onSave",
"eslint.autoFixOnSave": true //Autofix any fixable errors when linting

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:

{
  "env": {
    "browser": true,
    "commonjs": true,
    "es6": true,
    "node": true
  },
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "sourceType": "module"
  },
  // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
  "extends": "standard",
  // required to lint *.vue files
  "plugins": [
    "html"
  ],
  "rules": {
    "no-const-assign": "warn",
    "no-this-before-super": "warn",
    "no-undef": "warn",
    "no-unreachable": "warn",
    "no-unused-vars": "warn",
    "constructor-super": "warn",
    "valid-typeof": "warn"
  }
}

What’s next

Now you are ready to devlop using VueJs with best support from VSCode for Code Format, Intellisense, Snippets, Tag Editing and Linting support.

Written on May 31, 2017