WIP

Author: Rel1cx

dprint.json

@@ -25,7 +25,7 @@
     "packages/**/docs"
   ],
   "plugins": [
-    "https://plugins.dprint.dev/typescript-0.95.11.wasm",
+    "https://plugins.dprint.dev/typescript-0.95.12.wasm",
     "https://plugins.dprint.dev/json-0.21.0.wasm",
     "https://plugins.dprint.dev/markdown-0.20.0.wasm",
     "https://plugins.dprint.dev/toml-0.7.0.wasm",

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

@@ -0,0 +1,44 @@
+import tsx from "dedent";
+
+import { allValid, ruleTester } from "../../../../../test";
+import rule, { RULE_NAME } from "./jsx-dollar";
+
+ruleTester.run(RULE_NAME, rule, {
+  invalid: [
+    {
+      code: tsx`
+        const App = (props) => {
+            return <div>Hello \${props.name}</div>;
+        };
+      `,
+      errors: [
+        {
+          messageId: "jsxDollar",
+          suggestions: [
+            {
+              messageId: "removeDollarSign",
+              output: tsx`
+                const App = (props) => {
+                    return <div>Hello {props.name}</div>;
+                };
+              `,
+            },
+          ],
+        },
+      ],
+    },
+  ],
+  valid: [
+    ...allValid,
+    tsx`
+      const App = (props) => {
+          return [<div key="1">1</div>]
+      };
+    `,
+    tsx`
+      const App = (props) => {
+          return <div>Hello $</div>;
+      };
+    `,
+  ],
+});

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

@@ -0,0 +1,61 @@
+import * as AST from "@eslint-react/ast";
+import type { RuleContext, RuleFeature } from "@eslint-react/shared";
+import type { TSESTree } from "@typescript-eslint/types";
+import { AST_NODE_TYPES as T } from "@typescript-eslint/types";
+import type { RuleListener } from "@typescript-eslint/utils/ts-eslint";
+import type { CamelCase } from "string-ts";
+
+import { createRule } from "../utils";
+
+export const RULE_NAME = "jsx-dollar";
+
+export const RULE_FEATURES = [] as const satisfies RuleFeature[];
+
+export type MessageID = CamelCase<typeof RULE_NAME> | "removeDollarSign";
+
+export default createRule<[], MessageID>({
+  meta: {
+    type: "problem",
+    docs: {
+      description: "Prevents dollar signs from being inserted as text nodes before expressions.",
+      [Symbol.for("rule_features")]: RULE_FEATURES,
+    },
+    fixable: "code",
+    hasSuggestions: true,
+    messages: {
+      jsxDollar:
+        "Possible misused dollar sign in text node. If you want to explicitly display '$' character i.e. show price, you can use template literals.",
+      removeDollarSign: "Remove the dollar sign '$' before the expression.",
+    },
+    schema: [],
+  },
+  name: RULE_NAME,
+  create,
+  defaultOptions: [],
+});
+
+export function create(context: RuleContext<MessageID, []>): RuleListener {
+  const visitorFunction = (node: TSESTree.JSXElement | TSESTree.JSXFragment) => {
+    for (const [index, child] of node.children.entries()) {
+      if (child.type !== T.JSXText) continue;
+      if (!child.raw.endsWith("$")) continue;
+      if (node.children[index + 1]?.type !== T.JSXExpressionContainer) continue;
+      context.report({
+        messageId: "jsxDollar",
+        node: child,
+        suggest: [
+          {
+            messageId: "removeDollarSign",
+            fix(fixer) {
+              return fixer.removeRange([child.range[1] - 1, child.range[1]]);
+            },
+          },
+        ],
+      });
+    }
+  };
+  return {
+    JSXElement: visitorFunction,
+    JSXFragment: visitorFunction,
+  };
+}