eslint-plugin-react-extras

This ESLint plugin provides additional rules for projects using React and TypeScript, aiming to enhance code quality and maintainability by enforcing best practices and stylistic conventions.

Description

eslint-plugin-react-extras introduces extra linting rules for React and TypeScript projects to catch common mistakes and enforce best practices. This package focuses on improving the developer experience by providing clear and concise feedback on potential issues in your React codebase.

Installation

You'll need to have ESLint installed. If you haven't installed ESLint yet, you can do it by running:

1npm install --save-dev eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint eslint-plugin-react-extras

Usages

Add eslint-plugin-react-extras to the plugins section of your .eslintrc configuration file. Then, configure the rules you want to use under the rules section.

1{
2  "plugins": ["react-extras"],
3  "parser": "@typescript-eslint/parser",
4  "rules": {
5    "react-extras/ban-props-with-children": "error"
6  }
7}

Rules

ban-props-with-children

Disallow using React.ComponentWithProps with arguments.

Examples 🚫 Example of incorrect code for this rule:

1type MyComponentProps = React.PropsWithChildren<{}>;

✅ Example of correct code for this rule:

1type MyComponentProps = {
2  children: React.ReactNode
3};
4
5type MyComponentProps = React.PropsWithChildren;