Using ESLint to enforce the Vue.js Style Guide

Mar 31, 2018

Setting up ESLint with the Vue.js plugin to enforce the official Vue.js Style Guide just needs 2 simple steps and is done in a minute.

First run npm install --save-dev eslint eslint-plugin-vue.

Next create a file named .eslintrc.js in your project root directory

module.exports = {
  extends: [
    //'eslint:recommended',
    'plugin:vue/recommended'
  ],
  rules: {
    // override/add rules settings here, such as:
    // 'vue/no-unused-vars': 'error'
  },
  env: {
    amd: true
  }
}

The amd setting is only needed if you want to use AMD style modules.

Now just run it like this: ./node_modules/.bin/eslint {dir} --fix --ext .vue and replace dir with the directory you want to run it on to let the plugin fix all style guide violations it can.

Check the plugins GitHub page for which rules it can fix automatically.