diff --git a/apps/website/content/docs/faq.mdx b/apps/website/content/docs/faq.mdx index fca9e24e0b..1171920f67 100644 --- a/apps/website/content/docs/faq.mdx +++ b/apps/website/content/docs/faq.mdx @@ -64,6 +64,8 @@ For more information, see the [JSX Transform](/docs/configuration/configure-proj Please be aware that some rules may behave differently when transitioning to ESLint React. The rules in ESLint React are more closely aligned with the guidelines provided by [react.dev](https://react.dev). This alignment is due to ESLint React adopting [react.dev](https://react.dev) as its primary reference, rather than `eslint-plugin-react`. +For a comprehensive migration guide with a complete rule comparison table, see our [Migration Guide](/docs/migration). This guide covers all rules from `eslint-plugin-react`, their ESLint React equivalents, missing functionality, and migration tips. + To smoothly transition, we suggest reviewing the rules in ESLint React and running a comprehensive linting check on your codebase to identify and address any discrepancies introduced by the migration. diff --git a/apps/website/content/docs/meta.json b/apps/website/content/docs/meta.json index 32cb88de24..b9f7f97ac7 100644 --- a/apps/website/content/docs/meta.json +++ b/apps/website/content/docs/meta.json @@ -2,6 +2,7 @@ "title": "Documentation", "pages": [ "getting-started", + "migration", "---Core Reference---", "rules", "presets", diff --git a/apps/website/content/docs/migration.mdx b/apps/website/content/docs/migration.mdx new file mode 100644 index 0000000000..3ee0a22eea --- /dev/null +++ b/apps/website/content/docs/migration.mdx @@ -0,0 +1,168 @@ +--- +title: "Migrating from eslint-plugin-react" +description: "Complete guide for migrating from eslint-plugin-react to ESLint React" +--- + +import { Callout } from "fumadocs-ui/components/callout"; + + + +This guide provides a comprehensive comparison between [`eslint-plugin-react`](https://github.com/jsx-eslint/eslint-plugin-react) and ESLint React rules to help you migrate your existing configuration. + + + +## Overview + +ESLint React is designed as a modern replacement for `eslint-plugin-react` with improved performance, better TypeScript support, and more accurate rule implementations. However, not all rules have direct ✅s, and some behave differently. + + +## Rule Comparison Table + +The following table compares all rules from `eslint-plugin-react` with their ESLint React equivalents: + +| Rule Name | ESLint React | Prev Status | Status | +|-----------|:------------------------:|:---------------------------:|--------| +| [`boolean-prop-naming`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/boolean-prop-naming.md) | | ✅ | ❌ | +| [`button-has-type`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/button-has-type.md) | [`dom-no-missing-button-type`](/docs/rules/dom-no-missing-button-type) | ✅ | 🔧 | +| [`checked-requires-onchange-or-readonly`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/checked-requires-onchange-or-readonly.md) | | ✅ | ❌ | +| [`default-props-match-prop-types`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/default-props-match-prop-types.md) | | ✅ | 🚫 | +| [`destructuring-assignment`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/destructuring-assignment.md) | [`prefer-destructuring-assignment`](/docs/rules/prefer-destructuring-assignment) | 🔧 | ✅ | +| [`display-name`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/display-name.md) | [`no-missing-component-display-name`](/docs/rules/no-missing-component-display-name) | ✅ | ✅ | +| [`forbid-component-props`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/forbid-component-props.md) | | ✅ | ❌ | +| [`forbid-dom-props`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/forbid-dom-props.md) | | ✅ | ❌ | +| [`forbid-elements`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/forbid-elements.md) | | ✅ | ❌ | +| [`forbid-foreign-prop-types`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/forbid-foreign-prop-types.md) | | ✅ | 🚫 | +| [`forbid-prop-types`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/forbid-prop-types.md) | [`no-prop-types`](/docs/rules/no-prop-types) | ✅ | 🟡 | +| [`forward-ref-uses-ref`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/forward-ref-uses-ref.md) | [`no-useless-forward-ref`](/docs/rules/no-useless-forward-ref) | ✅ | 🟡 | +| [`function-component-definition`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/function-component-definition.md) | | 🔧 | ❌ | +| [`hook-use-state`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/hook-use-state.md) | [`naming-convention-use-state`](/docs/rules/naming-convention-use-state) | ✅ | ✅ | +| [`iframe-missing-sandbox`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/iframe-missing-sandbox.md) | [`dom-no-missing-iframe-sandbox`](/docs/rules/dom-no-missing-iframe-sandbox) | ✅ | 🔧 | +| [`jsx-boolean-value`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-boolean-value.md) | [`jsx-shorthand-boolean`](/docs/rules/jsx-shorthand-boolean) / [`avoid-shorthand-boolean`](/docs/rules/avoid-shorthand-boolean) | 🔧 | ✅ | +| [`jsx-child-element-spacing`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-child-element-spacing.md) | | ✅ | ❌ | +| [`jsx-closing-bracket-location`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-closing-bracket-location.md) | | 🔧 | ❌ | +| [`jsx-closing-tag-location`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-closing-tag-location.md) | | 🔧 | ❌ | +| [`jsx-curly-brace-presence`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-curly-brace-presence.md) | | 🔧 | ❌ | +| [`jsx-curly-newline`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-curly-newline.md) | | 🔧 | ❌ | +| [`jsx-curly-spacing`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-curly-spacing.md) | | 🔧 | ❌ | +| [`jsx-equals-spacing`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-equals-spacing.md) | | 🔧 | ❌ | +| [`jsx-filename-extension`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-filename-extension.md) | [`naming-convention-filename-extension`](/docs/rules/naming-convention-filename-extension) | ✅ | ✅ | +| [`jsx-first-prop-new-line`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-first-prop-new-line.md) | | 🔧 | ❌ | +| [`jsx-fragments`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-fragments.md) | [`jsx-shorthand-fragment`](/docs/rules/jsx-shorthand-fragment) / [`avoid-shorthand-fragment`](/docs/rules/avoid-shorthand-fragment) | 🔧 | ✅ | +| [`jsx-handler-names`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-handler-names.md) | | ✅ | ❌ | +| [`jsx-indent`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-indent.md) | | 🔧 | ❌ | +| [`jsx-indent-props`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-indent-props.md) | | 🔧 | ❌ | +| [`jsx-key`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-key.md) | [`no-missing-key`](/docs/rules/no-missing-key) | ✅ | ✅ | +| [`jsx-max-depth`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-max-depth.md) | | ✅ | ❌ | +| [`jsx-max-props-per-line`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-max-props-per-line.md) | | 🔧 | ❌ | +| [`jsx-newline`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-newline.md) | | 🔧 | ❌ | +| [`jsx-no-bind`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md) | | ✅ | ❌ | +| [`jsx-no-comment-textnodes`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-no-comment-textnodes.md) | [`jsx-no-comment-textnodes`](/docs/rules/jsx-no-comment-textnodes) / [`no-comment-textnodes`](/docs/rules/no-comment-textnodes) | ✅ | ✅ | +| [`jsx-no-constructed-context-values`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-no-constructed-context-values.md) | [`no-unstable-context-value`](/docs/rules/no-unstable-context-value) | ✅ | ✅ | +| [`jsx-no-duplicate-props`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-no-duplicate-props.md) | [`jsx-no-duplicate-props`](/docs/rules/jsx-no-duplicate-props) | ✅ | ✅ | +| [`jsx-no-leaked-render`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-no-leaked-render.md) | [`no-leaked-conditional-rendering`](/docs/rules/no-leaked-conditional-rendering) | 🔧 | ✅ | +| [`jsx-no-literals`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-no-literals.md) | | ✅ | ❌ | +| [`jsx-no-script-url`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-no-script-url.md) | [`dom-no-script-url`](/docs/rules/dom-no-script-url) | ✅ | ✅ | +| [`jsx-no-target-blank`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-no-target-blank.md) | [`dom-no-unsafe-target-blank`](/docs/rules/dom-no-unsafe-target-blank) | 🔧 | ✅ | +| [`jsx-no-undef`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-no-undef.md) | [`jsx-no-undef`](/docs/rules/jsx-no-undef) | ✅ | ✅ | +| [`jsx-no-useless-fragment`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-no-useless-fragment.md) | [`no-useless-fragment`](/docs/rules/no-useless-fragment) | 🔧 | ✅ | +| [`jsx-one-expression-per-line`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-one-expression-per-line.md) | | 🔧 | ❌ | +| [`jsx-pascal-case`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-pascal-case.md) | [`naming-convention-component-name`](/docs/rules/naming-convention-component-name) | ✅ | ✅ | +| [`jsx-props-no-multi-spaces`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-props-no-multi-spaces.md) | | 🔧 | ❌ | +| [`jsx-props-no-spread-multi`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-props-no-spread-multi.md) | | ✅ | ❌ | +| [`jsx-props-no-spreading`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-props-no-spreading.md) | | ✅ | ❌ | +| [`jsx-sort-default-props`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-sort-default-props.md) | | ✅ | ⚠️ | +| [`jsx-sort-props`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-sort-props.md) | | 🔧 | ❌ | +| [`jsx-space-before-closing`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-space-before-closing.md) | | 🔧 | ⚠️ | +| [`jsx-tag-spacing`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-tag-spacing.md) | | 🔧 | ❌ | +| [`jsx-uses-react`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-uses-react.md) | [`jsx-uses-react`](/docs/rules/jsx-uses-react) | ✅ | ✅ | +| [`jsx-uses-vars`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-uses-vars.md) | [`jsx-uses-vars`](/docs/rules/jsx-uses-vars) | ✅ | ✅ | +| [`jsx-wrap-multilines`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-wrap-multilines.md) | | 🔧 | ❌ | +| [`no-access-state-in-setstate`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-access-state-in-setstate.md) | [`no-access-state-in-setstate`](/docs/rules/no-access-state-in-setstate) | ✅ | ✅ | +| [`no-adjacent-inline-elements`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-adjacent-inline-elements.md) | | ✅ | ❌ | +| [`no-array-index-key`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-array-index-key.md) | [`no-array-index-key`](/docs/rules/no-array-index-key) | ✅ | ✅ | +| [`no-arrow-function-lifecycle`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-arrow-function-lifecycle.md) | | 🔧 | ❌ | +| [`no-children-prop`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-children-prop.md) | [`no-children-prop`](/docs/rules/no-children-prop) | ✅ | ✅ | +| [`no-danger`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-danger.md) | [`dom-no-dangerously-set-innerhtml`](/docs/rules/dom-no-dangerously-set-innerhtml) | ✅ | ✅ | +| [`no-danger-with-children`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-danger-with-children.md) | [`dom-no-dangerously-set-innerhtml-with-children`](/docs/rules/dom-no-dangerously-set-innerhtml-with-children) | ✅ | ✅ | +| [`no-deprecated`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-deprecated.md) | | ✅ | ❌ | +| [`no-did-mount-set-state`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-did-mount-set-state.md) | [`no-set-state-in-component-did-mount`](/docs/rules/no-set-state-in-component-did-mount) | ✅ | ✅ | +| [`no-did-update-set-state`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-did-update-set-state.md) | [`no-set-state-in-component-did-update`](/docs/rules/no-set-state-in-component-did-update) | ✅ | ✅ | +| [`no-direct-mutation-state`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-direct-mutation-state.md) | [`no-direct-mutation-state`](/docs/rules/no-direct-mutation-state) | ✅ | ✅ | +| [`no-find-dom-node`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-find-dom-node.md) | [`dom-no-find-dom-node`](/docs/rules/dom-no-find-dom-node) | ✅ | ✅ | +| [`no-invalid-html-attribute`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-invalid-html-attribute.md) | | ✅ | ❌ | +| [`no-is-mounted`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-is-mounted.md) | | ✅ | ❌ | +| [`no-multi-comp`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-multi-comp.md) | | ✅ | ❌ | +| [`no-namespace`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-namespace.md) | [`dom-no-namespace`](/docs/rules/dom-no-namespace) | ✅ | ✅ | +| [`no-object-type-as-default-prop`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-object-type-as-default-prop.md) | [`no-unstable-default-props`](/docs/rules/no-unstable-default-props) | ✅ | ✅ | +| [`no-redundant-should-component-update`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-redundant-should-component-update.md) | [`no-redundant-should-component-update`](/docs/rules/no-redundant-should-component-update) | ✅ | ✅ | +| [`no-render-return-value`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-render-return-value.md) | [`dom-no-render-return-value`](/docs/rules/dom-no-render-return-value) | ✅ | ✅ | +| [`no-set-state`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-set-state.md) | | ✅ | ❌ | +| [`no-string-refs`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-string-refs.md) | [`no-string-refs`](/docs/rules/no-string-refs) | ✅ | ✅ | +| [`no-this-in-sfc`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-this-in-sfc.md) | | ✅ | ❌ | +| [`no-typos`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-typos.md) | | ✅ | ❌ | +| [`no-unescaped-entities`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-unescaped-entities.md) | | ✅ | ❌ | +| [`no-unknown-property`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-unknown-property.md) | [`dom-no-unknown-property`](/docs/rules/dom-no-unknown-property) | 🔧 | ✅ | +| [`no-unsafe`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-unsafe.md) | [`no-unsafe-component-will-mount`](/docs/rules/no-unsafe-component-will-mount) + [`no-unsafe-component-will-receive-props`](/docs/rules/no-unsafe-component-will-receive-props) + [`no-unsafe-component-will-update`](/docs/rules/no-unsafe-component-will-update) | ✅ | 🟡 | +| [`no-unstable-nested-components`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-unstable-nested-components.md) | [`no-nested-component-definitions`](/docs/rules/no-nested-component-definitions) | ✅ | ✅ | +| [`no-unused-class-component-methods`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-unused-class-component-methods.md) | [`no-unused-class-component-members`](/docs/rules/no-unused-class-component-members) | ✅ | ✅ | +| [`no-unused-prop-types`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-unused-prop-types.md) | | ✅ | 🚫 | +| [`no-unused-state`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-unused-state.md) | [`no-unused-state`](/docs/rules/no-unused-state) | ✅ | ✅ | +| [`no-will-update-set-state`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-will-update-set-state.md) | [`no-set-state-in-component-will-update`](/docs/rules/no-set-state-in-component-will-update) | ✅ | ✅ | +| [`prefer-es6-class`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/prefer-es6-class.md) | | ✅ | ❌ | +| [`prefer-exact-props`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/prefer-exact-props.md) | | ✅ | ❌ | +| [`prefer-read-only-props`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/prefer-read-only-props.md) | [`prefer-read-only-props`](/docs/rules/prefer-read-only-props) | 🔧 | 🟡 | +| [`prefer-stateless-function`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/prefer-stateless-function.md) | | ✅ | ❌ | +| [`prop-types`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/prop-types.md) | [`no-prop-types`](/docs/rules/no-prop-types) | ✅ | 🟡 | +| [`react-in-jsx-scope`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/react-in-jsx-scope.md) | | ✅ | 🚫 | +| [`require-default-props`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/require-default-props.md) | | ✅ | 🚫 | +| [`require-optimization`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/require-optimization.md) | | ✅ | ❌ | +| [`require-render-return`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/require-render-return.md) | | ✅ | ❌ | +| [`self-closing-comp`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/self-closing-comp.md) | | 🔧 | ❌ | +| [`sort-comp`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/sort-comp.md) | | ✅ | ❌ | +| [`sort-default-props`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/sort-default-props.md) | | ✅ | ❌ | +| [`sort-prop-types`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/sort-prop-types.md) | | 🔧 | ❌ | +| [`state-in-constructor`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/state-in-constructor.md) | | ✅ | ❌ | +| [`static-property-placement`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/static-property-placement.md) | | ✅ | ❌ | +| [`style-prop-object`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/style-prop-object.md) | | ✅ | ❌ | +| [`void-dom-elements-no-children`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/void-dom-elements-no-children.md) | [`dom-no-void-elements-with-children`](/docs/rules/dom-no-void-elements-with-children) | ✅ | ✅ | + + +## Legend + +### Status Column +- ✅ **Fully supported** - Rule has a direct equivalent in ESLint React +- 🟡 **Partial support** - ESLint React provides similar but not identical functionality +- ❌ **Not supported** - No equivalent rule available in ESLint React +- 🚫 **Deprecated** - Rule is not applicable in modern React development +- ⚠️ **Warning** - Rule has been deprecated in eslint-plugin-react + +### Prev Status Column +- ✅ **Standard rule** - Original rule provided linting without auto-fix +- 🔧 **Fixable rule** - Original rule supported automatic fixes + +### ESLint React Column +- Rule names link to ESLint React documentation +- Multiple rules separated by `/` indicate alternative approaches +- Rules with `+` indicate multiple rules that together provide equivalent functionality + +## Gradual Migration + +You can migrate gradually by using both plugins together: + +```js +export default [ + // Start with ESLint React + { + ...eslintReact.configs.recommended, + }, + // Add specific eslint-plugin-react rules you still need + { + plugins: { + react: pluginReact, + }, + rules: { + "react/jsx-sort-props": "warn", // Example missing rule + }, + }, +]; +```