Official ESLint plugin for Vue.js

eslint-plugin-vue

: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 -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"
}

	Rule ID	Description
	vue/comment-directive	support comment-directives in `<template>`
	vue/jsx-uses-vars	prevent variables used in JSX to be marked as unused

Priority A: Essential (Error Prevention)