fix(no-use-context): removing imports should also remove the associated comma tokens

Author: Rel1cx

examples/dual-react-dom-lib/package.json

@@ -29,7 +29,7 @@
     "prepare": "pnpm run build"
   },
   "devDependencies": {
-    "@eslint-react/eslint-plugin": "^1.25.0",
+    "@eslint-react/eslint-plugin": "workspace:*",
     "@eslint/js": "^9.19.0",
     "@tsconfig/node22": "^22.0.0",
     "@tsconfig/strictest": "^2.0.5",

examples/next-app/package.json

@@ -16,7 +16,7 @@
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@eslint-react/eslint-plugin": "^1.25.0",
+    "@eslint-react/eslint-plugin": "workspace:*",
     "@eslint/config-inspector": "^1.0.0",
     "@eslint/js": "^9.19.0",
     "@next/eslint-plugin-next": "^15.1.6",

examples/vite-react-dom-app/package.json

@@ -15,7 +15,7 @@
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@eslint-react/eslint-plugin": "^1.25.0",
+    "@eslint-react/eslint-plugin": "workspace:*",
     "@eslint/config-inspector": "^1.0.0",
     "@eslint/js": "^9.19.0",
     "@tsconfig/node22": "^22.0.0",

examples/vite-react-dom-js-app/package.json

@@ -15,7 +15,7 @@
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@eslint-react/eslint-plugin": "^1.25.0",
+    "@eslint-react/eslint-plugin": "workspace:*",
     "@eslint/config-inspector": "^1.0.0",
     "@eslint/js": "^9.19.0",
     "@types/react": "^19.0.8",

examples/vite-react-dom-js-with-babel-eslint-parser-app/package.json

@@ -19,7 +19,7 @@
     "@babel/eslint-parser": "^7.26.5",
     "@babel/preset-env": "^7.26.7",
     "@babel/preset-react": "^7.26.3",
-    "@eslint-react/eslint-plugin": "^1.25.0",
+    "@eslint-react/eslint-plugin": "workspace:*",
     "@eslint/config-inspector": "^1.0.0",
     "@eslint/js": "^9.19.0",
     "@types/babel__core": "~7.20.5",

examples/vite-react-dom-with-ts-blank-eslint-parser-app/package.json

@@ -15,7 +15,7 @@
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@eslint-react/eslint-plugin": "^1.25.0",
+    "@eslint-react/eslint-plugin": "workspace:*",
     "@eslint/config-inspector": "^1.0.0",
     "@eslint/js": "^9.19.0",
     "@tsconfig/node22": "^22.0.0",

packages/plugins/eslint-plugin-react-x/src/rules/no-use-context.spec.ts

@@ -71,7 +71,7 @@ ruleTester.run(RULE_NAME, rule, {
         { messageId: "noUseContext" },
       ],
       output: /* tsx */ `
-        import { use,            } from 'react'
+        import { use  } from 'react'
 
         export const Component = () => {
           const value = use(MyContext)

packages/plugins/eslint-plugin-react-x/src/rules/no-use-context.ts

@@ -6,7 +6,7 @@ import { compare } from "compare-versions";
 import type { CamelCase } from "string-ts";
 import { isMatching } from "ts-pattern";
 
-import { createRule } from "../utils";
+import { createRule, getAssociatedTokens } from "../utils";
 
 export const RULE_NAME = "no-use-context";
 
@@ -86,7 +86,13 @@ export default createRule<[], MessageID>({
               node: specifier,
               fix(fixer) {
                 if (isUseImported) {
-                  return fixer.replaceText(specifier, " ".repeat(specifier.range[1] - specifier.range[0]));
+                  return [
+                    fixer.remove(specifier),
+                    ...getAssociatedTokens(
+                      context,
+                      specifier,
+                    ).map((token) => fixer.remove(token)),
+                  ];
                 }
                 return fixer.replaceText(specifier.imported, "use");
               },

packages/plugins/eslint-plugin-react-x/src/utils/get-associated-tokens.ts

@@ -0,0 +1,26 @@
+import type { RuleContext } from "@eslint-react/shared";
+import type { TSESTree } from "@typescript-eslint/types";
+
+export function getAssociatedTokens(
+  context: RuleContext,
+  node: TSESTree.Node,
+) {
+  {
+    const tokenBefore = context.sourceCode.getTokenBefore(node);
+    const tokenAfter = context.sourceCode.getTokenAfter(node);
+    const tokens = [];
+
+    // If this is not the only entry, then the line above this one
+    // will become the last line, and should not have a trailing comma.
+    if (tokenAfter?.value !== "," && tokenBefore?.value === ",") {
+      tokens.push(tokenBefore);
+    }
+
+    // If this is not the last entry, then we need to remove the comma from this line.
+    if (tokenAfter?.value === ",") {
+      tokens.push(tokenAfter);
+    }
+
+    return tokens;
+  }
+}

packages/plugins/eslint-plugin-react-x/src/utils/index.ts

@@ -1 +1,2 @@
 export * from "./create-rule";
+export * from "./get-associated-tokens";