Official ESLint plugin for Vue.js

eslint-plugin-vue

Official ESLint plugin for Vue.js

:grey_exclamation: Requirements

• ESLint >=3.18.0.
  • >=4.7.0 to use eslint --fix.
  • >=4.14.0 to use with babel-eslint.
• Node.js >=4.0.0

:cd: Installation

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

:rocket: Usage

Create .eslintrc.* file to configure rules. See also: http://eslint.org/docs/user-guide/configuring.

Example .eslintrc.js:

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

Attention

All component-related rules are being applied to code that passes any of the following checks:

• Vue.component() expression
• Vue.extend() expression
• Vue.mixin() expression
• export default {} in .vue or .jsx file

If you however want to take advantage of our rules in any of your custom objects that are Vue components, you might need to use special comment // @vue/component that marks object in the next line as a Vue component in any file, e.g.:

// @vue/component
const CustomComponent = {
  name: 'custom-component',
  template: '<div></div>'
}

Vue.component('AsyncComponent', (resolve, reject) => {
  setTimeout(() => {
    // @vue/component
    resolve({
      name: 'async-component',
      template: '<div></div>'
    })
  }, 500)
})

eslint-disable functionality in <template>

You can use <!-- eslint-disable -->-like HTML comments in <template> of .vue files. For example:

<template>
  <!-- eslint-disable-next-line vue/max-attributes-per-line -->
  <div a="1" b="2" c="3" d="4">
  </div>
</template>

If you want to disallow eslint-disable functionality, please disable vue/comment-directive rule.

:gear: Configs

This plugin provides four predefined configs:

• plugin:vue/base - Settings and rules to enable correct ESLint parsing
• plugin:vue/essential - Above, plus rules to prevent errors or unintended behavior
• plugin:vue/strongly-recommended - Above, plus rules to considerably improve code readability and/or dev experience
• plugin:vue/recommended - Above, plus rules to enforce subjective community defaults to ensure consistency

:bulb: Rules

Rules are grouped by priority to help you understand their purpose. The --fix option on the command line automatically fixes problems reported by rules which have a wrench :wrench: below.

Base Rules (Enabling Correct ESLint Parsing)

Enforce all the rules in this category, as well as all higher priority rules, with:

{
  "extends": "plugin:vue/base"
}

Priority A: Essential (Error Prevention)

Enforce all the rules in this category, as well as all higher priority rules, with:

{
  "extends": "plugin:vue/essential"
}

GitHub