/eslint-plugin-react

React specific linting rules for ESLint

Primary LanguageJavaScriptMIT LicenseMIT

eslint-plugin-react

Maintenance Status NPM version Build Status Dependency Status Code Climate Tidelift

React specific linting rules for eslint

Installation

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

Configuration

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.
                           // default to latest and warns if missing
                           // It will default 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",
  }

List of supported rules

✔: 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/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 />).

JSX-specific rules

✔ 🔧 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

Other useful plugins

Shareable configurations

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:

{
  "extends": ["eslint:recommended", "plugin:react/recommended"]
}

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.

{
  "plugins": [
    "react"
  ],
  "extends": ["eslint:all", "plugin:react/all"]
}

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

License

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