feat(plugins/x): add auto-fix 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

@@ -11,6 +11,7 @@ export const RULE_NAME = "prefer-shorthand-fragment";
 
 export const RULE_FEATURES = [
   "CHK",
+  "FIX",
 ] as const satisfies RuleFeature[];
 
 export type MessageID = CamelCase<typeof RULE_NAME>;
@@ -22,6 +23,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 +38,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 {

website/pages/docs/rules/overview.md

@@ -64,7 +64,7 @@
 | [`prefer-react-namespace-import`](prefer-react-namespace-import)                   | 0️⃣  | `🔍` `🔧` | Enforces React is imported via a namespace import                                                    |          |
 | [`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.                                                       |          |
+| [`prefer-shorthand-fragment`](prefer-shorthand-fragment)                           | 0️⃣  | `🔍` `🔧` | Enforces using shorthand syntax for fragments.                                                       |          |
 | [`use-jsx-vars`](use-jsx-vars)                                                     | 1️⃣  |           | Helpes `eslint/no-unused-vars` to correctly detect variables used in JSX.                            |          |
 
 ### Deprecated

website/pages/docs/rules/prefer-shorthand-fragment.md

@@ -14,7 +14,7 @@ react-x/prefer-shorthand-fragment
 
 **Features**
 
-`🔍`
+`🔍` `🔧`
 
 ## What it does
 

website/pages/roadmap.md

@@ -23,7 +23,7 @@
 
 - [ ] `function-component-definition`
 - [ ] `no-useless-fragment`
-- [ ] `prefer-shorthand-fragment`
+- [x] `prefer-shorthand-fragment`
 - [x] `prefer-react-namespace-import`
 - [x] `prefer-shorthand-boolean`