Official ESLint plugin for Vue.js

You can try this plugin on the Web.

• https://mysticatea.github.io/vue-eslint-demo/

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

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

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'
  }
}

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)
})

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.

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

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 🔧 below.

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

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

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

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

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

{
  "extends": "plugin:vue/strongly-recommended"
}

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

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

The most rules of eslint-plugin-vue require vue-eslint-parser to check <template> ASTs.

Make sure you have one of the following settings in your .eslintrc:

• "extends": ["plugin:vue/recommended"]
• "extends": ["plugin:vue/base"]

If you already use other parser (e.g. "parser": "babel-eslint"), please move it into parserOptions, so it doesn't collide with the vue-eslint-parser used by this plugin's configuration:

- "parser": "babel-eslint",
  "parserOptions": {
+     "parser": "babel-eslint",
      "ecmaVersion": 2017,
      "sourceType": "module"
  }

The vue-eslint-parser uses the parser which is set by parserOptions.parser to parse scripts.

1. Make sure you don't have eslint-plugin-html in your config. The eslint-plugin-html extracts the content from <script> tags, but eslint-plugin-vue requires <script> tags and <template> tags in order to distinguish template and script in single file components.

  "plugins": [
    "vue",
-   "html"
  ]

2. Make sure your tool is set to lint .vue files.

• CLI targets only .js files by default. You have to specify additional extensions by --ext option or glob patterns. E.g. eslint "src/**/*.{js,vue}" or eslint src --ext .vue.
• VSCode targets only JavaScript or HTML files by default. You have to add {"autoFix": true, "language": "vue"} into eslint.validate entry.

This plugin follows semantic versioning and ESLint's Semantic Versioning Policy.

We're using GitHub Releases.

In order to add a new rule, you should:

• Create issue on GH with description of proposed rule
• Generate a new rule using the official yeoman generator
• Run npm start
• Write test scenarios & implement logic
• Describe the rule in the generated docs file
• Make sure all tests are passing
• Run npm run update in order to update readme and recommended configuration
• Create PR and link created issue in description

We're more than happy to see potential contributions, so don't hesitate. If you have any suggestions, ideas or problems feel free to add new issue, but first please make sure your question does not repeat previous ones.

See the LICENSE file for license rights and limitations (MIT).