feat: add suggest to 'react-x/no-missing-button-type' (#1136)

Author: Rel1cx

packages/plugins/eslint-plugin-react-dom/src/rules/no-missing-button-type.spec.ts

@@ -10,6 +10,23 @@ ruleTester.run(RULE_NAME, rule, {
       errors: [
         {
           messageId: "noMissingButtonType",
+          suggestions: [
+            {
+              messageId: "addButtonType",
+              data: { type: "button" },
+              output: tsx`<button type="button">Click me</button>;`,
+            },
+            {
+              messageId: "addButtonType",
+              data: { type: "submit" },
+              output: tsx`<button type="submit">Click me</button>;`,
+            },
+            {
+              messageId: "addButtonType",
+              data: { type: "reset" },
+              output: tsx`<button type="reset">Click me</button>;`,
+            },
+          ],
         },
       ],
     },
@@ -18,6 +35,23 @@ ruleTester.run(RULE_NAME, rule, {
       errors: [
         {
           messageId: "noMissingButtonType",
+          suggestions: [
+            {
+              messageId: "addButtonType",
+              data: { type: "button" },
+              output: tsx`<PolyComponent as="button" type="button">Click me</PolyComponent>;`,
+            },
+            {
+              messageId: "addButtonType",
+              data: { type: "submit" },
+              output: tsx`<PolyComponent as="button" type="submit">Click me</PolyComponent>;`,
+            },
+            {
+              messageId: "addButtonType",
+              data: { type: "reset" },
+              output: tsx`<PolyComponent as="button" type="reset">Click me</PolyComponent>;`,
+            },
+          ],
         },
       ],
       settings: {

packages/plugins/eslint-plugin-react-dom/src/rules/no-missing-button-type.ts

@@ -1,5 +1,5 @@
-import type { RuleContext, RuleFeature } from "@eslint-react/kit";
-import type { RuleListener } from "@typescript-eslint/utils/ts-eslint";
+import type { RuleContext, RuleFeature, RuleSuggest } from "@eslint-react/kit";
+import type { RuleFixer, RuleListener } from "@typescript-eslint/utils/ts-eslint";
 import type { CamelCase } from "string-ts";
 import * as ER from "@eslint-react/core";
 import { createJsxElementResolver, createRule, findCustomComponentProp } from "../utils";
@@ -8,7 +8,11 @@ export const RULE_NAME = "no-missing-button-type";
 
 export const RULE_FEATURES = [] as const satisfies RuleFeature[];
 
-export type MessageID = CamelCase<typeof RULE_NAME>;
+export const BUTTON_TYPES = ["button", "submit", "reset"] as const;
+
+export type MessageID =
+  | CamelCase<typeof RULE_NAME>
+  | "addButtonType";
 
 export default createRule<[], MessageID>({
   meta: {
@@ -17,7 +21,9 @@ export default createRule<[], MessageID>({
       description: "Enforces explicit `type` attribute for `button` elements.",
       [Symbol.for("rule_features")]: RULE_FEATURES,
     },
+    hasSuggestions: true,
     messages: {
+      addButtonType: "Add 'type' attribute with value '{{type}}'.",
       noMissingButtonType: "Add missing 'type' attribute on 'button' component.",
     },
     schema: [],
@@ -51,6 +57,9 @@ export function create(context: RuleContext<MessageID, []>): RuleListener {
           context.report({
             messageId: "noMissingButtonType",
             node: attributeNode,
+            suggest: getSuggest((type) => (fixer: RuleFixer) => {
+              return fixer.replaceText(node, `${propNameOnJsx}="${type}"`);
+            }),
           });
         }
         return;
@@ -59,8 +68,21 @@ export function create(context: RuleContext<MessageID, []>): RuleListener {
         context.report({
           messageId: "noMissingButtonType",
           node,
+          suggest: getSuggest((type) => (fixer: RuleFixer) => {
+            const lastToken = context.sourceCode.getLastToken(node.openingElement);
+            if (lastToken == null) return null;
+            return fixer.insertTextBefore(lastToken, ` type="${type}"`);
+          }),
         });
       }
     },
   };
 }
+
+function getSuggest(getFix: (type: string) => RuleSuggest["fix"]): RuleSuggest<MessageID>[] {
+  return BUTTON_TYPES.map((type) => ({
+    messageId: "addButtonType",
+    data: { type },
+    fix: getFix(type),
+  }));
+}

packages/utilities/kit/src/types.ts

@@ -44,3 +44,9 @@ export type RuleFeature =
   | "EXP"; // Experimental
 
 export type RulePolicy = number;
+
+export type RuleSuggest<MessageIds extends string = string> = {
+  messageId: MessageIds;
+  data?: Record<string, unknown>;
+  fix: tseslint.ReportFixFunction;
+};