/eslint-plugin-react

React-specific linting rules for ESLint

Primary LanguageJavaScriptMIT LicenseMIT

eslint-plugin-react

Maintenance Status NPM version Dependency Status Code Climate Tidelift

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 eslint --global). However, this is not recommended, and any plugins or shareable configs that you use must be installed locally in either case.

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

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/iframe-missing-sandbox Enforce sandbox attribute on iframe elements
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-leaked-render Prevent problematic leaked values from being rendered
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.