Linting

Code style is important and eslint can significantly improve the way we write our code.

Installation

Start by installing the required packages.

$ npm install --save-dev eslint eslint-config-vue eslint-plugin-vue

Create a new file ./.eslintrc and add the configuration below.

{
  extends: ['vue'],
  plugins: ['vue'],
  rules: {}
}

Open ./package.json and define a new command.

{
  "scripts": {
    "lint": "eslint ./src --ext .js --ext .vue"
  }
}

You can now run the npm run lint command to verify your code.

Configuring Text Editor

Atom

If you are using Atom then install the linter-eslint plugin. This will automatically install also the linter plugin.

After installation under Preferences open the Packages tab, find the linter-eslint plugin and click on the Settings button. Search for Lint HTML Files option and make sure it's marked as checked. This will enable linting in the .vue files.