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
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.
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
.
š”: Provides editor suggestions.
ā | š§ | š” | Rule | Description |
---|---|---|---|---|
react/boolean-prop-naming | Enforces consistent naming for boolean props | |||
react/button-has-type | Disallow usage of button elements without an explicit type attribute | |||
react/default-props-match-prop-types | Enforce all defaultProps have a corresponding non-required PropType | |||
š§ | react/destructuring-assignment | Enforce consistent usage of destructuring assignment of props, state, and context | ||
ā | react/display-name | Disallow missing displayName in a React component definition | ||
react/forbid-component-props | Disallow certain props on components | |||
react/forbid-dom-props | Disallow certain props on DOM Nodes | |||
react/forbid-elements | Disallow certain elements | |||
react/forbid-foreign-prop-types | Disallow using another component's propTypes | |||
react/forbid-prop-types | Disallow certain propTypes | |||
š§ | react/function-component-definition | Enforce a specific function type for function components | ||
š” | react/hook-use-state | Ensure destructuring and 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 | Disallow when this.state is accessed within setState | |||
react/no-adjacent-inline-elements | Disallow adjacent inline elements not separated by whitespace. | |||
react/no-array-index-key | Disallow 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 | Disallow passing of children as props | ||
react/no-danger | Disallow usage of dangerous JSX properties | |||
ā | react/no-danger-with-children | Disallow when a DOM element is using both children and dangerouslySetInnerHTML | ||
ā | react/no-deprecated | Disallow usage of deprecated methods | ||
react/no-did-mount-set-state | Disallow usage of setState in componentDidMount | |||
react/no-did-update-set-state | Disallow usage of setState in componentDidUpdate | |||
ā | react/no-direct-mutation-state | Disallow direct mutation of this.state | ||
ā | react/no-find-dom-node | Disallow usage of findDOMNode | ||
š§ | react/no-invalid-html-attribute | Disallow usage of invalid attributes | ||
ā | react/no-is-mounted | Disallow usage of isMounted | ||
react/no-multi-comp | Disallow multiple component definition per file | |||
react/no-namespace | Enforce that namespaces are not used in React elements | |||
react/no-redundant-should-component-update | Disallow usage of shouldComponentUpdate when extending React.PureComponent | |||
ā | react/no-render-return-value | Disallow usage of the return value of ReactDOM.render | ||
react/no-set-state | Disallow usage of setState | |||
ā | react/no-string-refs | Disallow using string references | ||
react/no-this-in-sfc | Disallow this from being used in stateless functional components | |||
react/no-typos | Disallow common typos | |||
ā | react/no-unescaped-entities | Disallow unescaped HTML entities from appearing in markup | ||
ā | š§ | react/no-unknown-property | Disallow usage of unknown DOM property | |
react/no-unsafe | Disallow usage of unsafe lifecycle methods | |||
react/no-unstable-nested-components | Disallow creating unstable components inside components | |||
react/no-unused-class-component-methods | Disallow declaring unused methods of component class | |||
react/no-unused-prop-types | Disallow definitions of unused propTypes | |||
react/no-unused-state | Disallow definitions of unused state | |||
react/no-will-update-set-state | Disallow 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 | Enforce that props are read-only | ||
react/prefer-stateless-function | Enforce stateless components to be written as a pure function | |||
ā | react/prop-types | Disallow missing props validation in a React component definition | ||
ā | react/react-in-jsx-scope | Disallow 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 | Disallow 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 | Enforce class component state initialization style | |||
react/static-property-placement | Enforces 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 | Disallow void DOM elements (e.g. <img /> , <br /> ) from receiving children |
ā | š§ | š” | Rule | Description |
---|---|---|---|---|
š§ | react/jsx-boolean-value | Enforce boolean attributes notation in JSX | ||
react/jsx-child-element-spacing | Enforce or disallow spaces inside of curly braces in JSX attributes and expressions | |||
š§ | react/jsx-closing-bracket-location | Enforce closing bracket location in JSX | ||
š§ | react/jsx-closing-tag-location | Enforce closing tag location for multiline JSX | ||
š§ | react/jsx-curly-brace-presence | Disallow unnecessary JSX expressions when literals alone are sufficient or enforce JSX expressions on literals in JSX children or attributes | ||
š§ | react/jsx-curly-newline | Enforce consistent linebreaks in curly braces in JSX attributes and expressions | ||
š§ | react/jsx-curly-spacing | Enforce or disallow spaces inside of curly braces in JSX attributes and expressions | ||
š§ | react/jsx-equals-spacing | Enforce or disallow spaces around equal signs in JSX attributes | ||
react/jsx-filename-extension | Disallow file extensions that may contain JSX | |||
š§ | react/jsx-first-prop-new-line | Enforce 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 | Enforce JSX indentation | ||
š§ | react/jsx-indent-props | Enforce props indentation in JSX | ||
ā | react/jsx-key | Disallow missing key props in iterators/collection literals | ||
react/jsx-max-depth | Enforce JSX maximum depth | |||
š§ | react/jsx-max-props-per-line | Enforce 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 | Disallow .bind() or arrow functions in JSX props | |||
ā | react/jsx-no-comment-textnodes | Disallow comments from being inserted as text nodes | ||
react/jsx-no-constructed-context-values | Disallows JSX context provider values from taking values that will cause needless rerenders | |||
ā | react/jsx-no-duplicate-props | Disallow duplicate properties in JSX | ||
š§ | react/jsx-no-leaked-render | Disallow problematic leaked values from being rendered | ||
react/jsx-no-literals | Disallow usage of string literals in JSX | |||
react/jsx-no-script-url | Disallow usage of javascript: URLs | |||
ā | š§ | react/jsx-no-target-blank | Disallow 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 | Require one JSX element per line | ||
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 | Disallow JSX prop spreading | |||
react/jsx-sort-default-props | Enforce defaultProps declarations alphabetical sorting | |||
š§ | react/jsx-sort-props | Enforce props alphabetical sorting | ||
š§ | react/jsx-space-before-closing | Enforce spacing before closing bracket in JSX. ā This rule is deprecated. | ||
š§ | react/jsx-tag-spacing | Enforce whitespace in and around the JSX opening and closing brackets | ||
ā | react/jsx-uses-react | Disallow React to be incorrectly marked as unused | ||
ā | react/jsx-uses-vars | Disallow variables used in JSX to be incorrectly marked as unused | ||
š§ | react/jsx-wrap-multilines | Disallow missing parentheses around multiline 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.31.1] - 2022.08.26
jsx-key
]: fix detecting missing key in Array.from
's mapping function ([#3369][] @sjarva)jsx-no-leaked-render
]: coerce strategy now allows a ternary ([#3370][] @sjarva)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.