`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 -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:

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

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.

Shareable configs

There're also 3 shareable configs.

eslint-plugin-react/configs/all
eslint-plugin-react/configs/recommended
eslint-plugin-react/configs/jsx-runtime

If your eslint.config.js is ESM, include the .js extension (e.g. eslint-plugin-react/recommended.js). Note that the next semver-major will require omitting the extension for these imports.

Note: These configurations will import eslint-plugin-react and enable JSX in languageOptions.parserOptions.

In the new config system, plugin: protocol(e.g. plugin:react/recommended) is no longer valid. As eslint does not automatically import the preset config (shareable config), you explicitly do it by yourself.

const reactRecommended = require('eslint-plugin-react/configs/recommended');

module.exports = [
  …
  reactRecommended, // 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 reactRecommended = require('eslint-plugin-react/configs/recommended');
const globals = require('globals');

module.exports = [
  …
  {
    files: ['**/*.{js,mjs,cjs,jsx,mjsx,ts,tsx,mtsx}'],
    ...reactRecommended,
    languageOptions: {
      ...reactRecommended.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 reactRecommended = require('eslint-plugin-react/configs/recommended');
const globals = require('globals');

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

List of supported rules

✔: 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-default-props	Enforce defaultProps declarations alphabetical sorting
			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

JSX-specific rules

✔	🔧	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. ❌ This rule is deprecated.
	🔧	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

Other useful plugins

Rules of Hooks: eslint-plugin-react-hooks
JSX accessibility: eslint-plugin-jsx-a11y
React Native: eslint-plugin-react-native

License

eslint-plugin-react is licensed under the MIT License.

nerijusgood / eslint-plugin-react Goto Github PK