eslint-plugin-react weekly downloads statistics

eslint-plugin-react [![Version Badge][npm-version-svg]][package-url]

===================

[![github actions][actions-image]][actions-url] [![Maintenance Status][status-image]][status-url] [![NPM version][npm-image]][npm-url] [![Tidelift][tidelift-image]][tidelift-url]

React specific linting rules for eslint

Installation

It is also possible to install ESLint globally rather than locally (using npm install -g eslint). However, this is not recommended, and any plugins or shareable configs that you use must be installed locally in either case.

Configuration (legacy: .eslintrc*)

Use our preset to get reasonable defaults:

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)

If you do not use a preset you will need to specify individual rules and add extra configuration.

Add "react" to the plugins section.

Enable JSX support.

With eslint 2+

Enable the rules that you would like to use.

Shareable configs

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:

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.

Note: These configurations will import eslint-plugin-react and enable JSX in parser options.

Configuration (new: eslint.config.js)

From v8.21.0, eslint announced a new config system. In the new system, .eslintrc* is no longer used. eslint.config.js would be the default config file name. In eslint v8, the legacy system (.eslintrc*) would still be supported, while in eslint v9, only the new system would be supported.

And from v8.23.0, eslint CLI starts to look up eslint.config.js. So, if your eslint is >=8.23.0, you're 100% ready to use the new config system.

You might want to check out the official blog posts,

• • •

and the official docs.

Plugin

The default export of eslint-plugin-react is a plugin object.

Configuring shared settings

Refer to the official docs.

The schema of the settings.react object would be identical to that of what's already described above in the legacy config section.

Flat Configs

This plugin exports 3 flat configs:

• flat.all • flat.recommended • flat['jsx-runtime']

The flat configs are available via the root plugin import. They will configure the plugin under the react/ namespace and enable JSX in languageOptions.parserOptions.

You can of course add/override some properties.

Note: Our shareable configs does not preconfigure files or languageOptions.globals. For most of the cases, you probably want to configure some properties by yourself.

The above example is same as the example below, as the new config system is based on chaining.

List of supported rules

💼 Configurations enabled in.\ 🚫 Configurations disabled in.\ 🏃 Set in the jsx-runtime configuration.\ ☑️ Set in the recommended configuration.\ 🔧 Automatically fixable by the --fix CLI option.\ 💡 Manually fixable by editor suggestions.\ ❌ Deprecated.

| Name | Description | 💼 | 🚫 | 🔧 | 💡 | ❌ |

| boolean-prop-naming | Enforces consistent naming for boolean props | | | | | | | button-has-type | Disallow usage of button elements without an explicit type attribute | | | | | | | checked-requires-onchange-or-readonly | Enforce using onChange or readonly attribute when checked is used | | | | | | | default-props-match-prop-types | Enforce all defaultProps have a corresponding non-required PropType | | | | | | | destructuring-assignment | Enforce consistent usage of destructuring assignment of props, state, and context | | | 🔧 | | | | display-name | Disallow missing displayName in a React component definition | ☑️ | | | | | | forbid-component-props | Disallow certain props on components | | | | | | | forbid-dom-props | Disallow certain props on DOM Nodes | | | | | | | forbid-elements | Disallow certain elements | | | | | | | forbid-foreign-prop-types | Disallow using another component's propTypes | | | | | | | forbid-prop-types | Disallow certain propTypes | | | | | | | forward-ref-uses-ref | Require all forwardRef components include a ref parameter | | | | 💡 | | | function-component-definition | Enforce a specific function type for function components | | | 🔧 | | | | hook-use-state | Ensure destructuring and symmetric naming of useState hook value and setter variables | | | | 💡 | | | iframe-missing-sandbox | Enforce sandbox attribute on iframe elements | | | | | | | jsx-boolean-value | Enforce boolean attributes notation in JSX | | | 🔧 | | | | jsx-child-element-spacing | Enforce or disallow spaces inside of curly braces in JSX attributes and expressions | | | | | | | jsx-closing-bracket-location | Enforce closing bracket location in JSX | | | 🔧 | | | | jsx-closing-tag-location | Enforce closing tag location for multiline JSX | | | 🔧 | | | | jsx-curly-brace-presence | Disallow unnecessary JSX expressions when literals alone are sufficient or enforce JSX expressions on literals in JSX children or attributes | | | 🔧 | | | | jsx-curly-newline | Enforce consistent linebreaks in curly braces in JSX attributes and expressions | | | 🔧 | | | | jsx-curly-spacing | Enforce or disallow spaces inside of curly braces in JSX attributes and expressions | | | 🔧 | | | | jsx-equals-spacing | Enforce or disallow spaces around equal signs in JSX attributes | | | 🔧 | | | | jsx-filename-extension | Disallow file extensions that may contain JSX | | | | | | | jsx-first-prop-new-line | Enforce proper position of the first property in JSX | | | 🔧 | | | | jsx-fragments | Enforce shorthand or standard form for React fragments | | | 🔧 | | | | jsx-handler-names | Enforce…

Description from the npm listing.