diff --git a/apps/website/content/docs/migration.mdx b/apps/website/content/docs/migration.mdx index 0bf3f679f..f10ef469f 100644 --- a/apps/website/content/docs/migration.mdx +++ b/apps/website/content/docs/migration.mdx @@ -34,111 +34,111 @@ migration for React written with function components and no longer use `propType The following table compares all rules from `eslint-plugin-react` with their ESLint React (or external) equivalents: -| `eslint-plugin-react` Rule Name | New Rule Name | 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) | [`no-prop-types`](/docs/rules/no-prop-types) | ✅ | 🚫 | -| [`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) | 🔧 | 🔧 | -| [`jsx-child-element-spacing`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-child-element-spacing.md) | [`@stylistic/jsx-child-element-spacing`](https://eslint.style/rules/jsx-child-element-spacing) | ✅ | ➡️ | -| [`jsx-closing-bracket-location`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-closing-bracket-location.md) | [`@stylistic/jsx-closing-bracket-location`](https://eslint.style/rules/jsx-closing-bracket-location) | 🔧 | ➡️ | -| [`jsx-closing-tag-location`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-closing-tag-location.md) | [`@stylistic/jsx-closing-tag-location`](https://eslint.style/rules/jsx-closing-tag-location) | 🔧 | ➡️ | -| [`jsx-curly-brace-presence`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-curly-brace-presence.md) | [`@stylistic/jsx-curly-brace-presence`](https://eslint.style/rules/jsx-curly-brace-presence) | 🔧 | ➡️ | -| [`jsx-curly-newline`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-curly-newline.md) | [`@stylistic/jsx-curly-newline`](https://eslint.style/rules/jsx-curly-newline) | 🔧 | ➡️ | -| [`jsx-curly-spacing`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-curly-spacing.md) | [`@stylistic/jsx-curly-spacing`](https://eslint.style/rules/jsx-curly-spacing) | 🔧 | ➡️ | -| [`jsx-equals-spacing`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-equals-spacing.md) | [`@stylistic/jsx-equals-spacing`](https://eslint.style/rules/jsx-equals-spacing) | 🔧 | ➡️ | -| [`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) | [`@stylistic/jsx-first-prop-new-line`](https://eslint.style/rules/jsx-first-prop-new-line) | 🔧 | ➡️ | -| [`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) | 🔧 | 🔧 | -| [`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) | [`@stylistic/jsx-indent`](https://eslint.style/rules/jsx-indent) | 🔧 | ➡️ | -| [`jsx-indent-props`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-indent-props.md) | [`@stylistic/jsx-indent-props`](https://eslint.style/rules/jsx-indent-props) | 🔧 | ➡️ | -| [`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) + [`no-duplicate-key`](/docs/rules/no-duplicate-key) + [`no-implicit-key`](/docs/rules/no-implicit-key) [`jsx-key-before-spread`](/docs/rules/jsx-key-before-spread) + [`no-unnecessary-key`](/docs/rules/no-unnecessary-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) | [`@stylistic/jsx-max-props-per-line`](https://eslint.style/rules/jsx-max-props-per-line) | 🔧 | ➡️ | -| [`jsx-newline`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-newline.md) | [`@stylistic/jsx-newline`](https://eslint.style/rules/jsx-newline) | 🔧 | ➡️ | -| [`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) | [`@stylistic/jsx-one-expression-per-line`](https://eslint.style/rules/jsx-one-expression-per-line) | 🔧 | ➡️ | -| [`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) | [`@stylistic/jsx-props-no-multi-spaces`](https://eslint.style/rules/jsx-props-no-multi-spaces) | 🔧 | ➡️ | -| [`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) | [`@stylistic/jsx-sort-props`](https://eslint.style/rules/jsx-sort-props) | 🔧 | ➡️ | -| [`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) | [`@stylistic/jsx-tag-spacing`](https://eslint.style/rules/jsx-tag-spacing) | 🔧 | ➡️ | -| [`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) | [`@stylistic/jsx-wrap-multilines`](https://eslint.style/rules/jsx-wrap-multilines) | 🔧 | ➡️ | -| [`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-component-will-mount`](/docs/rules/no-component-will-mount) + [`no-component-will-receive-props`](/docs/rules/no-component-will-receive-props) + [`no-component-will-update`](/docs/rules/no-component-will-update) + [`no-create-ref`](/docs/rules/no-create-ref) + [`no-forward-ref`](/docs/rules/no-forward-ref) + [`dom/no-render`](/docs/rules/dom-no-render) + [`dom/no-hydrate`](/docs/rules/dom-no-hydrate) + [`dom/no-find-dom-node`](/docs/rules/dom-no-find-dom-node) | ✅ | 🟡 | -| [`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-props`](/docs/rules/no-unused-props) | ✅ | 🚫 | -| [`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) | [`no-prop-types`](/docs/rules/no-prop-types) | ✅ | 🚫 | -| [`prefer-exact-props`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/prefer-exact-props.md) | [`no-prop-types`](/docs/rules/no-prop-types) | ✅ | 🚫 | -| [`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) | [`no-prop-types`](/docs/rules/no-prop-types) | ✅ | 🚫 | -| [`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) | [`@stylistic/jsx-self-closing-comp`](https://eslint.style/rules/jsx-self-closing-comp) | 🔧 | ➡️ | -| [`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) | [`no-prop-types`](/docs/rules/no-prop-types) | ✅ | 🚫 | -| [`sort-prop-types`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/sort-prop-types.md) | [`no-prop-types`](/docs/rules/no-prop-types) | 🔧 | 🚫 | -| [`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) | ✅ | ✅ | +| `eslint-plugin-react` Rule Name | New Rule Name | 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) | [`no-prop-types`](/docs/rules/no-prop-types) | ✅ | 🚫 | +| [`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) | 🔧 | 🔧 | +| [`jsx-child-element-spacing`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-child-element-spacing.md) | [`@stylistic/jsx-child-element-spacing`](https://eslint.style/rules/jsx-child-element-spacing) | ✅ | ➡️ | +| [`jsx-closing-bracket-location`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-closing-bracket-location.md) | [`@stylistic/jsx-closing-bracket-location`](https://eslint.style/rules/jsx-closing-bracket-location) | 🔧 | ➡️ | +| [`jsx-closing-tag-location`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-closing-tag-location.md) | [`@stylistic/jsx-closing-tag-location`](https://eslint.style/rules/jsx-closing-tag-location) | 🔧 | ➡️ | +| [`jsx-curly-brace-presence`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-curly-brace-presence.md) | [`@stylistic/jsx-curly-brace-presence`](https://eslint.style/rules/jsx-curly-brace-presence) | 🔧 | ➡️ | +| [`jsx-curly-newline`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-curly-newline.md) | [`@stylistic/jsx-curly-newline`](https://eslint.style/rules/jsx-curly-newline) | 🔧 | ➡️ | +| [`jsx-curly-spacing`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-curly-spacing.md) | [`@stylistic/jsx-curly-spacing`](https://eslint.style/rules/jsx-curly-spacing) | 🔧 | ➡️ | +| [`jsx-equals-spacing`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-equals-spacing.md) | [`@stylistic/jsx-equals-spacing`](https://eslint.style/rules/jsx-equals-spacing) | 🔧 | ➡️ | +| [`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) | [`@stylistic/jsx-first-prop-new-line`](https://eslint.style/rules/jsx-first-prop-new-line) | 🔧 | ➡️ | +| [`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) | 🔧 | 🔧 | +| [`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) | [`@stylistic/jsx-indent`](https://eslint.style/rules/jsx-indent) | 🔧 | ➡️ | +| [`jsx-indent-props`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-indent-props.md) | [`@stylistic/jsx-indent-props`](https://eslint.style/rules/jsx-indent-props) | 🔧 | ➡️ | +| [`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) + [`no-duplicate-key`](/docs/rules/no-duplicate-key) + [`no-implicit-key`](/docs/rules/no-implicit-key) [`jsx-key-before-spread`](/docs/rules/jsx-key-before-spread) + [`no-unnecessary-key`](/docs/rules/no-unnecessary-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) | [`@stylistic/jsx-max-props-per-line`](https://eslint.style/rules/jsx-max-props-per-line) | 🔧 | ➡️ | +| [`jsx-newline`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-newline.md) | [`@stylistic/jsx-newline`](https://eslint.style/rules/jsx-newline) | 🔧 | ➡️ | +| [`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) | [`@stylistic/jsx-one-expression-per-line`](https://eslint.style/rules/jsx-one-expression-per-line) | 🔧 | ➡️ | +| [`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) | [`@stylistic/jsx-props-no-multi-spaces`](https://eslint.style/rules/jsx-props-no-multi-spaces) | 🔧 | ➡️ | +| [`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) | [`@stylistic/jsx-sort-props`](https://eslint.style/rules/jsx-sort-props) | 🔧 | ➡️ | +| [`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) | [`@stylistic/jsx-tag-spacing`](https://eslint.style/rules/jsx-tag-spacing) | 🔧 | ➡️ | +| [`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) | [`@stylistic/jsx-wrap-multilines`](https://eslint.style/rules/jsx-wrap-multilines) | 🔧 | ➡️ | +| [`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-component-will-mount`](/docs/rules/no-component-will-mount) + [`no-component-will-receive-props`](/docs/rules/no-component-will-receive-props) + [`no-component-will-update`](/docs/rules/no-component-will-update) + [`no-create-ref`](/docs/rules/no-create-ref) + [`no-forward-ref`](/docs/rules/no-forward-ref) + [`dom/no-render`](/docs/rules/dom-no-render) + [`dom/no-render-return-value`](/docs/rules/dom/no-render-return-value) + [`dom/no-hydrate`](/docs/rules/dom-no-hydrate) + [`dom/no-find-dom-node`](/docs/rules/dom-no-find-dom-node) | ✅ | 🟡 | +| [`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-props`](/docs/rules/no-unused-props) | ✅ | 🚫 | +| [`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) | [`no-prop-types`](/docs/rules/no-prop-types) | ✅ | 🚫 | +| [`prefer-exact-props`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/prefer-exact-props.md) | [`no-prop-types`](/docs/rules/no-prop-types) | ✅ | 🚫 | +| [`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) | [`no-prop-types`](/docs/rules/no-prop-types) | ✅ | 🚫 | +| [`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) | [`@stylistic/jsx-self-closing-comp`](https://eslint.style/rules/jsx-self-closing-comp) | 🔧 | ➡️ | +| [`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) | [`no-prop-types`](/docs/rules/no-prop-types) | ✅ | 🚫 | +| [`sort-prop-types`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/sort-prop-types.md) | [`no-prop-types`](/docs/rules/no-prop-types) | 🔧 | 🚫 | +| [`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) | ✅ | ✅ | ### ESLint React Column diff --git a/apps/website/content/docs/presets.mdx b/apps/website/content/docs/presets.mdx index 7549e4bbe..f0a4813cd 100644 --- a/apps/website/content/docs/presets.mdx +++ b/apps/website/content/docs/presets.mdx @@ -27,6 +27,12 @@ The following presets are available in `@eslint-react/eslint-plugin`: - `recommended-type-checked`\ Same as the `recommended-typescript` preset but enables additional rules that require type information. +### Combined + +- `no-deprecated`\ + Enable all non-deprecated rules from the `x`, `dom`, and `web-api` presets.\ + _This preset sets the severity of these rules to `"error"`._ + ## Other - `disable-dom`\ diff --git a/packages/plugins/eslint-plugin/README.md b/packages/plugins/eslint-plugin/README.md index 49e89c16e..ec9cae306 100644 --- a/packages/plugins/eslint-plugin/README.md +++ b/packages/plugins/eslint-plugin/README.md @@ -174,8 +174,8 @@ ESLint React is not affiliated with Meta Corporation or [facebook/react](https:/ Contributions are welcome! -Please follow our [contributing guidelines](https://github.com/Rel1cx/eslint-react/tree/main/.github/CONTRIBUTING.md). +Please follow our [contributing guidelines](https://github.com/Rel1cx/eslint-react/tree/add-no-deprecated-preset/.github/CONTRIBUTING.md). ## License -This project is licensed under the MIT License - see the [LICENSE](https://github.com/Rel1cx/eslint-react/tree/main/LICENSE) file for details. +This project is licensed under the MIT License - see the [LICENSE](https://github.com/Rel1cx/eslint-react/tree/add-no-deprecated-preset/LICENSE) file for details. diff --git a/packages/plugins/eslint-plugin/src/configs/all.ts b/packages/plugins/eslint-plugin/src/configs/all.ts index 05cb68d10..28bd9ccce 100644 --- a/packages/plugins/eslint-plugin/src/configs/all.ts +++ b/packages/plugins/eslint-plugin/src/configs/all.ts @@ -116,5 +116,5 @@ export const plugins = { }; export const settings = { - ...dom.settings, + ...x.settings, }; diff --git a/packages/plugins/eslint-plugin/src/configs/dom.ts b/packages/plugins/eslint-plugin/src/configs/dom.ts index 7dd044276..63414781f 100644 --- a/packages/plugins/eslint-plugin/src/configs/dom.ts +++ b/packages/plugins/eslint-plugin/src/configs/dom.ts @@ -1,5 +1,4 @@ import type { RuleConfig } from "@eslint-react/kit"; -import { DEFAULT_ESLINT_REACT_SETTINGS } from "@eslint-react/shared"; import reactDom from "eslint-plugin-react-dom"; export const name = "@eslint-react/dom"; @@ -25,7 +24,3 @@ export const rules = { export const plugins = { "@eslint-react/dom": reactDom, }; - -export const settings = { - "react-x": DEFAULT_ESLINT_REACT_SETTINGS, -}; diff --git a/packages/plugins/eslint-plugin/src/configs/no-deprecated.ts b/packages/plugins/eslint-plugin/src/configs/no-deprecated.ts new file mode 100644 index 000000000..6b73d6624 --- /dev/null +++ b/packages/plugins/eslint-plugin/src/configs/no-deprecated.ts @@ -0,0 +1,24 @@ +import type { RuleConfig } from "@eslint-react/kit"; + +import * as dom from "./dom"; +import * as x from "./x"; + +export const name = "@eslint-react/no-deprecated"; + +export const rules = { + "@eslint-react/no-component-will-mount": "error", + "@eslint-react/no-component-will-receive-props": "error", + "@eslint-react/no-component-will-update": "error", + "@eslint-react/no-create-ref": "error", + "@eslint-react/no-forward-ref": "error", + + "@eslint-react/dom/no-find-dom-node": "error", + "@eslint-react/dom/no-hydrate": "error", + "@eslint-react/dom/no-render": "error", + "@eslint-react/dom/no-render-return-value": "error", +} as const satisfies Record; + +export const plugins = { + ...x.plugins, + ...dom.plugins, +}; diff --git a/packages/plugins/eslint-plugin/src/configs/recommended.ts b/packages/plugins/eslint-plugin/src/configs/recommended.ts index c9c91782a..186a1c6c3 100644 --- a/packages/plugins/eslint-plugin/src/configs/recommended.ts +++ b/packages/plugins/eslint-plugin/src/configs/recommended.ts @@ -28,5 +28,5 @@ export const plugins = { }; export const settings = { - ...dom.settings, + ...x.settings, }; diff --git a/packages/plugins/eslint-plugin/src/configs/web-api.ts b/packages/plugins/eslint-plugin/src/configs/web-api.ts index 802bd8bfa..d310d53a0 100644 --- a/packages/plugins/eslint-plugin/src/configs/web-api.ts +++ b/packages/plugins/eslint-plugin/src/configs/web-api.ts @@ -1,7 +1,7 @@ import type { RuleConfig } from "@eslint-react/kit"; import reactWebApi from "eslint-plugin-react-web-api"; -import * as dom from "./dom"; +import * as x from "./x"; export const name = "@eslint-react/web-api"; @@ -17,5 +17,5 @@ export const plugins = { }; export const settings = { - ...dom.settings, + ...x.settings, }; diff --git a/packages/plugins/eslint-plugin/src/index.ts b/packages/plugins/eslint-plugin/src/index.ts index 79224d25a..88e372505 100644 --- a/packages/plugins/eslint-plugin/src/index.ts +++ b/packages/plugins/eslint-plugin/src/index.ts @@ -1,3 +1,5 @@ +import { name, version } from "../package.json"; + import type { CompatiblePlugin } from "@eslint-react/kit"; import reactDebug from "eslint-plugin-react-debug"; import reactDom from "eslint-plugin-react-dom"; @@ -6,7 +8,6 @@ import reactNamingConvention from "eslint-plugin-react-naming-convention"; import reactWebApi from "eslint-plugin-react-web-api"; import react from "eslint-plugin-react-x"; -import { name, version } from "../package.json"; import * as allConfig from "./configs/all"; import * as debugConfig from "./configs/debug"; import * as disableConflictEslintPluginReact from "./configs/disable-conflict-eslint-plugin-react"; @@ -15,6 +16,7 @@ import * as disableDomConfig from "./configs/disable-dom"; import * as disableTypeCheckedConfig from "./configs/disable-type-checked"; import * as disableWebApiConfig from "./configs/disable-web-api"; import * as domConfig from "./configs/dom"; +import * as noDeprecatedConfig from "./configs/no-deprecated"; import * as offConfig from "./configs/off"; import * as recommendedConfig from "./configs/recommended"; import * as recommendedTypeCheckedConfig from "./configs/recommended-type-checked"; @@ -40,18 +42,63 @@ const plugin: CompatiblePlugin = { export default { ...plugin, configs: { + /** + * Enable all rules in this plugin + */ ["all"]: allConfig, + /** + * Enable debug rules + */ ["debug"]: debugConfig, + /** + * Disable rules in `eslint-plugin-react` that conflict with rules in our plugins + */ ["disable-conflict-eslint-plugin-react"]: disableConflictEslintPluginReact, + /** + * Disable debug rules + */ ["disable-debug"]: disableDebugConfig, + /** + * Disable rules in the `dom` preset + */ ["disable-dom"]: disableDomConfig, + /** + * Disable rules that require type information + */ ["disable-type-checked"]: disableTypeCheckedConfig, + /** + * Disable rules in the `web-api` preset + */ ["disable-web-api"]: disableWebApiConfig, + /** + * Enable rules for `"react-dom"` + */ ["dom"]: domConfig, + /** + * Enable all non-deprecated rules from the `x`, `dom`, and `web-api` presets + * This preset sets the severity of these rules to `"error"` + */ + ["no-deprecated"]: noDeprecatedConfig, + /** + * Disable all rules in this plugin except for debug rules + */ ["off"]: offConfig, + /** + * Enforce rules that are recommended by ESLint React for general purpose React + React DOM projects + * This preset includes the `x`, `dom`, and `web-api` presets + */ ["recommended"]: recommendedConfig, + /** + * Same as the `recommended-typescript` preset but enables additional rules that require type information + */ ["recommended-type-checked"]: recommendedTypeCheckedConfig, + /** + * Same as the `recommended` preset but disables rules that can be enforced by TypeScript + */ ["recommended-typescript"]: recommendedTypeScriptConfig, + /** + * Enable rules for `"react"` + */ ["x"]: xConfig, }, };