eslint-plugin-aliased-props

What the plugin does

This ESLint plugin enforces the use of aliased (named) types for React component props. It ensures that props are defined using named interfaces or type aliases instead of inline types.

Installation

To install the plugin, run:

npm install eslint-plugin-aliased-props --save-dev

Configuration

To configure the plugin in your ESLint configuration file, add the following:

{
  "plugins": ["aliased-props"],
  "rules": {
    "aliased-props/require-aliased-props": "error"
  }
}

Examples

Incorrect

const MyComponent = (props: { name: string, age: number }) => {
  return <div>{props.name}</div>;
};

Correct

type Props = {
  name: string,
  age: number,
};

const MyComponent = (props: Props) => {
  return <div>{props.name}</div>;
};