[Rule Migration] migrate eslint-plugin-react rules

[rEl1cx]

Migration Status

Correctness and best practices rules

• react/jsx-boolean-value ···················-> @eslint-react/jsx/prefer-shorthand-boolean
• react/jsx-fragments ·······················-> @eslint-react/jsx/prefer-shorthand-fragment
• react/jsx-key -----------|··················-> @eslint-react/jsx/no-missing-key
• react/no-array-index-key |··················-> @eslint-react/jsx/no-array-index-key
• ·························|··················-> @eslint-react/jsx/no-duplicate-key
• -------------------------|··················-> @eslint-react/jsx/no-spreading-key
• react/jsx-props-no-spreading ··············-> @eslint-react/jsx/no-spreading-props #102
• react/jsx-no-useless-fragment ·············-> @eslint-react/jsx/no-useless-fragment
• react/jsx-no-leaked-render ················-> @eslint-react/jsx/no-leaked-conditional-rendering
• [Rule Migration] react/jsx-max-depth ·······················-> @eslint-react/jsx/max-depth #104
• react/jsx-no-comment-textnodes ············-> @eslint-react/jsx/no-comment-textnodes
• react/jsx-filename-extension ··············-> @eslint-react/naming-convention/filename-extension
• react/boolean-prop-naming ·················-> @eslint-react/naming-convention/boolean-prop
• react/jsx-handler-names ···················-> @eslint-react/naming-convention/handler-prop
• [Rule Migration] react/hook-use-state ······················-> @eslint-react/naming-convention/use-state #205
• [Rule Migration] react/display-name ························-> @eslint-react/react/no-missing-display-name #107
• react/jsx-no-script-url ···················-> @eslint-react/react/no-script-url
• react/jsx-no-target-blank ·················-> @eslint-react/react/no-unsafe-target-blank
• react/button-has-type ·····················-> @eslint-react/react/no-missing-button-type
• react/iframe-missing-sandbox | ············-> @eslint-react/react/no-missing-iframe-sandbox
• -----------------------------|··············-> @eslint-react/react/no-unsafe-iframe-sandbox
• react/jsx-no-constructed-context-values ···-> @eslint-react/react/no-constructed-context-value
• react/no-danger ···························-> @eslint-react/react/no-dangerously-set-innerhtml
• react/no-danger-with-children ·············-> @eslint-react/react/no-dangerously-set-innerhtml-with-children
• react/no-namespace ························-> @eslint-react/react/no-namespace
• react/no-deprecated ---------|··············-> @eslint-react/react/no-create-class #186
• [Rule Migration] react/no-find-dom-node ······|··············-> @eslint-react/react/no-find-dom-node #173
• [Rule Migration] react/no-render-return-value |··············-> @eslint-react/react/no-render-return-value #183
• [Rule Migration] react/no-is-mounted ·········|··············-> @eslint-react/react/no-is-mounted #185
• react/no-string-refs ········|··············-> @eslint-react/react/no-string-refs
• -----------------------------|··············-> @eslint-react/react/no-create-ref
• react/no-children-prop ····················-> @eslint-react/react/no-children-prop #101
• [Rule Migration] react/no-direct-mutation-state ············-> @eslint-react/react/no-direct-mutation-state #202
• [Rule Migration] @eslint-react/react/no-unsafe-component-will-mount #190
• [Rule Migration] @eslint-react/react/no-unsafe-component-will-receive-props #191
• [Rule Migration] @eslint-react/react/no-unsafe-component-will-update #192
• [Rule Migration] react/no-did-mount-set-state ··············-> @eslint-react/react/no-set-state-in-component-did-mount #197
• [Rule Migration] react/no-did-update-set-state ·············-> @eslint-react/react/no-set-state-in-component-did-update #198
• [Rule Migration] react/no-will-update-set-state ············-> @eslint-react/react/no-set-state-in-component-will-update #199
• [Rule Migration] react/no-redundant-should-component-update -> @eslint-react/react/no-redundant-should-component-update #187
• react/no-object-type-as-default-prop ······-> @eslint-react/react/no-unstable-default-props
• react/no-unstable-nested-components ·······-> @eslint-react/react/no-unstable-nested-components
• react/no-unused-state ·····················-> @eslint-react/react/no-unused-state
• [Rule Migration] react/no-unused-class-component-methods ···-> @eslint-react/react/no-unused-class-component-members #207
• react/void-dom-elements-no-children ·······-> @eslint-react/react/no-children-in-vold-dom-elements
• react/destructuring-assignment ············-> @eslint-react/react/prefer-destructuring-assignment
• react/prefer-read-only-props ··············-> @eslint-react/react/prefer-readonly-props
• [Rule Migration] react/no-access-state-in-setstate ·········-> @eslint-react/hooks/no-access-state-in-setstate #301
• [Rule Migration] react/sort-comp ···························-> @eslint-react/react/no-unsorted-class-component-members #234

The following stylistic rules in eslint-plugin-react can be replaced by the same rules in @stylistic/eslint-plugin-jsx:

• react/jsx-child-element-spacing
• react/jsx-closing-bracket-location
• react/jsx-closing-tag-location
• react/jsx-curly-brace-presence
• react/jsx-curly-newline
• react/jsx-curly-spacing
• react/jsx-equals-spacing
• react/jsx-first-prop-new-line
• react/jsx-indent-props
• react/jsx-indent
• react/jsx-max-props-per-line
• react/jsx-newline
• react/jsx-one-expression-per-line
• react/jsx-pascal-case
• react/jsx-props-no-multi-spaces
• react/jsx-sort-default-props
• react/jsx-sort-props
• react/jsx-space-before-closing
• react/jsx-tag-spacing
• react/jsx-wrap-multilines

The following correctness rules in eslint-plugin-react can be enforced by TypeScript with appropriate tsconfig.json settings:

• react/jsx-no-duplicate-props
• react/jsx-no-undef
• react/jsx-uses-react
• react/jsx-uses-vars
• react/no-invalid-html-attribute
• react/no-unescaped-entities -> No need when using @typescript-eslint/parser
• react/no-unknown-property
• react/style-prop-object
• react/react-in-jsx-scope
• react/require-render-return

Outdated or obsolete rules

These rules are considered outdated or obsolete. They are not going to be supported by this plugin.

• react/default-props-match-prop-types
• react/forbid-foreign-prop-types
• react/forbid-prop-types
• react/no-unused-prop-types
• react/prefer-exact-props
• react/prefer-es6-class
• react/prefer-stateless-function
• react/require-default-props
• react/require-optimization
• react/sort-default-props
• react/sort-prop-types
• react/state-in-constructor
• react/static-property-placement
• react/jsx-no-bind

[yunsii]

How to migrate react/self-closing-comp rule?

[rEl1cx]

How to migrate react/self-closing-comp rule?

All stylistic rules including jsx-self-closing-comp have been migrated to @stylistic/eslint-plugin-jsx, which can be used in addition to this plugin.

[Talent30]

How about rule:
https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/function-component-definition.md

[karlhorky]

Hi @rEl1cx, thanks for this! Amazing as always 🚀

However, I ran into an issue today that eslint-plugin-mdx requires react/jsx-uses-vars

There is not yet full TypeScript support for MDX files, and it appears ESLint doesn't support multiple parsers for a set of files (eg. for trying to use typescript-eslint parser along with the MDX parser).

I tried to use eslint-plugin-react-x for this (looking for react-x/jsx-uses-vars) and found this part of the issue description:

The following can be enforced by TypeScript, no need to implement them

• react/jsx-uses-vars

What do you think about implementing this for other languages like MDX? (and also just for completeness, for other situations where TypeScript cannot be used)

I can create a separate issue for this to track this request.

[rEl1cx]

Hi @rEl1cx, thanks for this! Amazing as always 🚀

However, I ran into an issue today that eslint-plugin-mdx requires react/jsx-uses-vars

There is not yet full TypeScript support for MDX files, and it appears ESLint doesn't support multiple parsers for a set of files (eg. for trying to use typescript-eslint parser along with the MDX parser).

I tried to use eslint-plugin-react-x for this (looking for react-x/jsx-uses-vars) and found this part of the issue description:

The following can be enforced by TypeScript, no need to implement them

• react/jsx-uses-vars

What do you think about implementing this for other languages like MDX? (and also just for completeness, for other situations where TypeScript cannot be used)

I can create a separate issue for this to track this request.

This is a good point, I agree with creating a separate issue to track this, please proceed.

[karlhorky]

Thanks for the response! New issue here:

• [feat] react-x/jsx-uses-vars for MDX and other non-TS envs #834

[karlhorky]

Opened another similar one for react/no-unknown-property, since this is also a common, helpful rule:

• [feat] react-x/no-unknown-property for MDX and other non-TS envs #846

[stianjensen]

This says that react/no-unused-prop-types is outdated/obsolete. I'm guessing because prop-types are deprecated?
But the rule also supported linting based on a declared typescript type, and ensured props that were declared were actually used. Is that not still relevant?
https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-unused-prop-types.md

[rEl1cx]

This says that react/no-unused-prop-types is outdated/obsolete. I'm guessing because prop-types are deprecated? But the rule also supported linting based on a declared typescript type, and ensured props that were declared were actually used. Is that not still relevant? jsx-eslint/eslint-plugin-react@master/docs/rules/no-unused-prop-types.md

Thank you for mentioning that the rule also supported linting based on a declared TypeScript type. This aspect was overlooked at the time, and I will reconsider whether to migrate this rule.