Official ESLint plugin for Vue.js
You can try this plugin on the Web.
- ESLint
>=3.18.0
. - 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()
expressionVue.extend()
expressionVue.mixin()
expressionexport 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 two predefined configs:
plugin:vue/base
- Settings and rules to enable correct ESLint parsingplugin:vue/essential
- Above, plus rules to prevent errors or unintended behaviorplugin:vue/strongly-recommended
- Above, plus rules to considerably improve code readability and/or dev experienceplugin: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"
}
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 |
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-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 |
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 in template |
π§ | 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/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 |
Enforce all the rules in this category, as well as all higher priority rules, with:
{
"extends": "plugin:vue/recommended"
}
Rule ID | Description | |
---|---|---|
π§ | 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 | |
---|---|---|
π§ | 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/script-indent | enforce consistent indentation in <script> |
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.
It depends on the version of eslint you're using.
indent rule in [email protected]
makes it possible, but if you use [email protected]
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.
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).