What is eslint-plugin-vue?
The eslint-plugin-vue npm package is a plugin for ESLint specifically designed for Vue.js applications. It provides linting rules that are tailored to the Vue.js framework, helping developers to write consistent and error-free code by following best practices and avoiding common mistakes.
What are eslint-plugin-vue's main functionalities?
Style Guide Enforcement
Enforces a style guide by limiting the number of attributes per line in Vue templates. This helps in maintaining readability and consistency in the codebase.
"vue/max-attributes-per-line": ["error", { "singleline": 3, "multiline": { "max": 1, "allowFirstLine": false } }]
Component Naming
Ensures that component names in templates are written in a specific case, such as PascalCase, which is a common convention in Vue.js projects.
"vue/component-name-in-template-casing": ["error", "PascalCase"]
Avoiding Deprecated Features
Prevents the use of deprecated features like the 'slot' attribute, encouraging developers to use the updated syntax and features of Vue.js.
"vue/no-deprecated-slot-attribute": "error"
Prop Validation
Ensures that every prop has a default value, which can prevent bugs and make the components more predictable.
"vue/require-default-prop": "error"
Script Indentation
Enforces consistent indentation in the script section of Vue single-file components, which improves code readability and maintainability.
"vue/script-indent": ["error", 2, { "baseIndent": 1, "switchCase": 1, "ignores": [] }]
Other packages similar to eslint-plugin-vue
eslint-plugin-react
Similar to eslint-plugin-vue, eslint-plugin-react provides linting rules specific to React applications. It helps enforce best practices and conventions for React components, JSX syntax, and more.
eslint-plugin-angular
This plugin is designed for Angular applications and offers linting rules that cater to the Angular framework's structure and coding styles, similar to how eslint-plugin-vue serves Vue.js developers.
eslint-plugin-svelte3
For developers using Svelte, eslint-plugin-svelte3 provides linting rules tailored to the Svelte framework. It helps maintain code quality and consistency in a way that's analogous to eslint-plugin-vue's role for Vue.js.
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
. - 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()
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
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.
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).