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
:exclamation: Attention - this is documentation for beta 3.0.0
:exclamation:
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.
:grey_exclamation: Requirements
- ESLint
>=3.18.0
. - Node.js
>=4.0.0
:cd: Installation
npm install --save-dev eslint eslint-plugin-vue@beta
:rocket: 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'
],
rules: {
'vue/no-invalid-v-if': 'error'
}
}
⚙ Configs
This plugin provides two predefined configs:
plugin:vue/base
- contains necessary settings for this plugin to work properlyplugin:vue/recommended
- extends base config with recommended rules (the ones with check mark :white_check_mark: in the table below)
:bulb: 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 :white_check_mark: below.
The --fix
option on the command line automatically fixes problems reported by rules which have a wrench :wrench: below.
Best Practices
Stylistic Issues
| Rule ID | Description |
---|
| html-quotes | enforce quotes style of HTML attributes. |
:wrench: | v-bind-style | enforce v-bind directive style. |
:wrench: | v-on-style | enforce v-on directive style. |
Variables
| Rule ID | Description |
---|
:white_check_mark: | jsx-uses-vars | Prevent variables used in JSX to be marked as unused |
Possible Errors