feat(plugins/x): add 'jsx-no-duplicate-props'

Author: Rel1cx

packages/plugins/eslint-plugin-react-x/src/index.ts

@@ -5,6 +5,7 @@ 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";
@@ -71,6 +72,7 @@ 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,

packages/plugins/eslint-plugin-react-x/src/rules/jsx-no-duplicate-props.spec.ts

@@ -0,0 +1,31 @@
+import { allValid, ruleTester } from "../../../../../test";
+import rule, { RULE_NAME } from "./jsx-no-duplicate-props";
+
+ruleTester.run(RULE_NAME, rule, {
+  invalid: [
+    {
+      code: /* tsx */ `<div a="1" a="2" />;`,
+      errors: [{ messageId: "jsxNoDuplicateProps" }],
+    },
+    {
+      code: /* tsx */ `<div a="1" b="2" a="3" />;`,
+      errors: [{ messageId: "jsxNoDuplicateProps" }],
+    },
+    {
+      code: /* tsx */ `<div a="1" {...b} a="2" />;`,
+      errors: [{ messageId: "jsxNoDuplicateProps" }],
+    },
+    {
+      code: /* tsx */ `<div a="1" {...a} {...b} a="2" />;`,
+      errors: [{ messageId: "jsxNoDuplicateProps" }],
+    },
+  ],
+  valid: [
+    ...allValid,
+    /* tsx */ `const a = <div a="1" aa="2" />;`,
+    /* tsx */ `const a = <div a="1" aa="2"><span a="1" aa="2" /></div>;`,
+    /* tsx */ `const a = <div a="1" b="2" />;`,
+    /* tsx */ `const a = <div a="1" {...b} />;`,
+    /* tsx */ `const a = <div {...a} {...b} />;`,
+  ],
+});

packages/plugins/eslint-plugin-react-x/src/rules/jsx-no-duplicate-props.ts

@@ -0,0 +1,45 @@
+import { isString } from "@eslint-react/tools";
+import { AST_NODE_TYPES } from "@typescript-eslint/types";
+import type { CamelCase } from "string-ts";
+
+import { createRule } from "../utils";
+
+export const RULE_NAME = "jsx-no-duplicate-props";
+
+export type MessageID = CamelCase<typeof RULE_NAME>;
+
+export default createRule<[], MessageID>({
+  meta: {
+    type: "problem",
+    docs: {
+      description: "disallow duplicate props",
+    },
+    messages: {
+      jsxNoDuplicateProps: "Duplicate prop '{{name}}'",
+    },
+    schema: [],
+  },
+  name: RULE_NAME,
+  create(context) {
+    return {
+      JSXOpeningElement(node) {
+        const props: string[] = [];
+        for (const attr of node.attributes) {
+          if (attr.type === AST_NODE_TYPES.JSXSpreadAttribute) continue;
+          const name = attr.name.name;
+          if (!isString(name)) continue;
+          if (!props.includes(name)) {
+            props.push(name);
+            continue;
+          }
+          context.report({
+            messageId: "jsxNoDuplicateProps",
+            node: attr,
+            data: { name },
+          });
+        }
+      },
+    };
+  },
+  defaultOptions: [],
+});

packages/plugins/eslint-plugin/src/index.ts

@@ -18,6 +18,7 @@ const allPreset = {
   "avoid-shorthand-boolean": "warn",
   "avoid-shorthand-fragment": "warn",
   "ensure-forward-ref-using-ref": "warn",
+  "jsx-no-duplicate-props": "warn",
   "jsx-uses-vars": "warn",
   "no-access-state-in-setstate": "error",
   "no-array-index-key": "warn",
@@ -100,6 +101,7 @@ const corePreset = {
   "ensure-forward-ref-using-ref": "warn",
   // "avoid-shorthand-boolean": "warn",
   // "avoid-shorthand-fragment": "warn",
+  "jsx-no-duplicate-props": "warn",
   "jsx-uses-vars": "warn",
   "no-access-state-in-setstate": "error",
   "no-array-index-key": "warn",
@@ -183,6 +185,8 @@ const recommendedPreset = {
 const recommendedTypeScriptPreset = {
   ...recommendedPreset,
   "dom/no-unknown-property": "off",
+  "jsx-no-duplicate-props": "off",
+  "jsx-uses-vars": "off",
 } as const satisfies RulePreset;
 
 const recommendedTypeCheckedPreset = {