Official ESLint plugin for Vue.js

Usage no npm install needed!

<script type="module">
  import vueEslintPlugin from 'https://cdn.skypack.dev/@vue/eslint-plugin';



NPM version NPM downloads CircleCI

Official ESLint plugin for Vue.js

:art: Playground on the Web

You can try this plugin on the Web.

:grey_exclamation: Requirements

  • ESLint >=3.18.0.
  • Node.js >=4.0.0

:cd: Installation

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

: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',
  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
  • 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
      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:

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

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

:gear: Configs

This plugin provides two 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)

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
:wrench: @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-vars disallow unused variable definitions of v-for directives or scope attributes
@vue/require-component-is require v-bind:is of <component> elements
@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
:wrench: @vue/attribute-hyphenation enforce attribute naming style in template
:wrench: @vue/html-end-tags enforce end tag style
:wrench: @vue/html-indent enforce consistent indentation in <template>
:wrench: @vue/html-self-closing enforce self-closing style
@vue/max-attributes-per-line enforce the maximum number of attributes per line
:wrench: @vue/mustache-interpolation-spacing enforce unified spacing in mustache interpolations
:wrench: @vue/name-property-casing enforce specific casing for the name property in Vue components
:wrench: @vue/no-multi-spaces disallow multiple spaces
@vue/require-default-prop require default value for props
@vue/require-prop-types require type definitions in props
:wrench: @vue/v-bind-style enforce v-bind directive style
:wrench: @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
:wrench: @vue/html-quotes enforce quotes style of HTML attributes
@vue/no-confusing-v-for-v-if disallow confusing v-for and v-if on the same element
@vue/order-in-components enforce order of properties in components
@vue/this-in-template enforce usage of this in template


Rule ID Description
:wrench: @vue/html-closing-bracket-newline require or disallow a line break before tag's closing brackets
:wrench: @vue/html-closing-bracket-spacing require or disallow a space before tag's closing brackets
:wrench: @vue/script-indent enforce consistent indentation in <script>

:couple: 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.

Can my javascript code have increased indentation?

It depends on the version of eslint you're using.

indent rule in eslint@3.x makes it possible, but if you use eslint@4.x be aware that this rule has been rewritten and is more strict now, thus it doesn't allow to have increased initial indentation.

You can however use indent-legacy rule instead. More informations here.

:anchor: Semantic Versioning Policy

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

:newspaper: Changelog

We're using GitHub Releases.

:beers: 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.

:lock: License

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