eslint-plugin-react

What is eslint-plugin-react?

The eslint-plugin-react is a plugin for ESLint that provides linting utilities for React and JSX specific code. It helps developers adhere to best practices and avoid common pitfalls in React development.

What are eslint-plugin-react's main functionalities?

JSX-specific rules

Enforces rules specific to JSX, such as ensuring that any variables used in JSX are defined and that React is in scope when using JSX.

"react/jsx-uses-react": "error", "react/jsx-uses-vars": "error"

Hooks rules

Provides rules that enforce the correct usage of React Hooks, such as ensuring that hooks are called in the same order on every render and that dependencies are specified correctly for useEffect.

"react-hooks/rules-of-hooks": "error", "react-hooks/exhaustive-deps": "warn"

Prop-types validation

Ensures that prop types are correctly defined and used within React components, helping to catch type-related bugs.

"react/prop-types": "error"

Component lifecycle

Warns about usage of deprecated methods in React component lifecycle, encouraging developers to update to newer APIs.

"react/no-deprecated": "warn"

Best practices

Encourages best practices by warning against common anti-patterns like using array indices as keys or mutating state directly.

"react/no-array-index-key": "warn", "react/no-direct-mutation-state": "error"

Other packages similar to eslint-plugin-react

eslint-plugin-vue

Similar to eslint-plugin-react, eslint-plugin-vue provides linting rules specific to Vue.js framework. It helps enforce Vue-specific best practices and coding standards.

eslint-plugin-angular

This plugin is similar to eslint-plugin-react but for Angular applications. It contains rules that enforce best practices and conventions in AngularJS projects.

eslint-plugin-jsx-a11y

While not specific to React, eslint-plugin-jsx-a11y works well with eslint-plugin-react to enforce accessibility practices in JSX elements.

eslint-plugin-preact

This plugin is designed for Preact (a fast 3kB alternative to React with the same ES6 API) and provides linting rules tailored to Preact codebases.

README

ESLint-plugin-React

React specific linting rules for ESLint

Installation

Install ESLint either locally or globally.

$ npm install eslint

If you installed ESLint globally, you have to install React plugin globally too. Otherwise, install it locally.

$ npm install eslint-plugin-react

Configuration

Add plugins section and specify ESLint-plugin-React as a plugin.

{
  "plugins": [
    "react"
  ]
}

You can also specify some settings that will be shared across all the plugin rules.

{
  "settings": {
    "react": {
      "createClass": "createClass", // Regex for Component Factory to use, default to "createClass"
      "pragma": "React",  // Pragma to use, default to "React"
      "version": "15.0" // React version, default to the latest React stable release
    }
  }
}

If it is not already the case you must also configure ESLint to support JSX.

With ESLint 1.x.x:

{
  "ecmaFeatures": {
    "jsx": true
  }
}

With ESLint 2.x.x or 3.x.x:

{
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    }
  }
}

Finally, enable all of the rules that you would like to use. Use our preset to get reasonable defaults quickly, and/or choose your own:

  "rules": {
    "react/jsx-uses-react": "error",
    "react/jsx-uses-vars": "error",
  }

List of supported rules

• react/display-name: Prevent missing displayName in a React component definition
• react/forbid-component-props: Forbid certain props on Components
• react/forbid-prop-types: Forbid certain propTypes
• react/no-array-index-key: Prevent using Array index in key props
• react/no-children-prop: Prevent passing children as props
• react/no-danger: Prevent usage of dangerous JSX properties
• react/no-danger-with-children: Prevent problem with children and props.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-is-mounted: Prevent usage of isMounted
• react/no-multi-comp: Prevent multiple component definition per file
• 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 using string references in ref attribute.
• react/no-unescaped-entities: Prevent invalid characters from appearing in markup
• react/no-unknown-property: Prevent usage of unknown DOM property (fixable)
• react/no-unused-prop-types: Prevent definitions of unused prop types
• react/prefer-es6-class: Enforce ES5 or ES6 class for React Components
• react/prefer-stateless-function: Enforce stateless React 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 (fixable)
• react/sort-comp: Enforce component methods order
• react/sort-prop-types: Enforce propTypes declarations alphabetical sorting
• react/style-prop-object: Enforce style prop value being an object

JSX-specific rules

• react/jsx-boolean-value: Enforce boolean attributes notation in JSX (fixable)
• react/jsx-closing-bracket-location: Validate closing bracket location in JSX (fixable)
• react/jsx-curly-spacing: Enforce or disallow spaces inside of curly braces in JSX attributes (fixable)
• react/jsx-equals-spacing: Enforce or disallow spaces around equal signs in JSX attributes (fixable)
• react/jsx-filename-extension: Restrict file extensions that may contain JSX
• react/jsx-first-prop-new-line: Enforce position of the first prop in JSX (fixable)
• react/jsx-handler-names: Enforce event handler naming conventions in JSX
• react/jsx-indent: Validate JSX indentation (fixable)
• react/jsx-indent-props: Validate props indentation in JSX (fixable)
• react/jsx-key: Validate JSX has key prop when in array or iterator
• react/jsx-max-props-per-line: Limit maximum of props on a single line in JSX
• react/jsx-no-bind: Prevent usage of .bind() and arrow functions in JSX props
• react/jsx-no-comment-textnodes: Prevent comments from being inserted as text nodes
• react/jsx-no-duplicate-props: Prevent duplicate props in JSX
• react/jsx-no-literals: Prevent usage of unwrapped JSX strings
• react/jsx-no-target-blank: Prevent usage of unsafe target='_blank'
• react/jsx-no-undef: Disallow undeclared variables in JSX
• react/jsx-pascal-case: Enforce PascalCase for user-defined JSX components
• react/jsx-sort-props: Enforce props alphabetical sorting
• react/jsx-space-before-closing: Validate spacing before closing bracket in JSX (fixable)
• react/jsx-tag-spacing: Validate whitespace in and around the JSX opening and closing brackets (fixable)
• react/jsx-uses-react: Prevent React to be incorrectly marked as unused
• react/jsx-uses-vars: Prevent variables used in JSX to be incorrectly marked as unused
• react/jsx-wrap-multilines: Prevent missing parentheses around multilines JSX (fixable)

Other useful plugins

• JSX accessibility: eslint-plugin-jsx-a11y
• React Native: eslint-plugin-react-native

Shareable configurations

Recommended

This plugin exports a recommended configuration that enforce 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.

The rules enabled in this configuration are:

• react/display-name
• react/jsx-no-duplicate-props
• react/jsx-no-undef
• react/jsx-uses-react
• react/jsx-uses-vars
• react/no-deprecated
• react/no-direct-mutation-state
• react/no-find-dom-node
• react/no-is-mounted
• react/no-unknown-property
• react/no-render-return-value
• react/prop-types
• react/react-in-jsx-scope
• react/require-render-return

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.

Changelog

[6.9.0] - 2017-01-08

Added

• Add support for variable reference to [sort-prop-types][] ([#622][])

Fixed

• Fix Node.js 0.10 support ([#1000][] @ljharb)
• Fix [prop-types][] to correctly assign props to components ([#991][])

Changed

• Documentation improvements ([#995][] @rutsky)