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/no-invalid-v-if': 'error'
  }
}

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

Deprecated rules witch should be used with caution and only enabled when you know what you are doing have a warning ⚠️ icon.

Stylistic Issues

	Rule ID	Description
🔧	attribute-hyphenation	Define a style for the props casing in templates.
	html-quotes	enforce quotes style of HTML attributes.
🔧	name-property-casing	Requires specific casing for the name property in Vue components
🔧	v-bind-style	enforce v-bind directive style.
🔧	v-on-style	enforce v-on directive style.

Best Practices

	Rule ID	Description
🔧	html-end-tags	enforce end tag style.
🔧⚠️	html-no-self-closing	disallow self-closing elements. - (deprecated)
	no-async-in-computed-properties	Check if there are no asynchronous actions inside computed properties.
✅	no-confusing-v-for-v-if	disallow confusing v-for and v-if on the same element.
	no-duplicate-attributes	disallow duplicate attributes.
	no-side-effects-in-computed-properties	Don't introduce side effects in computed properties
✅	no-textarea-mustache	disallow mustaches in <textarea>.
	order-in-components	Keep order of properties in components
✅	require-component-is	require v-bind:is of <component> elements.
	require-prop-types	Prop definitions should be detailed
✅	require-v-for-key	require v-bind:key with v-for directives.

Variables

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

Possible Errors

	Rule ID	Description
	no-dupe-keys	Prevents duplication of field names.
✅	no-invalid-template-root	disallow invalid template root.
✅	no-invalid-v-bind	disallow invalid v-bind directives.
✅	no-invalid-v-cloak	disallow invalid v-cloak directives.
✅	no-invalid-v-else-if	disallow invalid v-else-if directives.
✅	no-invalid-v-else	disallow invalid v-else directives.
✅	no-invalid-v-for	disallow invalid v-for directives.
✅	no-invalid-v-html	disallow invalid v-html directives.
✅	no-invalid-v-if	disallow invalid v-if directives.
✅	no-invalid-v-model	disallow invalid v-model directives.
✅	no-invalid-v-on	disallow invalid v-on directives.
✅	no-invalid-v-once	disallow invalid v-once directives.
✅	no-invalid-v-pre	disallow invalid v-pre directives.
✅	no-invalid-v-show	disallow invalid v-show directives.
✅	no-invalid-v-text	disallow invalid v-text directives.
✅	no-parsing-error	disallow parsing errors in <template>.
	no-reservered-keys	Prevent overwrite reserved keys.
	no-shared-component-data	Enforces component's data property to be a function.
	no-template-key	disallow key attribute on <template>.
	require-render-return	Enforces render function to always return value.
	return-in-computed-property	Enforces that a return statement is present in computed property.

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