-
-
Notifications
You must be signed in to change notification settings - Fork 2.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[consistent-type-imports] Auto-fix not working well with ReactJS imports #2455
Comments
I have the same problem. |
This is a really unfortunate side-effect of the react transform. To properly support this, we'll have to add a configuration option to allow you to specify the JSX factory similar to tsconfig: |
Is it not possible to read that from the TypeScript configuration? |
That'll be so nice if it's doable, given we already provide a reference to
|
We can prefill it in that case, for sure! However the rule does not require type information, and not everyone uses type-aware parsing. So we need to provide an option for those people that don't. |
Fixes #2455 And part of #2477 JSX is a first-class citizen of TS, so we should really support it as well. I was going to just rely upon `eslint-plugin-react`'s patch lint rules (`react/jsx-uses-react` and `react/jsx-uses-vars`), but that leaves gaps in our tooling. For example #2455, `consistent-type-imports` makes assumptions and can create invalid fixes for react without this change. We could add options to that lint rule for the factory, but that is kind-of a sub-par experience and future rule authors will likely run into similar problems. - Adds full scope analysis support for JSX. - Adds two new `parserOption`: - `jsxPragma` - the name to use for constructing JSX elements. Defaults to `"React"`. Will be auto detected from the tsconfig. - `jsxFragmentName` - the name that unnamed JSX fragments use. Defaults to `null` (i.e. assumes `React.Fragment`). Will be auto detected from the tsconfig.
Fixes #2455 And part of #2477 JSX is a first-class citizen of TS, so we should really support it as well. I was going to just rely upon `eslint-plugin-react`'s patch lint rules (`react/jsx-uses-react` and `react/jsx-uses-vars`), but that leaves gaps in our tooling. For example #2455, `consistent-type-imports` makes assumptions and can create invalid fixes for react without this change. We could add options to that lint rule for the factory, but that is kind-of a sub-par experience and future rule authors will likely run into similar problems. - Adds full scope analysis support for JSX. - Adds two new `parserOption`: - `jsxPragma` - the name to use for constructing JSX elements. Defaults to `"React"`. Will be auto detected from the tsconfig. - `jsxFragmentName` - the name that unnamed JSX fragments use. Defaults to `null` (i.e. assumes `React.Fragment`). Will be auto detected from the tsconfig.
Repro
Expected Result
After auto-fix, I should be getting no change to my import line:
Actual Result
After auto-fix, getting:
And TSC is unhappy with it; saying:
'React' cannot be used as a value because it was imported using 'import type'.
Additional Info
Versions
@typescript-eslint/eslint-plugin
4.0.1
@typescript-eslint/parser
4.0.1
TypeScript
4.0.2
ESLint
7.8.0
node
12.18.0
The text was updated successfully, but these errors were encountered: