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
===================
React specific linting rules for eslint
Installation
npm install eslint eslint-plugin-react --save-dev
It is also possible to install ESLint globally rather than locally (using npm install eslint --global). However, this is not recommended, and any plugins or shareable configs that you use must be installed locally in either case.
Configuration
Use our preset to get reasonable defaults:
"extends": [
"eslint:recommended",
"plugin:react/recommended"
]
If you are using the new JSX transform from React 17, extend react/jsx-runtime
in your eslint config (add "plugin:react/jsx-runtime"
to "extends"
) to disable the relevant rules.
You should also specify settings that will be shared across all the plugin rules. (More about eslint shared settings)
{
"settings": {
"react": {
"createClass": "createReactClass", // Regex for Component Factory to use,
// default to "createReactClass"
"pragma": "React", // Pragma to use, default to "React"
"fragment": "Fragment", // Fragment to use (may be a property of <pragma>), default to "Fragment"
"version": "detect", // React version. "detect" automatically picks the version you have installed.
// You can also use `16.0`, `16.3`, etc, if you want to override the detected value.
// It will default to "latest" and warn if missing, and to "detect" in the future
"flowVersion": "0.53" // Flow version
},
"propWrapperFunctions": [
// The names of any function used to wrap propTypes, e.g. `forbidExtraProps`. If this isn't set, any propTypes wrapped in a function will be skipped.
"forbidExtraProps",
{"property": "freeze", "object": "Object"},
{"property": "myFavoriteWrapper"},
// for rules that check exact prop wrappers
{"property": "forbidExtraProps", "exact": true}
],
"componentWrapperFunctions": [
// The name of any function used to wrap components, e.g. Mobx `observer` function. If this isn't set, components wrapped by these functions will be skipped.
"observer", // `property`
{"property": "styled"}, // `object` is optional
{"property": "observer", "object": "Mobx"},
{"property": "observer", "object": "<pragma>"} // sets `object` to whatever value `settings.react.pragma` is set to
],
"formComponents": [
// Components used as alternatives to <form> for forms, eg. <Form endpoint={ url } />
"CustomForm",
{"name": "Form", "formAttribute": "endpoint"}
],
"linkComponents": [
// Components used as alternatives to <a> for linking, eg. <Link to={ url } />
"Hyperlink",
{"name": "Link", "linkAttribute": "to"}
]
}
}
If you do not use a preset you will need to specify individual rules and add extra configuration.
Add "react" to the plugins section.
{
"plugins": [
"react"
]
}
Enable JSX support.
With eslint
2+
{
"parserOptions": {
"ecmaFeatures": {
"jsx": true
}
}
}
Enable the rules that you would like to use.
"rules": {
"react/jsx-uses-react": "error",
"react/jsx-uses-vars": "error",
}
List of supported rules
ā: Enabled in the recommended
configuration.
š§: Fixable with eslint --fix
.
š”: Provides editor suggestions.
JSX-specific rules
Other useful plugins
Shareable configurations
Recommended
This plugin exports a recommended
configuration that enforces React good practices.
To enable this configuration use the extends
property in your .eslintrc
config file:
{
"extends": ["eslint:recommended", "plugin:react/recommended"]
}
See eslint
documentation for more information about extending configuration files.
All
This plugin also exports an all
configuration that includes every available rule.
This pairs well with the eslint:all
rule.
{
"plugins": [
"react"
],
"extends": ["eslint:all", "plugin:react/all"]
}
Note: These configurations will import eslint-plugin-react
and enable JSX in parser options.
License
eslint-plugin-react
is licensed under the MIT License.