eslint-plugin-vue

Official ESLint plugin for Vue.js

❗ Attention - this is documentation for beta 3.0.0 ❗

This branch contains eslint-plugin-vue@beta which is pre-released 3.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": "beta" in package.json or do npm install eslint-plugin-vue@beta.

Please try it and report any issues that you might experience.

If you want to check previous releases go here.

❕ Requirements

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

💿 Installation

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

🚀 Usage

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

Example .eslintrc.js:

module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:vue/recommended' // or 'plugin:vue/base'
  ],
  rules: {
    // override/add rules' settings here
    'vue/valid-v-if': 'error'
  }
}

Attention

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
    resolve({
      name: 'async-component',
      template: '<div></div>'
    })
  }, 500)
})

⚙️ Configs

This plugin provides two predefined configs:

• plugin:vue/base - contains necessary settings for this plugin to work properly
• plugin:vue/recommended - extends base config with recommended rules (the ones with check mark ✅ in the table below)

💡 Rules

Rules are grouped by category to help you understand their purpose.

No rules are enabled by plugin:vue/base config. The plugin:vue/recommended config enables rules that report common problems, which have a check mark ✅ below.

The --fix option on the command line automatically fixes problems reported by rules which have a wrench 🔧 below.

Possible Errors

	Rule ID	Description
	no-dupe-keys	disallow duplication of field names
✅	no-parsing-error	disallow parsing errors in <template>
	no-reserved-keys	disallow overwriting reserved keys
	no-shared-component-data	enforce component's data property to be a function
	no-template-key	disallow key attribute on <template>
	no-unused-vars	disallow unused variable definitions of v-for directives or scope attributes
	require-render-return	enforce render function to always return value
	require-valid-default-prop	enforce props default values to be valid
	return-in-computed-property	enforce that a return statement is present in computed property
✅	valid-template-root	enforce valid template root
✅	valid-v-bind	enforce valid v-bind directives
✅	valid-v-cloak	enforce valid v-cloak directives
✅	valid-v-else-if	enforce valid v-else-if directives
✅	valid-v-else	enforce valid v-else directives
✅	valid-v-for	enforce valid v-for directives
✅	valid-v-html	enforce valid v-html directives
✅	valid-v-if	enforce valid v-if directives
✅	valid-v-model	enforce valid v-model directives
✅	valid-v-on	enforce valid v-on directives
✅	valid-v-once	enforce valid v-once directives
✅	valid-v-pre	enforce valid v-pre directives
✅	valid-v-show	enforce valid v-show directives
✅	valid-v-text	enforce valid v-text directives

Best Practices

	Rule ID	Description
🔧	html-end-tags	enforce end tag style
	no-async-in-computed-properties	disallow asynchronous actions in computed properties
✅	no-confusing-v-for-v-if	disallow confusing v-for and v-if on the same element
	no-duplicate-attributes	disallow duplication of attributes
	no-side-effects-in-computed-properties	disallow side effects in computed properties
✅	no-textarea-mustache	disallow mustaches in <textarea>
	order-in-components	enforce order of properties in components
✅	require-component-is	require v-bind:is of <component> elements
	require-default-prop	require default value for props
	require-prop-types	require type definitions in props
✅	require-v-for-key	require v-bind:key with v-for directives
	this-in-template	enforce usage of this in template

Stylistic Issues

	Rule ID	Description
🔧	attribute-hyphenation	enforce attribute naming style in template
🔧	html-indent	enforce consistent indentation in <template>
	html-quotes	enforce quotes style of HTML attributes
🔧	html-self-closing	enforce self-closing style
	max-attributes-per-line	enforce the maximum number of attributes per line
🔧	mustache-interpolation-spacing	enforce unified spacing in mustache interpolations
🔧	name-property-casing	enforce specific casing for the name property in Vue components
🔧	no-multi-spaces	disallow multiple spaces
🔧	v-bind-style	enforce v-bind directive style
🔧	v-on-style	enforce v-on directive style

Variables

	Rule ID	Description
✅	jsx-uses-vars	prevent variables used in JSX to be marked as unused

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
html-no-self-closing	html-self-closing
no-invalid-template-root	valid-template-root
no-invalid-v-bind	valid-v-bind
no-invalid-v-cloak	valid-v-cloak
no-invalid-v-else-if	valid-v-else-if
no-invalid-v-else	valid-v-else
no-invalid-v-for	valid-v-for
no-invalid-v-html	valid-v-html
no-invalid-v-if	valid-v-if
no-invalid-v-model	valid-v-model
no-invalid-v-on	valid-v-on
no-invalid-v-once	valid-v-once
no-invalid-v-pre	valid-v-pre
no-invalid-v-show	valid-v-show
no-invalid-v-text	valid-v-text
no-reservered-keys	no-reserved-keys

👫 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.

⚓ 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.

🔒 License

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