eslint-plugin-vue
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
.
>=4.7.0
to use eslint --fix
.>=4.14.0
to use with babel-eslint
.
- Node.js
>=4.0.0
:cd: Installation
npm install --save-dev eslint eslint-plugin-vue
:rocket: Usage
Create .eslintrc.*
file to configure rules. See also: http://eslint.org/docs/user-guide/configuring.
Example .eslintrc.js:
module.exports = {
extends: [
'plugin:vue/essential'
],
rules: {
}
}
Attention
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.:
const CustomComponent = {
name: 'custom-component',
template: '<div></div>'
}
Vue.component('AsyncComponent', (resolve, reject) => {
setTimeout(() => {
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>
<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.
:gear: Configs
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
: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"
}
Priority A: Essential (Error Prevention)
Enforce all the rules in this category, as well as all higher priority rules, with:
{
"extends": "plugin:vue/essential"
}
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"
}
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"
}
Uncategorized
: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.
Why doesn't it work on .vue file?
- Make sure you don't have
eslint-plugin-html
in your config. The eslint-plugin-html
extracts the content from <script>
tags, but eslint-vue-plugin
requires <script>
tags and <template>
tags in order to distinguish template and script in single file components.
"plugins": [
"vue",
- "html"
]
- 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
. - VSCode targets only JavaScript or HTML files by default. You have to add
{"autoFix": true, "language": "vue"}
into eslint.validate
entry.
: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).