JSPM

eslint-plugin-react-x

1.5.24
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 268864
  • Score
    100M100P100Q174898F
  • License MIT

ESLint React's ESLint plugin for React related rules.

Package Exports

  • eslint-plugin-react-x
  • eslint-plugin-react-x/package.json

Readme

eslint-plugin-react-x

Core rules (DOM Irrelevant, Render Target Agnostic, Formatting Independent).

[!TIP] This plugin is already included in @eslint-react/eslint-plugin. You don't need to install it separately if you are using @eslint-react/eslint-plugin.

Install

# npm
npm install --save-dev eslint-plugin-react-x

Setup

Add the plugin to your eslint.config.js:

// @ts-check

import js from "@eslint/js";
import reactx from "eslint-plugin-react-x";

export default [
  js.configs.recommended,
  {
    files: ["**/*.{ts,tsx}"],
    plugins: [
      "react-x": reactx,
      rules: {
        // react-x recommended rules
        "react-x/ensure-forward-ref-using-ref": "warn",
        "react-x/no-access-state-in-setstate": "error",
        "react-x/no-array-index-key": "warn",
        "react-x/no-children-count": "warn",
        "react-x/no-children-for-each": "warn",
        "react-x/no-children-map": "warn",
        "react-x/no-children-only": "warn",
        "react-x/no-children-to-array": "warn",
        "react-x/no-clone-element": "warn",
        "react-x/no-comment-textnodes": "warn",
        "react-x/no-component-will-mount": "error",
        "react-x/no-component-will-receive-props": "error",
        "react-x/no-component-will-update": "error",
        "react-x/no-create-ref": "error",
        "react-x/no-direct-mutation-state": "error",
        "react-x/no-duplicate-key": "error",
        "react-x/no-missing-key": "error",
        "react-x/no-nested-components": "warn",
        "react-x/no-redundant-should-component-update": "error",
        "react-x/no-set-state-in-component-did-mount": "warn",
        "react-x/no-set-state-in-component-did-update": "warn",
        "react-x/no-set-state-in-component-will-update": "warn",
        "react-x/no-string-refs": "error",
        "react-x/no-unsafe-component-will-mount": "warn",
        "react-x/no-unsafe-component-will-receive-props": "warn",
        "react-x/no-unsafe-component-will-update": "warn",
        "react-x/no-unstable-context-value": "error",
        "react-x/no-unstable-default-props": "error",
        "react-x/no-unused-class-component-members": "warn",
        "react-x/no-unused-state": "warn",
        "react-x/no-useless-fragment": "warn",
      }
    ],
  },
];

Rules

Rule Description 💼 💭
avoid-shorthand-boolean Enforces the use of shorthand syntax for boolean attributes. 🎨
avoid-shorthand-fragment Enforces the use of shorthand syntax for fragments. 🎨
ensure-forward-ref-using-ref Requires that components wrapped with forwardRef must have a ref parameter. ✔️
no-access-state-in-setstate Prevents accessing this.state inside setState calls. ✔️
no-array-index-key Warns when an array index is used as a key prop. 👀
no-children-count Prevents usage of Children.count.
no-children-for-each Prevents usage of Children.forEach.
no-children-map Prevents usage of Children.map.
no-children-only Prevents usage of Children.only.
no-children-prop Prevents usage of children as a prop.
no-children-to-array Prevents usage of Children.toArray.
no-class-component Prevents usage of class component.
no-clone-element Prevents usage of cloneElement.
no-comment-textnodes Prevents comments from being inserted as text nodes. 👀
no-component-will-mount Prevents usage of componentWillMount.
no-component-will-receive-props Prevents usage of componentWillReceiveProps.
no-component-will-update Prevents usage of componentWillUpdate.
no-create-ref Prevents usage of createRef.
no-direct-mutation-state Prevents direct mutation of this.state. ✔️
no-duplicate-key Prevents duplicate key props on elements in the same array or a list of children. ✔️
no-leaked-conditional-rendering Prevents problematic leaked values from being rendered. 👀 💭
no-missing-component-display-name Enforces that all components have a displayName which can be used in devtools. 🐞
no-missing-key Prevents missing key prop on items in list rendering. ✔️
no-nested-components Prevents nesting component definitions inside other components. ✔️
no-redundant-should-component-update Prevents usage of shouldComponentUpdate when extending React.PureComponent. ✔️
no-set-state-in-component-did-mount Disallows calling this.setState in componentDidMount outside of functions, such as callbacks. 👀
no-set-state-in-component-did-update Disallows calling this.setState in componentDidUpdate outside of functions, such as callbacks. 👀
no-set-state-in-component-will-update Disallows calling this.setState in componentWillUpdate outside of functions, such as callbacks. 👀
no-string-refs Disallows using deprecated string refs.
no-unsafe-component-will-mount Warns usage of UNSAFE_componentWillMount in class components. 👀
no-unsafe-component-will-receive-props Warns usage of UNSAFE_componentWillReceiveProps in class components. 👀
no-unsafe-component-will-update Warns usage of UNSAFE_componentWillUpdate in class components. 👀
no-unstable-context-value Prevents non-stable values (i.e. object literals) from being used as a value for Context.Provider. 🚀
no-unstable-default-props Prevents usage of referential-type values as default props in object destructuring. 🚀
no-unused-class-component-members Warns unused class component methods and properties. ✔️
no-unused-state Warns unused class component state. ✔️
no-useless-fragment Prevents the use of useless fragment components or <> syntax. ✔️
prefer-read-only-props Enforces that function components props are readonly. ✔️ 💭
prefer-destructuring-assignment Enforces the use of destructuring assignment over property assignment. 🎨
prefer-shorthand-boolean Enforces the use of shorthand syntax for boolean attributes. 🎨
prefer-shorthand-fragment Enforces the use of shorthand syntax for fragments. 🎨