Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
eslint-plugin-react
Advanced tools
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.
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"
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.
This plugin is similar to eslint-plugin-react but for Angular applications. It contains rules that enforce best practices and conventions in AngularJS projects.
While not specific to React, eslint-plugin-jsx-a11y works well with eslint-plugin-react to enforce accessibility practices in JSX elements.
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
Install eslint
either locally or globally. (Note that locally, per project, is strongly preferred)
$ npm install eslint@7 --save-dev
If you installed eslint
globally, you have to install the React plugin globally too. Otherwise, install it locally (strongly preferred)
$ npm install eslint-plugin-react --save-dev
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",
}
ā: Enabled in the recommended
configuration.
š§: Fixable with eslint --fix
.
ā | š§ | Rule | Description |
---|---|---|---|
react/boolean-prop-naming | Enforces consistent naming for boolean props | ||
react/button-has-type | Forbid "button" element without an explicit "type" attribute | ||
react/default-props-match-prop-types | Enforce all defaultProps are defined and not "required" in propTypes. | ||
react/destructuring-assignment | Enforce consistent usage of destructuring assignment of props, state, and context | ||
ā | react/display-name | Prevent missing displayName in a React component definition | |
react/forbid-component-props | Forbid certain props on components | ||
react/forbid-dom-props | Forbid certain props on DOM Nodes | ||
react/forbid-elements | Forbid certain elements | ||
react/forbid-foreign-prop-types | Forbid using another component's propTypes | ||
react/forbid-prop-types | Forbid certain propTypes | ||
š§ | react/function-component-definition | Standardize the way function component get defined | |
react/hook-use-state | Ensure symmetric naming of useState hook value and setter variables | ||
react/iframe-missing-sandbox | Enforce sandbox attribute on iframe elements | ||
react/no-access-state-in-setstate | Reports when this.state is accessed within setState | ||
react/no-adjacent-inline-elements | Prevent adjacent inline elements not separated by whitespace. | ||
react/no-array-index-key | Prevent usage of Array index in keys | ||
š§ | react/no-arrow-function-lifecycle | Lifecycle methods should be methods on the prototype, not class fields | |
ā | react/no-children-prop | Prevent passing of children as props. | |
react/no-danger | Prevent usage of dangerous JSX props | ||
ā | react/no-danger-with-children | Report when a DOM element is using both children and dangerouslySetInnerHTML | |
ā | react/no-deprecated | Prevent usage of deprecated methods | |
react/no-did-mount-set-state | Prevent usage of setState in componentDidMount | ||
react/no-did-update-set-state | Prevent usage of setState in componentDidUpdate | ||
ā | react/no-direct-mutation-state | Prevent direct mutation of this.state | |
ā | react/no-find-dom-node | Prevent usage of findDOMNode | |
š§ | react/no-invalid-html-attribute | Forbid attribute with an invalid values` | |
ā | react/no-is-mounted | Prevent usage of isMounted | |
react/no-multi-comp | Prevent multiple component definition per file | ||
react/no-namespace | Enforce that namespaces are not used in React elements | ||
react/no-redundant-should-component-update | Flag shouldComponentUpdate when extending PureComponent | ||
ā | react/no-render-return-value | Prevent usage of the return value of React.render | |
react/no-set-state | Prevent usage of setState | ||
ā | react/no-string-refs | Prevent string definitions for references and prevent referencing this.refs | |
react/no-this-in-sfc | Report "this" being used in stateless components | ||
react/no-typos | Prevent common typos | ||
ā | react/no-unescaped-entities | Detect unescaped HTML entities, which might represent malformed tags | |
ā | š§ | react/no-unknown-property | Prevent usage of unknown DOM property |
react/no-unsafe | Prevent usage of unsafe lifecycle methods | ||
react/no-unstable-nested-components | Prevent creating unstable components inside components | ||
react/no-unused-class-component-methods | Prevent declaring unused methods of component class | ||
react/no-unused-prop-types | Prevent definitions of unused prop types | ||
react/no-unused-state | Prevent definition of unused state fields | ||
react/no-will-update-set-state | Prevent usage of setState in componentWillUpdate | ||
react/prefer-es6-class | Enforce ES5 or ES6 class for React Components | ||
react/prefer-exact-props | Prefer exact proptype definitions | ||
š§ | react/prefer-read-only-props | Require read-only props. | |
react/prefer-stateless-function | Enforce stateless components to be written as a pure function | ||
ā | react/prop-types | Prevent missing props validation in a React component definition | |
ā | react/react-in-jsx-scope | Prevent missing React when using JSX | |
react/require-default-props | Enforce a defaultProps definition for every prop that is not a required prop. | ||
react/require-optimization | Enforce React components to have a shouldComponentUpdate method | ||
ā | react/require-render-return | Enforce ES5 or ES6 class for returning value in render function | |
š§ | react/self-closing-comp | Prevent extra closing tags for components without children | |
react/sort-comp | Enforce component methods order | ||
react/sort-prop-types | Enforce propTypes declarations alphabetical sorting | ||
react/state-in-constructor | State initialization in an ES6 class component should be in a constructor | ||
react/static-property-placement | Defines where React component static properties should be positioned. | ||
react/style-prop-object | Enforce style prop value is an object | ||
react/void-dom-elements-no-children | Prevent passing of children to void DOM elements (e.g. <br /> ). |
ā | š§ | Rule | Description |
---|---|---|---|
š§ | react/jsx-boolean-value | Enforce boolean attributes notation in JSX | |
react/jsx-child-element-spacing | Ensures inline tags are not rendered without spaces between them | ||
š§ | react/jsx-closing-bracket-location | Validate closing bracket location in JSX | |
š§ | react/jsx-closing-tag-location | Validate closing tag location for multiline JSX | |
š§ | react/jsx-curly-brace-presence | Disallow unnecessary JSX expressions when literals alone are sufficient or enfore JSX expressions on literals in JSX children or attributes | |
š§ | react/jsx-curly-newline | Enforce consistent line breaks inside jsx curly | |
š§ | react/jsx-curly-spacing | Enforce or disallow spaces inside of curly braces in JSX attributes | |
š§ | react/jsx-equals-spacing | Disallow or enforce spaces around equal signs in JSX attributes | |
react/jsx-filename-extension | Restrict file extensions that may contain JSX | ||
š§ | react/jsx-first-prop-new-line | Ensure proper position of the first property in JSX | |
š§ | react/jsx-fragments | Enforce shorthand or standard form for React fragments | |
react/jsx-handler-names | Enforce event handler naming conventions in JSX | ||
š§ | react/jsx-indent | Validate JSX indentation | |
š§ | react/jsx-indent-props | Validate props indentation in JSX | |
ā | react/jsx-key | Report missing key props in iterators/collection literals | |
react/jsx-max-depth | Validate JSX maximum depth | ||
š§ | react/jsx-max-props-per-line | Limit maximum of props on a single line in JSX | |
š§ | react/jsx-newline | Require or prevent a new line after jsx elements and expressions. | |
react/jsx-no-bind | Prevents usage of Function.prototype.bind and arrow functions in React component props | ||
ā | react/jsx-no-comment-textnodes | Comments inside children section of tag should be placed inside braces | |
react/jsx-no-constructed-context-values | Prevents JSX context provider values from taking values that will cause needless rerenders. | ||
ā | react/jsx-no-duplicate-props | Enforce no duplicate props | |
react/jsx-no-literals | Prevent using string literals in React component definition | ||
react/jsx-no-script-url | Forbid javascript: URLs | ||
ā | š§ | react/jsx-no-target-blank | Forbid target="_blank" attribute without rel="noreferrer" |
ā | react/jsx-no-undef | Disallow undeclared variables in JSX | |
š§ | react/jsx-no-useless-fragment | Disallow unnecessary fragments | |
š§ | react/jsx-one-expression-per-line | Limit to one expression per line in JSX | |
react/jsx-pascal-case | Enforce PascalCase for user-defined JSX components | ||
š§ | react/jsx-props-no-multi-spaces | Disallow multiple spaces between inline JSX props | |
react/jsx-props-no-spreading | Prevent JSX prop spreading | ||
react/jsx-sort-default-props | Enforce default props alphabetical sorting | ||
š§ | react/jsx-sort-props | Enforce props alphabetical sorting | |
š§ | react/jsx-space-before-closing | Validate spacing before closing bracket in JSX | |
š§ | react/jsx-tag-spacing | Validate whitespace in and around the JSX opening and closing brackets | |
ā | react/jsx-uses-react | Prevent React to be marked as unused | |
ā | react/jsx-uses-vars | Prevent variables used in JSX to be marked as unused | |
š§ | react/jsx-wrap-multilines | Prevent missing parentheses around multilines JSX |
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.
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.
eslint-plugin-react
is licensed under the MIT License.
[7.29.4] - 2022.03.13
no-unused-state
]: avoid a crash on a class field gDSFP ([#3236][] @ljharb)boolean-prop-naming
]: handle React.FC, intersection, union types ([#3241][] @ljharb)FAQs
React specific linting rules for ESLint
The npm package eslint-plugin-react receives a total of 19,020,846 weekly downloads. As such, eslint-plugin-react popularity was classified as popular.
We found that eslint-plugin-react demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago.Ā It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.