refactor(plugins/x): rename rules 'jsx-uses-vars' to 'use-jsx-vars' and 'jsx-no-duplicate-props' to 'no-duplicate-jsx-props'

Rel1cx · Rel1cx · commit 1d1053a901f8 · 2024-12-22T06:25:46.000+08:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,7 +2,19 @@
 
 ### 🪄 Improvements
 
-- refactor(plugins/dom): rename `no-children-in-void-dom-elements` to `no-void-elements-with-children` (the previous rule will still be available until the next major update to avoid breaking changes).
+- refactor(plugins/x): rename `jsx-use-vars` to `use-jsx-vars`.
+- refactor(plugins/x): rename `jsx-no-duplicate-props` to `no-duplicate-jsx-props`.
+- refactor(plugins/dom): rename `no-children-in-void-dom-elements` to `no-void-elements-with-children`.
+
+### 📝 Changes you should be aware of
+
+The following rules have been renamed:
+
+- `jsx-uses-vars` to `use-jsx-vars`.
+- `jsx-no-duplicate-props` to `no-duplicate-jsx-props`.
+- `dom/no-children-in-void-dom-elements` to `dom/no-void-elements-with-children`.
+
+The new rule names are aligned with the same rules in the biome (if any) to enhance consistency. The old rule names will still be available until the next major update to avoid breaking changes.
 
 ## v1.21.0 (Fri 20 Dec 2024)
 
diff --git a/packages/plugins/eslint-plugin-react-x/README.md b/packages/plugins/eslint-plugin-react-x/README.md
@@ -30,8 +30,6 @@ export default [
     rules: {
       // react-x recommended rules
       "react-x/ensure-forward-ref-using-ref": "warn",
-      "react-x/jsx-no-duplicate-props": "warn",
-      "react-x/jsx-uses-vars": "warn",
       "react-x/no-access-state-in-setstate": "error",
       "react-x/no-array-index-key": "warn",
       "react-x/no-children-count": "warn",
@@ -48,6 +46,7 @@ export default [
       "react-x/no-create-ref": "error",
       "react-x/no-default-props": "error",
       "react-x/no-direct-mutation-state": "error",
+      "react-x/no-duplicate-jsx-props": "warn",
       "react-x/no-duplicate-key": "error",
       "react-x/no-forward-ref": "warn",
       "react-x/no-implicit-key": "warn",
@@ -66,6 +65,7 @@ export default [
       "react-x/no-unstable-default-props": "warn",
       "react-x/no-unused-class-component-members": "warn",
       "react-x/no-unused-state": "warn",
+      "react-x/use-jsx-vars": "warn",
     },
   },
 ];
diff --git a/packages/plugins/eslint-plugin-react-x/src/index.ts b/packages/plugins/eslint-plugin-react-x/src/index.ts
@@ -2,8 +2,6 @@ import { name, version } from "../package.json";
 import avoidShorthandBoolean from "./rules/avoid-shorthand-boolean";
 import avoidShorthandFragment from "./rules/avoid-shorthand-fragment";
 import forwardRefUsingRef from "./rules/ensure-forward-ref-using-ref";
-import jsxNoDuplicateProps from "./rules/jsx-no-duplicate-props";
-import jsxUsesVars from "./rules/jsx-uses-vars";
 import noAccessStateInSetstate from "./rules/no-access-state-in-setstate";
 import noArrayIndexKey from "./rules/no-array-index-key";
 import noChildrenCount from "./rules/no-children-count";
@@ -23,6 +21,7 @@ import noContextProvider from "./rules/no-context-provider";
 import noCreateRef from "./rules/no-create-ref";
 import noDefaultProps from "./rules/no-default-props";
 import noDirectMutationState from "./rules/no-direct-mutation-state";
+import noDuplicateJsxProps from "./rules/no-duplicate-jsx-props";
 import noDuplicateKey from "./rules/no-duplicate-key";
 import noForwardRef from "./rules/no-forward-ref";
 import noImplicitKey from "./rules/no-implicit-key";
@@ -49,6 +48,7 @@ import preferReactNamespaceImport from "./rules/prefer-react-namespace-import";
 import preferReadOnlyProps from "./rules/prefer-read-only-props";
 import preferShorthandBoolean from "./rules/prefer-shorthand-boolean";
 import preferShorthandFragment from "./rules/prefer-shorthand-fragment";
+import useJsxVars from "./rules/use-jsx-vars";
 
 export default {
   meta: {
@@ -59,8 +59,6 @@ export default {
     "avoid-shorthand-boolean": avoidShorthandBoolean,
     "avoid-shorthand-fragment": avoidShorthandFragment,
     "ensure-forward-ref-using-ref": forwardRefUsingRef,
-    "jsx-no-duplicate-props": jsxNoDuplicateProps,
-    "jsx-uses-vars": jsxUsesVars,
     "no-access-state-in-setstate": noAccessStateInSetstate,
     "no-array-index-key": noArrayIndexKey,
     "no-children-count": noChildrenCount,
@@ -80,6 +78,7 @@ export default {
     "no-create-ref": noCreateRef,
     "no-default-props": noDefaultProps,
     "no-direct-mutation-state": noDirectMutationState,
+    "no-duplicate-jsx-props": noDuplicateJsxProps,
     "no-duplicate-key": noDuplicateKey,
     "no-forward-ref": noForwardRef,
     "no-implicit-key": noImplicitKey,
@@ -106,8 +105,13 @@ export default {
     "prefer-read-only-props": preferReadOnlyProps,
     "prefer-shorthand-boolean": preferShorthandBoolean,
     "prefer-shorthand-fragment": preferShorthandFragment,
+    "use-jsx-vars": useJsxVars,
 
     // Part: deprecated rules
+    /** @deprecated Use `no-duplicate-jsx-props` instead. */
+    "jsx-no-duplicate-props": noDuplicateJsxProps,
+    /** @deprecated Use `use-jsx-vars` instead. */
+    "jsx-uses-vars": useJsxVars,
     /** @deprecated Use `no-complex-conditional-rendering` instead. */
     "no-complicated-conditional-rendering": noComplexConditionalRendering,
   },
diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-duplicate-jsx-props.spec.ts b/packages/plugins/eslint-plugin-react-x/src/rules/no-duplicate-jsx-props.spec.ts
@@ -1,23 +1,23 @@
 import { allValid, ruleTester } from "../../../../../test";
-import rule, { RULE_NAME } from "./jsx-no-duplicate-props";
+import rule, { RULE_NAME } from "./no-duplicate-jsx-props";
 
 ruleTester.run(RULE_NAME, rule, {
   invalid: [
     {
       code: /* tsx */ `<div a="1" a="2" />;`,
-      errors: [{ messageId: "jsxNoDuplicateProps" }],
+      errors: [{ messageId: "noDuplicateJsxProps" }],
     },
     {
       code: /* tsx */ `<div a="1" b="2" a="3" />;`,
-      errors: [{ messageId: "jsxNoDuplicateProps" }],
+      errors: [{ messageId: "noDuplicateJsxProps" }],
     },
     {
       code: /* tsx */ `<div a="1" {...b} a="2" />;`,
-      errors: [{ messageId: "jsxNoDuplicateProps" }],
+      errors: [{ messageId: "noDuplicateJsxProps" }],
     },
     {
       code: /* tsx */ `<div a="1" {...a} {...b} a="2" />;`,
-      errors: [{ messageId: "jsxNoDuplicateProps" }],
+      errors: [{ messageId: "noDuplicateJsxProps" }],
     },
   ],
   valid: [
diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-duplicate-jsx-props.ts b/packages/plugins/eslint-plugin-react-x/src/rules/no-duplicate-jsx-props.ts
@@ -5,7 +5,7 @@ import type { CamelCase } from "string-ts";
 
 import { createRule } from "../utils";
 
-export const RULE_NAME = "jsx-no-duplicate-props";
+export const RULE_NAME = "no-duplicate-jsx-props";
 
 export const RULE_FEATURES = [
   "CHK",
@@ -21,7 +21,7 @@ export default createRule<[], MessageID>({
       [Symbol.for("rule_features")]: RULE_FEATURES,
     },
     messages: {
-      jsxNoDuplicateProps: "Duplicate prop '{{name}}'",
+      noDuplicateJsxProps: "This JSX property is assigned multiple times.",
     },
     schema: [],
   },
@@ -39,9 +39,8 @@ export default createRule<[], MessageID>({
             continue;
           }
           context.report({
-            messageId: "jsxNoDuplicateProps",
+            messageId: "noDuplicateJsxProps",
             node: attr,
-            data: { name },
           });
         }
       },
diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/use-jsx-vars.spec.ts b/packages/plugins/eslint-plugin-react-x/src/rules/use-jsx-vars.spec.ts
@@ -1,5 +1,5 @@
 import { allValid, ruleTester } from "../../../../../test";
-import rule, { RULE_NAME } from "./jsx-uses-vars";
+import rule, { RULE_NAME } from "./use-jsx-vars";
 
 ruleTester.run(RULE_NAME, rule, {
   invalid: [],
diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/use-jsx-vars.ts b/packages/plugins/eslint-plugin-react-x/src/rules/use-jsx-vars.ts
@@ -6,7 +6,7 @@ import type { CamelCase } from "string-ts";
 
 import { createRule } from "../utils";
 
-export const RULE_NAME = "jsx-uses-vars";
+export const RULE_NAME = "use-jsx-vars";
 
 export const RULE_FEATURES = [] as const satisfies RuleFeature[];
 
@@ -21,7 +21,7 @@ export default createRule<[], MessageID>({
       [Symbol.for("rule_features")]: RULE_FEATURES,
     },
     messages: {
-      jsxUsesVars: "",
+      useJsxVars: "",
     },
     schema: [],
   },
diff --git a/packages/plugins/eslint-plugin/src/configs/all.ts b/packages/plugins/eslint-plugin/src/configs/all.ts
@@ -11,8 +11,6 @@ export const name = "@eslint-react/all";
 
 export const rules = {
   "@eslint-react/ensure-forward-ref-using-ref": "warn",
-  "@eslint-react/jsx-no-duplicate-props": "warn",
-  "@eslint-react/jsx-uses-vars": "warn",
   "@eslint-react/no-access-state-in-setstate": "error",
   "@eslint-react/no-array-index-key": "warn",
   "@eslint-react/no-children-count": "warn",
@@ -32,6 +30,7 @@ export const rules = {
   "@eslint-react/no-create-ref": "error",
   "@eslint-react/no-default-props": "error",
   "@eslint-react/no-direct-mutation-state": "error",
+  "@eslint-react/no-duplicate-jsx-props": "warn",
   "@eslint-react/no-duplicate-key": "error",
   "@eslint-react/no-forward-ref": "warn",
   "@eslint-react/no-implicit-key": "warn",
@@ -55,9 +54,9 @@ export const rules = {
   "@eslint-react/prefer-destructuring-assignment": "warn",
   "@eslint-react/prefer-shorthand-boolean": "warn",
   "@eslint-react/prefer-shorthand-fragment": "warn",
+  "@eslint-react/use-jsx-vars": "warn",
 
   // Part: DOM
-  "@eslint-react/dom/no-void-elements-with-children": "warn",
   "@eslint-react/dom/no-dangerously-set-innerhtml": "warn",
   "@eslint-react/dom/no-dangerously-set-innerhtml-with-children": "error",
   "@eslint-react/dom/no-find-dom-node": "error",
@@ -69,6 +68,7 @@ export const rules = {
   "@eslint-react/dom/no-unknown-property": "warn",
   "@eslint-react/dom/no-unsafe-iframe-sandbox": "warn",
   "@eslint-react/dom/no-unsafe-target-blank": "warn",
+  "@eslint-react/dom/no-void-elements-with-children": "warn",
 
   // Part: Web API
   "@eslint-react/web-api/no-leaked-event-listener": "warn",
diff --git a/packages/plugins/eslint-plugin/src/configs/core.ts b/packages/plugins/eslint-plugin/src/configs/core.ts
@@ -6,8 +6,6 @@ export const name = "@eslint-react/core";
 
 export const rules = {
   "@eslint-react/ensure-forward-ref-using-ref": "warn",
-  "@eslint-react/jsx-no-duplicate-props": "warn",
-  "@eslint-react/jsx-uses-vars": "warn",
   "@eslint-react/no-access-state-in-setstate": "error",
   "@eslint-react/no-array-index-key": "warn",
   "@eslint-react/no-children-count": "warn",
@@ -24,6 +22,7 @@ export const rules = {
   "@eslint-react/no-create-ref": "error",
   "@eslint-react/no-default-props": "error",
   "@eslint-react/no-direct-mutation-state": "error",
+  "@eslint-react/no-duplicate-jsx-props": "warn",
   "@eslint-react/no-duplicate-key": "error",
   "@eslint-react/no-forward-ref": "warn",
   "@eslint-react/no-implicit-key": "warn",
@@ -42,6 +41,7 @@ export const rules = {
   "@eslint-react/no-unstable-default-props": "warn",
   "@eslint-react/no-unused-class-component-members": "warn",
   "@eslint-react/no-unused-state": "warn",
+  "@eslint-react/use-jsx-vars": "warn",
 } as const satisfies RulePreset;
 
 export const plugins = {
diff --git a/packages/plugins/eslint-plugin/src/configs/recommended-typescript.ts b/packages/plugins/eslint-plugin/src/configs/recommended-typescript.ts
@@ -7,8 +7,8 @@ export const name = "@eslint-react/recommended-typescript";
 export const rules = {
   ...recommended.rules,
   "@eslint-react/dom/no-unknown-property": "off",
-  "@eslint-react/jsx-no-duplicate-props": "off",
-  "@eslint-react/jsx-uses-vars": "off",
+  "@eslint-react/no-duplicate-jsx-props": "off",
+  "@eslint-react/use-jsx-vars": "off",
 } as const satisfies RulePreset;
 
 export const plugins = {
diff --git a/website/next.config.mjs b/website/next.config.mjs
@@ -55,6 +55,14 @@ const nextConfig = {
         permanent: true,
       },
       // Redirects for deprecated rules
+      {
+        source: "/docs/rules/jsx-uses-vars",
+        destination: "/docs/rules/use-jsx-vars",
+      },
+      {
+        source: "/docs/rules/jsx-no-duplicate-props",
+        destination: "/docs/rules/no-duplicate-jsx-props",
+      },
       {
         source: "/docs/rules/no-complicated-conditional-rendering",
         destination: "/docs/rules/no-complex-conditional-rendering",
diff --git a/website/pages/docs/rules/_meta.ts b/website/pages/docs/rules/_meta.ts
@@ -23,8 +23,6 @@ export default {
     type: "separator",
   },
   "ensure-forward-ref-using-ref": "ensure-forward-ref-using-ref",
-  "jsx-no-duplicate-props": "jsx-no-duplicate-props",
-  "jsx-uses-vars": "jsx-uses-vars",
   "no-access-state-in-setstate": "no-access-state-in-setstate",
   "no-array-index-key": "no-array-index-key",
   "no-children-count": "no-children-count",
@@ -44,6 +42,7 @@ export default {
   "no-create-ref": "no-create-ref",
   "no-default-props": "no-default-props",
   "no-direct-mutation-state": "no-direct-mutation-state",
+  "no-duplicate-jsx-props": "no-duplicate-jsx-props",
   "no-duplicate-key": "no-duplicate-key",
   "no-forward-ref": "no-forward-ref",
   "no-implicit-key": "no-implicit-key",
@@ -70,6 +69,7 @@ export default {
   "prefer-read-only-props": "prefer-read-only-props",
   "prefer-shorthand-boolean": "prefer-shorthand-boolean",
   "prefer-shorthand-fragment": "prefer-shorthand-fragment",
+  "use-jsx-vars": "use-jsx-vars",
   ...mkHiddenPage("avoid-shorthand-boolean"),
   ...mkHiddenPage("avoid-shorthand-fragment"),
   ...mkSectionTitle("DOM Rules"),
diff --git a/website/pages/docs/rules/no-duplicate-jsx-props.mdx b/website/pages/docs/rules/no-duplicate-jsx-props.mdx
@@ -1,15 +1,15 @@
-# jsx-no-duplicate-props
+# no-duplicate-jsx-props
 
 **Full Name in `eslint-plugin-react-x`**
 
 ```plain copy
-react-x/jsx-no-duplicate-props
+react-x/no-duplicate-jsx-props
 ```
 
 **Full Name in `@eslint-react/eslint-plugin`**
 
 ```plain copy
-@eslint-react/jsx-no-duplicate-props
+@eslint-react/no-duplicate-jsx-props
 ```
 
 **Features**
diff --git a/website/pages/docs/rules/overview.md b/website/pages/docs/rules/overview.md
@@ -19,8 +19,6 @@
 | Rule                                                                               | ✅ | Features  | Description                                                                                          |  React   |
 | :--------------------------------------------------------------------------------- | :- | :-------- | :--------------------------------------------------------------------------------------------------- | :------: |
 | [`ensure-forward-ref-using-ref`](ensure-forward-ref-using-ref)                     | 1️⃣  | `🔍`      | Requires that components wrapped with `forwardRef` must have a `ref` parameter.                      |          |
-| [`jsx-no-duplicate-props`](jsx-no-duplicate-props)                                 | 1️⃣  | `🔍`      | Prevents duplicate props in JSX.                                                                     |          |
-| [`jsx-uses-vars`](jsx-uses-vars)                                                   | 1️⃣  |           | Helper rule to mark variables as used in JSX.                                                        |          |
 | [`no-access-state-in-setstate`](no-access-state-in-setstate)                       | 2️⃣  | `🔍`      | Prevents accessing `this.state` inside `setState` calls.                                             |          |
 | [`no-array-index-key`](no-array-index-key)                                         | 1️⃣  | `🔍`      | Prevents using array `index` as `key`.                                                               |          |
 | [`no-children-count`](no-children-count)                                           | 1️⃣  | `🔍`      | Prevents using `Children.count`.                                                                     |          |
@@ -40,6 +38,7 @@
 | [`no-create-ref`](no-create-ref)                                                   | 2️⃣  | `🔍`      | Prevents using `createRef`.                                                                          |          |
 | [`no-default-props`](no-default-props)                                             | 2️⃣  | `🔍`      | Prevents using `defaultProps` property in favor of ES6 default parameters.                           |          |
 | [`no-direct-mutation-state`](no-direct-mutation-state)                             | 2️⃣  | `🔍`      | Prevents direct mutation of `this.state`.                                                            |          |
+| [`no-duplicate-jsx-props`](no-duplicate-jsx-props)                                 | 1️⃣  | `🔍`      | Prevents duplicate props in JSX.                                                                     |          |
 | [`no-duplicate-key`](no-duplicate-key)                                             | 2️⃣  | `🔍`      | Prevents duplicate `key` on elements in the same array or a list of `children`.                      |          |
 | [`no-forward-ref`](no-forward-ref)                                                 | 1️⃣  | `🔍` `🔄` | Prevents using `React.forwardRef`.                                                                   | >=19.0.0 |
 | [`no-implicit-key`](no-implicit-key)                                               | 1️⃣  | `🔍`      | Prevents `key` from not being explicitly specified (e.g. spreading `key` from objects).              |          |
@@ -66,11 +65,14 @@
 | [`prefer-read-only-props`](prefer-read-only-props)                                 | 0️⃣  | `🔍` `💭` | Enforces read-only props in components.                                                              |          |
 | [`prefer-shorthand-boolean`](prefer-shorthand-boolean)                             | 0️⃣  | `🔍` `🔧` | Enforces using shorthand syntax for boolean attributes.                                              |          |
 | [`prefer-shorthand-fragment`](prefer-shorthand-fragment)                           | 0️⃣  | `🔍`      | Enforces using shorthand syntax for fragments.                                                       |          |
+| [`use-jsx-vars`](use-jsx-vars)                                                     | 1️⃣  |           | Helper rule to mark variables as used in JSX.                                                        |          |
 
 ### Deprecated
 
 | Rule                                                                               | Replaced by                                                            |
 | :--------------------------------------------------------------------------------- | :--------------------------------------------------------------------- |
+| [~~`jsx-uses-vars`~~](jsx-uses-vars)                                               | [`use-jsx-vars`](use-jsx-vars)                                         |
+| [~~`jsx-no-duplicate-props`~~](jsx-no-duplicate-props)                             | [`no-duplicate-jsx-props`](no-duplicate-jsx-props)                     |
 | [~~`no-complicated-conditional-rendering`~~](no-complicated-conditional-rendering) | [`no-complex-conditional-rendering`](no-complex-conditional-rendering) |
 
 ## DOM Rules
diff --git a/website/pages/docs/rules/use-jsx-vars.mdx b/website/pages/docs/rules/use-jsx-vars.mdx
@@ -1,15 +1,15 @@
-# jsx-uses-vars
+# use-jsx-vars
 
 **Full Name in `eslint-plugin-react-x`**
 
 ```plain copy
-react-x/jsx-uses-vars
+react-x/use-jsx-vars
 ```
 
 **Full Name in `@eslint-react/eslint-plugin`**
 
 ```plain copy
-@eslint-react/jsx-uses-vars
+@eslint-react/use-jsx-vars
 ```
 
 **Presets**
