Official ESLint plugin for Vue.js

README.md

eslint-plugin-vue

NPM version NPM downloads CircleCI

Official ESLint plugin for Vue.js

❗️ Attention - this is documentation for version 5.x ❗️

This branch contains eslint-plugin-vue@next which is a pre-released 5.0, but it's not the default version that you get with npm install eslint-plugin-vue. In order to install this you need to specify either "eslint-plugin-vue": "next" in package.json or do npm install eslint-plugin-vue@next.

Please try it and report any issues that you might have encountered.

If you want to check previous releases go here.

🎨 Playground on the Web

You can try this plugin on the Web.

Requirements

  • ESLint ^5.0.0.
  • Node.js >=6.5.0

💿 Installation

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

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

Single File Components

ESLint only targets .js files by default. You must include the .vue extension using the --ext option or a glob pattern.

Examples:

eslint --ext .js,.vue src
eslint src/**/*.{js,vue}

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.

⚙️ 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

💡 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 🔧 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)

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

{
  "extends": "plugin:vue/essential"
}
Rule ID Description
vue/no-async-in-computed-properties disallow asynchronous actions in computed properties
vue/no-dupe-keys disallow duplication of field names
vue/no-duplicate-attributes disallow duplication of attributes
vue/no-parsing-error disallow parsing errors in <template>
vue/no-reserved-keys disallow overwriting reserved keys
🔧 vue/no-shared-component-data enforce component's data property to be a function
vue/no-side-effects-in-computed-properties disallow side effects in computed properties
vue/no-template-key disallow key attribute on <template>
vue/no-textarea-mustache disallow mustaches in <textarea>
vue/no-unused-components disallow registering components that are not used inside templates
vue/no-unused-vars disallow unused variable definitions of v-for directives or scope attributes
vue/no-use-v-if-with-v-for disallow use v-if on the same element as v-for
vue/require-component-is require v-bind:is of <component> elements
🔧 vue/require-prop-type-constructor require prop type to be a constructor
vue/require-render-return enforce render function to always return value
vue/require-v-for-key require v-bind:key with v-for directives
vue/require-valid-default-prop enforce props default values to be valid
vue/return-in-computed-property enforce that a return statement is present in computed property
vue/valid-template-root enforce valid template root
vue/valid-v-bind enforce valid v-bind directives
vue/valid-v-cloak enforce valid v-cloak directives
vue/valid-v-else-if enforce valid v-else-if directives
vue/valid-v-else enforce valid v-else directives
vue/valid-v-for enforce valid v-for directives
vue/valid-v-html enforce valid v-html directives
vue/valid-v-if enforce valid v-if directives
vue/valid-v-model enforce valid v-model directives
vue/valid-v-on enforce valid v-on directives
vue/valid-v-once enforce valid v-once directives
vue/valid-v-pre enforce valid v-pre directives
vue/valid-v-show enforce valid v-show directives
vue/valid-v-text enforce valid v-text directives

Priority B: Strongly Recommended (Improving Readability)

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

{
  "extends": "plugin:vue/strongly-recommended"
}
Rule ID Description
🔧 vue/attribute-hyphenation enforce attribute naming style on custom components in template
🔧 vue/html-closing-bracket-newline require or disallow a line break before tag's closing brackets
🔧 vue/html-closing-bracket-spacing require or disallow a space before tag's closing brackets
🔧 vue/html-end-tags enforce end tag style
🔧 vue/html-indent enforce consistent indentation in <template>
🔧 vue/html-self-closing enforce self-closing style
🔧 vue/max-attributes-per-line enforce the maximum number of attributes per line
🔧 vue/mustache-interpolation-spacing enforce unified spacing in mustache interpolations
🔧 vue/name-property-casing enforce specific casing for the name property in Vue components
🔧 vue/no-multi-spaces disallow multiple spaces
vue/no-template-shadow disallow variable declarations from shadowing variables declared in the outer scope
🔧 vue/prop-name-casing enforce specific casing for the Prop name in Vue components
vue/require-default-prop require default value for props
vue/require-prop-types require type definitions in props
🔧 vue/v-bind-style enforce v-bind directive style
🔧 vue/v-on-style enforce v-on directive style

Priority C: Recommended (Minimizing Arbitrary Choices and Cognitive Overhead)

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

{
  "extends": "plugin:vue/recommended"
}
Rule ID Description
🔧 vue/attributes-order enforce order of attributes
🔧 vue/html-quotes enforce quotes style of HTML attributes
vue/no-v-html disallow use of v-html to prevent XSS attack
🔧 vue/order-in-components enforce order of properties in components
vue/this-in-template enforce usage of this in template

Uncategorized

Rule ID Description
🔧 vue/component-name-in-template-casing enforce specific casing for the component naming style in template
🔧 vue/multiline-html-element-content-newline require a line break before and after the contents of a multiline element
🔧 vue/no-spaces-around-equal-signs-in-attribute disallow spaces around equal signs in attribute
🔧 vue/script-indent enforce consistent indentation in <script>
🔧 vue/singleline-html-element-content-newline require a line break before and after the contents of a singleline element

Deprecated

  • ⚠️ We're going to remove deprecated rules in the next major release. Please migrate to successor/new rules.
  • 😇 We don't fix bugs which are in deprecated rules since we don't have enough resources.
Rule ID Replaced by
vue/no-confusing-v-for-v-if vue/no-use-v-if-with-v-for

👫 FAQ

What is the "Use the latest vue-eslint-parser" error?

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.

Why doesn't it work on .vue file?

  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"
  ]
  1. 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. If you use @vue/cli-plugin-eslint and the vue-cli-service lint command - you don't have to worry about it.
  • VSCode targets only JavaScript or HTML files by default. You have to add "vue" to the "eslint.validate" array in vscode settings. e.g. "eslint.validate": [ "javascript", "javascriptreact", "vue" ]
  • If you use Vetur plugin in VSCode - set "vetur.validation.template": false to avoid default Vetur template validation. Check out vetur documentation for more info.

⚓️ Semantic Versioning Policy

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

📰 Changelog

We're using GitHub Releases.

🍻 Contribution guide

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.

Working with rules

Before you start writing new rule, please read the official ESLint guide.

Next in order to get an idea how does the AST of the code that you want to check looks like, you can use one of the following applications:

  • astexplorer.net - best tool to inspect ASTs, but it doesn't support Vue templates yet
  • ast.js.org - not fully featured, but supports Vue templates syntax

Since single file components in Vue are not plain JavaScript, we can't use the default parser, and we had to introduce additional one: vue-eslint-parser, that generates enhanced AST with nodes that represent specific parts of the template syntax, as well as what's inside the <script> tag.

To know more about certain nodes in produced ASTs, go here:

The vue-eslint-parser provides few useful parser services, to help traverse the produced AST and access tokens of the template:

  • context.parserServices.defineTemplateBodyVisitor(visitor, scriptVisitor)
  • context.parserServices.getTemplateBodyTokenStore()

Check out an example rule to get a better understanding of how these work.

Please be aware that regarding what kind of code examples you'll write in tests, you'll have to accordingly setup the parser in RuleTester (you can do it on per test case basis though). See an example here

If you'll stuck, remember there are plenty of rules you can learn from already, and if you can't find the right solution - don't hesitate to reach out in issues. We're happy to help!

🔒 License

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