fix: update JSX debug rule description and error messages

Author: Rel1cx

apps/website/content/docs/rules/overview.mdx

@@ -139,7 +139,7 @@ Linter rules can have false positives, false negatives, and some rules are depen
 | [`function-component`](./debug-function-component) | 0️⃣  | `🐞` | Reports all function components                         |
 | [`hook`](./debug-hook)                             | 0️⃣  | `🐞` | Reports all react hooks                                 |
 | [`is-from-react`](./debug-is-from-react)           | 0️⃣  | `🐞` | Reports all identifiers that are initialized from React |
-| [`jsx`](./debug-jsx)                               | 0️⃣  | `🐞` | Reports all JSX elements                                |
+| [`jsx`](./debug-jsx)                               | 0️⃣  | `🐞` | Reports all JSX elements and fragments                  |
 
 ## References
 

packages/plugins/eslint-plugin-react-debug/src/rules/jsx.md

@@ -20,7 +20,7 @@ react-debug/jsx
 
 ## Description
 
-Reports all JSX elements with config properties `jsx`, `jsxFactory`, `jsxFragmentFactory`, `jsxImportSource`, and `jsxRuntime`.
+Reports all JSX elements and fragments.
 
 - `jsx`
 - `jsxFactory`
@@ -47,7 +47,7 @@ import React from "react";
 
 const element = <div>Hello World</div>;
 //              ^^^^^^^^^^^^^^^^^^^^^^
-//              - [jsx] jsx: 'react-jsx', jsxFactory: 'React.createElement', jsxFragmentFactory: 'React.Fragment', jsxRuntime: 'automatic', jsxImportSource: 'react'
+//              - [jsx element] jsx: 'react-jsx', jsxFactory: 'React.createElement', jsxFragmentFactory: 'React.Fragment', jsxRuntime: 'automatic', jsxImportSource: 'react'
 ```
 
 ```tsx
@@ -60,7 +60,7 @@ import Preact from "preact";
 
 const element = <div>Hello World</div>;
 //              ^^^^^^^^^^^^^^^^^^^^^^
-//              - [jsx] jsx: 'react', jsxFactory: 'Preact.h', jsxFragmentFactory: 'Preact.Fragment', jsxRuntime: 'classic', jsxImportSource: 'preact'
+//              - [jsx element] jsx: 'react', jsxFactory: 'Preact.h', jsxFragmentFactory: 'Preact.Fragment', jsxRuntime: 'classic', jsxImportSource: 'preact'
 ```
 
 ## Implementation

packages/plugins/eslint-plugin-react-debug/src/rules/jsx.spec.ts

@@ -28,6 +28,7 @@ ruleTester.run(RULE_NAME, rule, {
         {
           messageId: "jsx",
           data: {
+            type: "element",
             jsx: "react-jsx",
             jsxFactory: "React.createElement",
             jsxFragmentFactory: "React.Fragment",
@@ -50,6 +51,7 @@ ruleTester.run(RULE_NAME, rule, {
         {
           messageId: "jsx",
           data: {
+            type: "element",
             jsx: "react",
             jsxFactory: "Preact.h",
             jsxFragmentFactory: "Preact.Fragment",
@@ -69,6 +71,7 @@ ruleTester.run(RULE_NAME, rule, {
         {
           messageId: "jsx",
           data: {
+            type: "element",
             jsx: "react",
             jsxFactory: "React.createElement",
             jsxFragmentFactory: "React.Fragment",

packages/plugins/eslint-plugin-react-debug/src/rules/jsx.ts

@@ -1,8 +1,8 @@
 import type { RuleListener } from "@typescript-eslint/utils/ts-eslint";
 import type { CamelCase } from "string-ts";
+import * as JSX from "@eslint-react/jsx";
 import { JsxConfig, type RuleContext, type RuleFeature } from "@eslint-react/kit";
 import { match, P } from "ts-pattern";
-
 import { JsxEmit } from "typescript";
 import { createRule } from "../utils";
 
@@ -18,12 +18,12 @@ export default createRule<[], MessageID>({
   meta: {
     type: "problem",
     docs: {
-      description: "Reports all React Hooks.",
+      description: "Reports all JSX elements and fragments.",
       [Symbol.for("rule_features")]: RULE_FEATURES,
     },
     messages: {
       jsx:
-        "[jsx] jsx: '{{jsx}}', jsxFactory: '{{jsxFactory}}', jsxFragmentFactory: '{{jsxFragmentFactory}}', jsxRuntime: '{{jsxRuntime}}' jsxImportSource: '{{jsxImportSource}}'",
+        "[jsx {{type}}] jsx: '{{jsx}}', jsxFactory: '{{jsxFactory}}', jsxFragmentFactory: '{{jsxFragmentFactory}}', jsxRuntime: '{{jsxRuntime}}' jsxImportSource: '{{jsxImportSource}}'",
     },
     schema: [],
   },
@@ -40,9 +40,10 @@ export function create(context: RuleContext<MessageID, []>): RuleListener {
     ...jsxConfigFromAnnotation,
   };
 
-  const baseDescriptor = {
+  const getDescriptor = (type: string) => ({
     messageId: "jsx",
     data: {
+      type,
       jsx: match(jsxConfig.jsx)
         .with(JsxEmit.None, () => "none")
         .with(JsxEmit.ReactJSX, () => "react-jsx")
@@ -58,17 +59,19 @@ export function create(context: RuleContext<MessageID, []>): RuleListener {
         .with(P.union(JsxEmit.None, JsxEmit.ReactJSX, JsxEmit.ReactJSXDev), () => "automatic")
         .otherwise(() => "classic"),
     },
-  } as const;
+  } as const);
+
   return {
     JSXElement(node) {
+      const isFragment = JSX.isFragmentElement(node);
       context.report({
-        ...baseDescriptor,
+        ...getDescriptor(isFragment ? "fragment" : "element"),
         node,
       });
     },
     JSXFragment(node) {
       context.report({
-        ...baseDescriptor,
+        ...getDescriptor("fragment"),
         node,
       });
     },