feat(plugins/x): add autofix to 'prefer-shorthand-fragment', closes #898

Author: Rel1cx

packages/plugins/eslint-plugin-react-x/src/rules/prefer-shorthand-fragment.spec.ts

@@ -10,6 +10,7 @@ ruleTester.run(RULE_NAME, rule, {
           messageId: "preferShorthandFragment",
         },
       ],
+      output: "<><div /></>",
     },
     {
       code: /* tsx */ `<Fragment><div /></Fragment>`,
@@ -18,6 +19,24 @@ ruleTester.run(RULE_NAME, rule, {
           messageId: "preferShorthandFragment",
         },
       ],
+      output: "<><div /></>",
+    },
+    {
+      code: /* tsx */ `
+        <React.Fragment>
+            <div />
+        </React.Fragment>
+      `,
+      errors: [
+        {
+          messageId: "preferShorthandFragment",
+        },
+      ],
+      output: `
+        <>
+            <div />
+        </>
+      `,
     },
   ],
   valid: [

packages/plugins/eslint-plugin-react-x/src/rules/prefer-shorthand-fragment.ts

@@ -22,6 +22,7 @@ export default createRule<[], MessageID>({
       description: "enforce using fragment syntax instead of 'Fragment' component",
       [Symbol.for("rule_features")]: RULE_FEATURES,
     },
+    fixable: "code",
     messages: {
       preferShorthandFragment: "Use fragment shorthand syntax instead of 'Fragment' component.",
     },
@@ -36,6 +37,14 @@ export default createRule<[], MessageID>({
       return O.some({
         messageId: "preferShorthandFragment",
         node,
+        fix: (fixer) => {
+          const { closingElement, openingElement } = node;
+          if (!closingElement) return [];
+          return [
+            fixer.replaceTextRange([openingElement.range[0], openingElement.range[1]], "<>"),
+            fixer.replaceTextRange([closingElement.range[0], closingElement.range[1]], "</>"),
+          ];
+        },
       });
     }
     return {