eslint-plugin-react icon indicating copy to clipboard operation
eslint-plugin-react copied to clipboard

function-component-definition should not match unfixable edge cases (TypeScript generics)

Open philer-jambit opened this issue 2 years ago • 5 comments

The documentation for the function-component-definition rule helpfully points out, that certain cases in TypeScript code using generics can not be fixed.
For example this:

function Component<T>(props: Props<T>) {
  return <div />;
};

can not be converted into an arrow function as the type parameter conflicts with JSX syntax.

Since that is the case, the rule should not highlight these cases as errors to begin with.

Thanks :) Also, generally great work on this plugin!

Note: There may be a suggestion to just add some more syntax, like <T extends unknown>, to prevent the syntax collision. However not only does this conflict with other linting rules specifically designed to prevent this ( particularly (@typescript-eslint/no-unnecessary-type-constrain ), it also obscures the fact that code was added to alleviate a deficiency in the linter. IMHO the only valid way to deal with this currently is to spam eslint-disable-next-line, which is not great.

philer-jambit avatar Jul 25 '22 14:07 philer-jambit

The patterns that aren't autofixable aren't necessarily un fixable - however, if there is a pattern that has no other possibility, you're right, we shouldn't warn on it.

ljharb avatar Aug 04 '22 23:08 ljharb