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: 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: [
'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
: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).