fix(linter/rules-of-hooks): correctly place primary span to fix disable directive (#14237)

camc314 · camc314 · commit 46cceb892a1b · 2025-09-29T11:50:47.000Z
fixes #14233
diff --git a/apps/oxlint/fixtures/disable_directive_issue_13311/.oxlintrc.json b/apps/oxlint/fixtures/disable_directive_issue_13311/.oxlintrc.json
@@ -5,6 +5,7 @@
   },
   "rules": {
     "react/exhaustive-deps": "warn",
+    "react/rules-of-hooks": "error",
     "typescript/no-unsafe-declaration-merging": "error"
   }
 }
diff --git a/apps/oxlint/fixtures/disable_directive_issue_13311/test.jsx b/apps/oxlint/fixtures/disable_directive_issue_13311/test.jsx
@@ -12,3 +12,15 @@ function Component() {
   return null;
 }
 
+// Test case for issue #14233 - disable directive not working for rules-of-hooks
+function useMostRelevantBreakdownType(params, filters) {
+  // Helper function that starts with "use" but isn't a React hook
+  console.log(params, filters);
+}
+
+const cleanBreakdownParams = (cleanedParams, filters) => {
+  // this isn't a react hook
+  // oxlint-disable-next-line react-hooks/rules-of-hooks
+  useMostRelevantBreakdownType(cleanedParams, filters);
+}
+
diff --git a/crates/oxc_linter/src/rules/react/rules_of_hooks.rs b/crates/oxc_linter/src/rules/react/rules_of_hooks.rs
@@ -10,6 +10,7 @@ use oxc_cfg::{
 };
 use oxc_macros::declare_oxc_lint;
 use oxc_semantic::{AstNodes, NodeId};
+use oxc_span::GetSpan;
 use oxc_syntax::operator::AssignmentOperator;
 
 use crate::{
@@ -24,14 +25,22 @@ mod diagnostics {
     use oxc_span::Span;
     const SCOPE: &str = "eslint-plugin-react-hooks";
 
-    pub(super) fn function_error(span: Span, hook_name: &str, func_name: &str) -> OxcDiagnostic {
+    pub(super) fn function_error(
+        react_hook_span: Span,
+        outer_function_span: Span,
+        hook_name: &str,
+        func_name: &str,
+    ) -> OxcDiagnostic {
         OxcDiagnostic::warn(format!(
             "React Hook {hook_name:?} is called in function {func_name:?} that is neither \
             a React function component nor a custom React Hook function. \
             React component names must start with an uppercase letter. \
             React Hook names must start with the word \"use\".",
         ))
-        .with_label(span)
+        .with_labels(vec![
+            react_hook_span.primary_label("Hook is called here"),
+            outer_function_span.label("Outer function"),
+        ])
         .with_error_code_scope(SCOPE)
     }
 
@@ -202,6 +211,7 @@ impl Rule for RulesOfHooks {
                 if !is_react_component_or_hook_name(&id.name) =>
             {
                 return ctx.diagnostic(diagnostics::function_error(
+                    call.callee.span(),
                     id.span,
                     hook_name,
                     id.name.as_str(),
@@ -247,6 +257,7 @@ impl Rule for RulesOfHooks {
                 // }
                 if ident.is_some_and(|name| !is_react_component_or_hook_name(&name)) {
                     return ctx.diagnostic(diagnostics::function_error(
+                        call.callee.span(),
                         *span,
                         hook_name,
                         "Anonymous",
diff --git a/crates/oxc_linter/src/snapshots/react_rules_of_hooks.snap b/crates/oxc_linter/src/snapshots/react_rules_of_hooks.snap

Original file line number	Diff line number	Diff line change
`@@ -5,6 +5,7 @@`
`5`	`5`	`},`
`6`	`6`	`"rules": {`
`7`	`7`	`"react/exhaustive-deps": "warn",`
	`8`	`+ "react/rules-of-hooks": "error",`
`8`	`9`	`"typescript/no-unsafe-declaration-merging": "error"`
`9`	`10`	`}`
`10`	`11`	`}`