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

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

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

Finally, enable all of the rules that you would like to use.

{
  "rules": {
    "react/display-name": 1,
    "react/forbid-prop-types": 1,
    "react/jsx-boolean-value": 1,
    "react/jsx-closing-bracket-location": 1,
    "react/jsx-curly-spacing": 1,
    "react/jsx-indent-props": 1,
    "react/jsx-max-props-per-line": 1,
    "react/jsx-no-duplicate-props": 1,
    "react/jsx-no-literals": 1,
    "react/jsx-no-undef": 1,
    "react/jsx-quotes": 1,
    "react/jsx-sort-prop-types": 1,
    "react/jsx-sort-props": 1,
    "react/jsx-uses-react": 1,
    "react/jsx-uses-vars": 1,
    "react/no-danger": 1,
    "react/no-did-mount-set-state": 1,
    "react/no-did-update-set-state": 1,
    "react/no-direct-mutation-state": 1,
    "react/no-multi-comp": 1,
    "react/no-set-state": 1,
    "react/no-unknown-property": 1,
    "react/prefer-es6-class": 1,
    "react/prop-types": 1,
    "react/react-in-jsx-scope": 1,
    "react/require-extension": 1,
    "react/self-closing-comp": 1,
    "react/sort-comp": 1,
    "react/wrap-multilines": 1
  }
}

List of supported rules

• display-name: Prevent missing displayName in a React component definition
• forbid-prop-types: Forbid certain propTypes
• jsx-boolean-value: Enforce boolean attributes notation in JSX
• jsx-closing-bracket-location: Validate closing bracket location in JSX
• jsx-curly-spacing: Enforce or disallow spaces inside of curly braces in JSX attributes
• jsx-indent-props: Validate props indentation in JSX
• jsx-max-props-per-line: Limit maximum of props on a single line in JSX
• jsx-no-duplicate-props: Prevent duplicate props in JSX
• jsx-no-literals: Prevent usage of unwrapped JSX strings
• jsx-no-undef: Disallow undeclared variables in JSX
• jsx-quotes: Enforce quote style for JSX attributes
• jsx-sort-prop-types: Enforce propTypes declarations alphabetical sorting
• jsx-sort-props: Enforce props alphabetical sorting
• jsx-uses-react: Prevent React to be incorrectly marked as unused
• jsx-uses-vars: Prevent variables used in JSX to be incorrectly marked as unused
• no-danger: Prevent usage of dangerous JSX properties
• no-did-mount-set-state: Prevent usage of setState in componentDidMount
• no-did-update-set-state: Prevent usage of setState in componentDidUpdate
• no-direct-mutation-state: Prevent direct mutation of this.state
• no-multi-comp: Prevent multiple component definition per file
• no-set-state: Prevent usage of setState
• no-unknown-property: Prevent usage of unknown DOM property
• prefer-es6-class: Prefer es6 class instead of createClass for React Components
• prop-types: Prevent missing props validation in a React component definition
• react-in-jsx-scope: Prevent missing React when using JSX
• require-extension: Restrict file extensions that may be required
• self-closing-comp: Prevent extra closing tags for components without children
• sort-comp: Enforce component methods order
• wrap-multilines: Prevent missing parentheses around multilines JSX

To Do

• no-deprecated: Prevent usage of deprecated methods (React 0.12 Updated API)
• no-classic: Prevent usage of "classic" methods (#2700)
• Implement relevant rules from David Chang's React Style Guide
• Implement relevant rules from John Cobb's best practices and conventions
• Implement relevant rules from Alexander Early's tips and best practices

Any rule idea is welcome !

License

ESLint-plugin-React is licensed under the MIT License.