`eslint-plugin-react` <sup>[![Version Badge][npm-version-svg]][package-url]</sup>

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

[![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

npm install eslint eslint-plugin-react --save-dev

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*`) <a id="configuration"></a>

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.
                           // Defaults to the "defaultVersion" setting and warns if missing, and to "detect" in the future
      "defaultVersion": "", // Default React version to use when the version you have installed cannot be detected.
                            // If not provided, defaults to the latest React version.
      "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": "SimpleForm", "formAttribute": "endpoint"},
      {"name": "Form", "formAttribute": ["registerEndpoint", "loginEndpoint"]}, // allows specifying multiple properties if necessary
    ],
    "linkComponents": [
      // Components used as alternatives to <a> for linking, eg. <Link to={ url } />
      "Hyperlink",
      {"name": "MyLink", "linkAttribute": "to"},
      {"name": "Link", "linkAttribute": ["to", "href"]}, // allows specifying multiple properties if necessary
    ]
  }
}

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",
  }

Shareable configs

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.

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.

const react = require('eslint-plugin-react');
const globals = require('globals');

module.exports = [
  …
  {
    files: ['**/*.{js,jsx,mjs,cjs,ts,tsx}'],
    plugins: {
      react,
    },
    languageOptions: {
      parserOptions: {
        ecmaFeatures: {
          jsx: true,
        },
      },
      globals: {
        ...globals.browser,
      },
    },
    rules: {
      // ... any rules you want
      'react/jsx-uses-react': 'error',
      'react/jsx-uses-vars': 'error',
     },
    // ... others are omitted for brevity
  },
  …
];

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.

const reactPlugin = require('eslint-plugin-react');

module.exports = [
  …
  reactPlugin.configs.flat.recommended, // This is not a plugin object, but a shareable config object
  …
];

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.

const reactPlugin = require('eslint-plugin-react');
const globals = require('globals');

module.exports = [
  …
  {
    files: ['**/*.{js,mjs,cjs,jsx,mjsx,ts,tsx,mtsx}'],
    ...reactPlugin.configs.flat.recommended,
    languageOptions: {
      ...reactPlugin.configs.flat.recommended.languageOptions,
      globals: {
        ...globals.serviceworker,
        ...globals.browser,
      },
    },
  },
  …
];

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

const reactPlugin = require('eslint-plugin-react');
const globals = require('globals');

module.exports = [
  …
  {
    files: ['**/*.{js,mjs,cjs,jsx,mjsx,ts,tsx,mtsx}'],
    ...reactPlugin.configs.flat.recommended,
  },
  {
    files: ['**/*.{js,mjs,cjs,jsx,mjsx,ts,tsx,mtsx}'],
    languageOptions: {
      globals: {
        ...globals.serviceworker,
        ...globals.browser,
      },
    },
  },
  …
];

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
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 event handler naming conventions in JSX
jsx-indent	Enforce JSX indentation		🔧
jsx-indent-props	Enforce props indentation in JSX		🔧
jsx-key	Disallow missing `key` props in iterators/collection literals	☑️
jsx-max-depth	Enforce JSX maximum depth
jsx-max-props-per-line	Enforce maximum of props on a single line in JSX		🔧
jsx-newline	Require or prevent a new line after jsx elements and expressions.		🔧
jsx-no-bind	Disallow `.bind()` or arrow functions in JSX props
jsx-no-comment-textnodes	Disallow comments from being inserted as text nodes	☑️
jsx-no-constructed-context-values	Disallows JSX context provider values from taking values that will cause needless rerenders
jsx-no-duplicate-props	Disallow duplicate properties in JSX	☑️
jsx-no-leaked-render