What is eslint-plugin-react?
The eslint-plugin-react is a plugin for ESLint that provides linting utilities for React and JSX specific code. It helps developers adhere to best practices and avoid common pitfalls in React development.
What are eslint-plugin-react's main functionalities?
JSX-specific rules
Enforces rules specific to JSX, such as ensuring that any variables used in JSX are defined and that React is in scope when using JSX.
"react/jsx-uses-react": "error", "react/jsx-uses-vars": "error"
Hooks rules
Provides rules that enforce the correct usage of React Hooks, such as ensuring that hooks are called in the same order on every render and that dependencies are specified correctly for useEffect.
"react-hooks/rules-of-hooks": "error", "react-hooks/exhaustive-deps": "warn"
Prop-types validation
Ensures that prop types are correctly defined and used within React components, helping to catch type-related bugs.
"react/prop-types": "error"
Component lifecycle
Warns about usage of deprecated methods in React component lifecycle, encouraging developers to update to newer APIs.
"react/no-deprecated": "warn"
Best practices
Encourages best practices by warning against common anti-patterns like using array indices as keys or mutating state directly.
"react/no-array-index-key": "warn", "react/no-direct-mutation-state": "error"
Other packages similar to eslint-plugin-react
eslint-plugin-vue
Similar to eslint-plugin-react, eslint-plugin-vue provides linting rules specific to Vue.js framework. It helps enforce Vue-specific best practices and coding standards.
eslint-plugin-angular
This plugin is similar to eslint-plugin-react but for Angular applications. It contains rules that enforce best practices and conventions in AngularJS projects.
eslint-plugin-jsx-a11y
While not specific to React, eslint-plugin-jsx-a11y works well with eslint-plugin-react to enforce accessibility practices in JSX elements.
eslint-plugin-preact
This plugin is designed for Preact (a fast 3kB alternative to React with the same ES6 API) and provides linting rules tailored to Preact codebases.
ESLint-plugin-React
![Code Climate](http://img.shields.io/codeclimate/github/yannickcr/eslint-plugin-react.svg?style=flat-square)
React specific linting rules for ESLint
Installation
Install ESLint either locally or globally.
npm install eslint
If you installed ESLint
globally, you have to install React plugin globally too. Otherwise, install it locally.
$ npm install eslint-plugin-react
Configuration
Add plugins
section and specify ESLint-plugin-React as a plugin.
{
"plugins": [
"react"
]
}
If it is not already the case you must also configure ESLint
to support JSX.
{
"ecmaFeatures": {
"jsx": true
}
}
Finally, enable all of the rules that you would like to use.
{
"rules": {
"react/display-name": 1,
"react/jsx-boolean-value": 1,
"react/jsx-curly-spacing": 1,
"react/jsx-max-props-per-line": 1,
"react/jsx-no-duplicate-props": 1,
"react/jsx-no-undef": 1,
"react/jsx-quotes": 1,
"react/jsx-sort-prop-types": 1,
"react/jsx-sort-props": 1,
"react/jsx-uses-react": 1,
"react/jsx-uses-vars": 1,
"react/no-danger": 1,
"react/no-did-mount-set-state": 1,
"react/no-did-update-set-state": 1,
"react/no-multi-comp": 1,
"react/no-unknown-property": 1,
"react/prop-types": 1,
"react/react-in-jsx-scope": 1,
"react/require-extension": 1,
"react/self-closing-comp": 1,
"react/sort-comp": 1,
"react/wrap-multilines": 1
}
}
List of supported rules
To Do
Any rule idea is welcome !
License
ESLint-plugin-React is licensed under the MIT License.