From 8e3d8787084256a77fe4074762c607f6a5689d56 Mon Sep 17 00:00:00 2001 From: mehm8128 Date: Sat, 13 Jan 2024 20:21:50 +0900 Subject: [PATCH 1/2] feat(linter): show dependency variable name when useExhaustiveDependencies rule shows errors --- CHANGELOG.md | 2 + .../src/generated/syntax_factory.rs | 4 +- .../use_exhaustive_dependencies.rs | 25 +++++---- .../checkHooksImportedFromReact.js.snap | 2 +- .../customHook.js.snap | 4 +- .../extraDependenciesInvalid.js.snap | 12 ++--- .../missingDependenciesInvalid.js.snap | 52 +++++++++---------- justfile | 2 +- .../rules/use-exhaustive-dependencies.md | 8 +-- 9 files changed, 59 insertions(+), 52 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index dd6f5460d814..a8f318cc3b6d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -51,6 +51,8 @@ Read our [guidelines for writing a good changelog entry](https://github.com/biom This cases requires the presence of a prototype. +- Add dependency variable names on error message when useExhaustiveDependencies rule shows errors. Contributed by @mehm8128 + #### Bug fixes - The fix of [useArrowFunction](https://biomejs.dev/linter/rules/use-arrow-function) now adds parentheses around the arrow function in more cases where it is needed ([#1524](https://github.com/biomejs/biome/issues/1524)). diff --git a/crates/biome_css_factory/src/generated/syntax_factory.rs b/crates/biome_css_factory/src/generated/syntax_factory.rs index bebd68d45115..2fc6735a14a6 100644 --- a/crates/biome_css_factory/src/generated/syntax_factory.rs +++ b/crates/biome_css_factory/src/generated/syntax_factory.rs @@ -269,9 +269,7 @@ impl SyntaxFactory for CssSyntaxFactory { let mut unmatched_count = 3usize; let mut group_slot_map = [false; 3usize]; for _ in 0usize..3usize { - let Some(element) = ¤t_element else { - break; - }; + let Some (element) = & current_element else { break ; } ; if !group_slot_map[0usize] && AnyCssLineWidth::can_cast(element.kind()) { group_slot_map[0usize] = true; } else if !group_slot_map[1usize] && CssLineStyle::can_cast(element.kind()) { diff --git a/crates/biome_js_analyze/src/semantic_analyzers/correctness/use_exhaustive_dependencies.rs b/crates/biome_js_analyze/src/semantic_analyzers/correctness/use_exhaustive_dependencies.rs index e5b4ea9dec3b..1a1a1ed9013f 100644 --- a/crates/biome_js_analyze/src/semantic_analyzers/correctness/use_exhaustive_dependencies.rs +++ b/crates/biome_js_analyze/src/semantic_analyzers/correctness/use_exhaustive_dependencies.rs @@ -378,7 +378,7 @@ pub enum Fix { /// When a dependency needs to be added. AddDependency { function_name_range: TextRange, - captures: Vec, + captures: (String, Vec), dependencies_len: usize, }, /// When a dependency needs to be removed. @@ -392,6 +392,7 @@ pub enum Fix { function_name_range: TextRange, capture_range: TextRange, dependency_range: TextRange, + dependency_text: String, }, } @@ -632,6 +633,7 @@ impl Rule for UseExhaustiveDependencies { function_name_range: result.function_name_range, capture_range: *capture_range, dependency_range: dep.syntax().text_trimmed_range(), + dependency_text: dep.syntax().text_trimmed().to_string(), }); } _ => {} @@ -674,7 +676,7 @@ impl Rule for UseExhaustiveDependencies { } // Generate signals - for (_, captures) in add_deps { + for captures in add_deps { signals.push(Fix::AddDependency { function_name_range: result.function_name_range, captures, @@ -701,15 +703,14 @@ impl Rule for UseExhaustiveDependencies { captures, dependencies_len, } => { + let (capture_text, captures_range) = captures; let mut diag = RuleDiagnostic::new( rule_category!(), function_name_range, - markup! { - "This hook does not specify all of its dependencies." - }, + markup! {"This hook does not specify all of its dependencies: "{capture_text}""}, ); - for range in captures { + for range in captures_range { diag = diag.detail( range, "This dependency is not specified in the hook dependency list.", @@ -717,7 +718,7 @@ impl Rule for UseExhaustiveDependencies { } if *dependencies_len == 0 { - diag = if captures.len() == 1 { + diag = if captures_range.len() == 1 { diag.note("Either include it or remove the dependency array") } else { diag.note("Either include them or remove the dependency array") @@ -731,11 +732,16 @@ impl Rule for UseExhaustiveDependencies { dependencies, component_function, } => { + let deps_joined_with_comma = dependencies + .iter() + .map(|dep| dep.syntax().text_trimmed().to_string()) + .collect::>() + .join(", "); let mut diag = RuleDiagnostic::new( rule_category!(), function_name_range, markup! { - "This hook specifies more dependencies than necessary." + "This hook specifies more dependencies than necessary: "{deps_joined_with_comma}"" }, ); @@ -761,12 +767,13 @@ impl Rule for UseExhaustiveDependencies { function_name_range, capture_range, dependency_range, + dependency_text, } => { let diag = RuleDiagnostic::new( rule_category!(), function_name_range, markup! { - "This hook specifies a dependency more specific that its captures" + "This hook specifies a dependency more specific that its captures: "{dependency_text}"" }, ) .detail(capture_range, "This capture is more generic than...") diff --git a/crates/biome_js_analyze/tests/specs/correctness/useExhaustiveDependencies/checkHooksImportedFromReact.js.snap b/crates/biome_js_analyze/tests/specs/correctness/useExhaustiveDependencies/checkHooksImportedFromReact.js.snap index 80ed05d575bd..299a7e2a241b 100644 --- a/crates/biome_js_analyze/tests/specs/correctness/useExhaustiveDependencies/checkHooksImportedFromReact.js.snap +++ b/crates/biome_js_analyze/tests/specs/correctness/useExhaustiveDependencies/checkHooksImportedFromReact.js.snap @@ -31,7 +31,7 @@ function MyComponent2() { ``` checkHooksImportedFromReact.js:3:9 lint/correctness/useExhaustiveDependencies ━━━━━━━━━━━━━━━━━━━━━━ - ! This hook does not specify all of its dependencies. + ! This hook does not specify all of its dependencies: a 1 │ function MyComponent1() { 2 │ let a = 1; diff --git a/crates/biome_js_analyze/tests/specs/correctness/useExhaustiveDependencies/customHook.js.snap b/crates/biome_js_analyze/tests/specs/correctness/useExhaustiveDependencies/customHook.js.snap index 7262ce063054..4f6e13087d12 100644 --- a/crates/biome_js_analyze/tests/specs/correctness/useExhaustiveDependencies/customHook.js.snap +++ b/crates/biome_js_analyze/tests/specs/correctness/useExhaustiveDependencies/customHook.js.snap @@ -27,7 +27,7 @@ function MyComponent() { ``` customHook.js:5:5 lint/correctness/useExhaustiveDependencies ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - ! This hook does not specify all of its dependencies. + ! This hook does not specify all of its dependencies: a 3 │ function MyComponent() { 4 │ let a = 1; @@ -53,7 +53,7 @@ customHook.js:5:5 lint/correctness/useExhaustiveDependencies ━━━━━━ ``` customHook.js:9:5 lint/correctness/useExhaustiveDependencies ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - ! This hook does not specify all of its dependencies. + ! This hook does not specify all of its dependencies: a 7 │ }, []); 8 │ diff --git a/crates/biome_js_analyze/tests/specs/correctness/useExhaustiveDependencies/extraDependenciesInvalid.js.snap b/crates/biome_js_analyze/tests/specs/correctness/useExhaustiveDependencies/extraDependenciesInvalid.js.snap index 4110385d0d99..8bc8bf4d2fa9 100644 --- a/crates/biome_js_analyze/tests/specs/correctness/useExhaustiveDependencies/extraDependenciesInvalid.js.snap +++ b/crates/biome_js_analyze/tests/specs/correctness/useExhaustiveDependencies/extraDependenciesInvalid.js.snap @@ -50,7 +50,7 @@ function MyComponent3() { ``` extraDependenciesInvalid.js:5:3 lint/correctness/useExhaustiveDependencies ━━━━━━━━━━━━━━━━━━━━━━━━━ - ! This hook specifies more dependencies than necessary. + ! This hook specifies more dependencies than necessary: a 3 │ function MyComponent() { 4 │ let a = 1; @@ -74,7 +74,7 @@ extraDependenciesInvalid.js:5:3 lint/correctness/useExhaustiveDependencies ━ ``` extraDependenciesInvalid.js:12:3 lint/correctness/useExhaustiveDependencies ━━━━━━━━━━━━━━━━━━━━━━━━ - ! This hook specifies more dependencies than necessary. + ! This hook specifies more dependencies than necessary: a, b 10 │ function MyComponent2() { 11 │ let a = 1, b = 1; @@ -107,7 +107,7 @@ extraDependenciesInvalid.js:12:3 lint/correctness/useExhaustiveDependencies ━ ``` extraDependenciesInvalid.js:19:3 lint/correctness/useExhaustiveDependencies ━━━━━━━━━━━━━━━━━━━━━━━━ - ! This hook specifies more dependencies than necessary. + ! This hook specifies more dependencies than necessary: a 17 │ function MyComponent2() { 18 │ const a = 1; @@ -131,7 +131,7 @@ extraDependenciesInvalid.js:19:3 lint/correctness/useExhaustiveDependencies ━ ``` extraDependenciesInvalid.js:28:3 lint/correctness/useExhaustiveDependencies ━━━━━━━━━━━━━━━━━━━━━━━━ - ! This hook specifies a dependency more specific that its captures + ! This hook specifies a dependency more specific that its captures: someObj.id 26 │ function MyComponent1() { 27 │ let someObj = getObj(); @@ -164,7 +164,7 @@ extraDependenciesInvalid.js:28:3 lint/correctness/useExhaustiveDependencies ━ ``` extraDependenciesInvalid.js:28:3 lint/correctness/useExhaustiveDependencies ━━━━━━━━━━━━━━━━━━━━━━━━ - ! This hook does not specify all of its dependencies. + ! This hook does not specify all of its dependencies: someObj 26 │ function MyComponent1() { 27 │ let someObj = getObj(); @@ -188,7 +188,7 @@ extraDependenciesInvalid.js:28:3 lint/correctness/useExhaustiveDependencies ━ ``` extraDependenciesInvalid.js:36:3 lint/correctness/useExhaustiveDependencies ━━━━━━━━━━━━━━━━━━━━━━━━ - ! This hook specifies more dependencies than necessary. + ! This hook specifies more dependencies than necessary: outer 34 │ // Dependencies from outer scope should not be valid 35 │ function MyComponent3() { diff --git a/crates/biome_js_analyze/tests/specs/correctness/useExhaustiveDependencies/missingDependenciesInvalid.js.snap b/crates/biome_js_analyze/tests/specs/correctness/useExhaustiveDependencies/missingDependenciesInvalid.js.snap index 7c4efbb64f8c..cf02e2498807 100644 --- a/crates/biome_js_analyze/tests/specs/correctness/useExhaustiveDependencies/missingDependenciesInvalid.js.snap +++ b/crates/biome_js_analyze/tests/specs/correctness/useExhaustiveDependencies/missingDependenciesInvalid.js.snap @@ -166,7 +166,7 @@ function MyComponent15() { ``` missingDependenciesInvalid.js:18:5 lint/correctness/useExhaustiveDependencies ━━━━━━━━━━━━━━━━━━━━━━ - ! This hook does not specify all of its dependencies. + ! This hook does not specify all of its dependencies: a 16 │ let a = 1; 17 │ const b = a + 1; @@ -192,7 +192,7 @@ missingDependenciesInvalid.js:18:5 lint/correctness/useExhaustiveDependencies ``` missingDependenciesInvalid.js:18:5 lint/correctness/useExhaustiveDependencies ━━━━━━━━━━━━━━━━━━━━━━ - ! This hook does not specify all of its dependencies. + ! This hook does not specify all of its dependencies: b 16 │ let a = 1; 17 │ const b = a + 1; @@ -218,7 +218,7 @@ missingDependenciesInvalid.js:18:5 lint/correctness/useExhaustiveDependencies ``` missingDependenciesInvalid.js:32:3 lint/correctness/useExhaustiveDependencies ━━━━━━━━━━━━━━━━━━━━━━ - ! This hook does not specify all of its dependencies. + ! This hook does not specify all of its dependencies: deferredValue 30 │ const deferredValue = useDeferredValue(value); 31 │ const [isPending, startTransition] = useTransition(); @@ -244,7 +244,7 @@ missingDependenciesInvalid.js:32:3 lint/correctness/useExhaustiveDependencies ``` missingDependenciesInvalid.js:32:3 lint/correctness/useExhaustiveDependencies ━━━━━━━━━━━━━━━━━━━━━━ - ! This hook does not specify all of its dependencies. + ! This hook does not specify all of its dependencies: memoizedCallback 30 │ const deferredValue = useDeferredValue(value); 31 │ const [isPending, startTransition] = useTransition(); @@ -270,7 +270,7 @@ missingDependenciesInvalid.js:32:3 lint/correctness/useExhaustiveDependencies ``` missingDependenciesInvalid.js:32:3 lint/correctness/useExhaustiveDependencies ━━━━━━━━━━━━━━━━━━━━━━ - ! This hook does not specify all of its dependencies. + ! This hook does not specify all of its dependencies: state 30 │ const deferredValue = useDeferredValue(value); 31 │ const [isPending, startTransition] = useTransition(); @@ -296,7 +296,7 @@ missingDependenciesInvalid.js:32:3 lint/correctness/useExhaustiveDependencies ``` missingDependenciesInvalid.js:32:3 lint/correctness/useExhaustiveDependencies ━━━━━━━━━━━━━━━━━━━━━━ - ! This hook does not specify all of its dependencies. + ! This hook does not specify all of its dependencies: name 30 │ const deferredValue = useDeferredValue(value); 31 │ const [isPending, startTransition] = useTransition(); @@ -322,7 +322,7 @@ missingDependenciesInvalid.js:32:3 lint/correctness/useExhaustiveDependencies ``` missingDependenciesInvalid.js:32:3 lint/correctness/useExhaustiveDependencies ━━━━━━━━━━━━━━━━━━━━━━ - ! This hook does not specify all of its dependencies. + ! This hook does not specify all of its dependencies: isPending 30 │ const deferredValue = useDeferredValue(value); 31 │ const [isPending, startTransition] = useTransition(); @@ -348,7 +348,7 @@ missingDependenciesInvalid.js:32:3 lint/correctness/useExhaustiveDependencies ``` missingDependenciesInvalid.js:32:3 lint/correctness/useExhaustiveDependencies ━━━━━━━━━━━━━━━━━━━━━━ - ! This hook does not specify all of its dependencies. + ! This hook does not specify all of its dependencies: memoizedValue 30 │ const deferredValue = useDeferredValue(value); 31 │ const [isPending, startTransition] = useTransition(); @@ -373,7 +373,7 @@ missingDependenciesInvalid.js:32:3 lint/correctness/useExhaustiveDependencies ``` missingDependenciesInvalid.js:52:3 lint/correctness/useExhaustiveDependencies ━━━━━━━━━━━━━━━━━━━━━━ - ! This hook does not specify all of its dependencies. + ! This hook does not specify all of its dependencies: a 50 │ function MyComponent3() { 51 │ let a = 1; @@ -399,7 +399,7 @@ missingDependenciesInvalid.js:52:3 lint/correctness/useExhaustiveDependencies ``` missingDependenciesInvalid.js:53:3 lint/correctness/useExhaustiveDependencies ━━━━━━━━━━━━━━━━━━━━━━ - ! This hook does not specify all of its dependencies. + ! This hook does not specify all of its dependencies: a 51 │ let a = 1; 52 │ useEffect(() => console.log(a), []); @@ -425,7 +425,7 @@ missingDependenciesInvalid.js:53:3 lint/correctness/useExhaustiveDependencies ``` missingDependenciesInvalid.js:54:3 lint/correctness/useExhaustiveDependencies ━━━━━━━━━━━━━━━━━━━━━━ - ! This hook does not specify all of its dependencies. + ! This hook does not specify all of its dependencies: a 52 │ useEffect(() => console.log(a), []); 53 │ useCallback(() => console.log(a), []); @@ -451,7 +451,7 @@ missingDependenciesInvalid.js:54:3 lint/correctness/useExhaustiveDependencies ``` missingDependenciesInvalid.js:55:3 lint/correctness/useExhaustiveDependencies ━━━━━━━━━━━━━━━━━━━━━━ - ! This hook does not specify all of its dependencies. + ! This hook does not specify all of its dependencies: a 53 │ useCallback(() => console.log(a), []); 54 │ useMemo(() => console.log(a), []); @@ -477,7 +477,7 @@ missingDependenciesInvalid.js:55:3 lint/correctness/useExhaustiveDependencies ``` missingDependenciesInvalid.js:56:3 lint/correctness/useExhaustiveDependencies ━━━━━━━━━━━━━━━━━━━━━━ - ! This hook does not specify all of its dependencies. + ! This hook does not specify all of its dependencies: a 54 │ useMemo(() => console.log(a), []); 55 │ useImperativeHandle(ref, () => console.log(a), []); @@ -503,7 +503,7 @@ missingDependenciesInvalid.js:56:3 lint/correctness/useExhaustiveDependencies ``` missingDependenciesInvalid.js:57:3 lint/correctness/useExhaustiveDependencies ━━━━━━━━━━━━━━━━━━━━━━ - ! This hook does not specify all of its dependencies. + ! This hook does not specify all of its dependencies: a 55 │ useImperativeHandle(ref, () => console.log(a), []); 56 │ useLayoutEffect(() => console.log(a), []); @@ -529,7 +529,7 @@ missingDependenciesInvalid.js:57:3 lint/correctness/useExhaustiveDependencies ``` missingDependenciesInvalid.js:64:3 lint/correctness/useExhaustiveDependencies ━━━━━━━━━━━━━━━━━━━━━━ - ! This hook does not specify all of its dependencies. + ! This hook does not specify all of its dependencies: a 62 │ function MyComponent4() { 63 │ let a = 1; @@ -555,7 +555,7 @@ missingDependenciesInvalid.js:64:3 lint/correctness/useExhaustiveDependencies ``` missingDependenciesInvalid.js:73:3 lint/correctness/useExhaustiveDependencies ━━━━━━━━━━━━━━━━━━━━━━ - ! This hook does not specify all of its dependencies. + ! This hook does not specify all of its dependencies: a 71 │ function MyComponent5() { 72 │ let a = 1; @@ -590,7 +590,7 @@ missingDependenciesInvalid.js:73:3 lint/correctness/useExhaustiveDependencies ``` missingDependenciesInvalid.js:83:3 lint/correctness/useExhaustiveDependencies ━━━━━━━━━━━━━━━━━━━━━━ - ! This hook does not specify all of its dependencies. + ! This hook does not specify all of its dependencies: someObj.name 81 │ function MyComponent6() { 82 │ let someObj = getObj(); @@ -616,7 +616,7 @@ missingDependenciesInvalid.js:83:3 lint/correctness/useExhaustiveDependencies ``` missingDependenciesInvalid.js:89:3 lint/correctness/useExhaustiveDependencies ━━━━━━━━━━━━━━━━━━━━━━ - ! This hook does not specify all of its dependencies. + ! This hook does not specify all of its dependencies: a 88 │ const MyComponent7 = React.memo(function ({ a }) { > 89 │ useEffect(() => { @@ -641,7 +641,7 @@ missingDependenciesInvalid.js:89:3 lint/correctness/useExhaustiveDependencies ``` missingDependenciesInvalid.js:95:3 lint/correctness/useExhaustiveDependencies ━━━━━━━━━━━━━━━━━━━━━━ - ! This hook does not specify all of its dependencies. + ! This hook does not specify all of its dependencies: a 94 │ const MyComponent8 = React.memo(({ a }) => { > 95 │ useEffect(() => { @@ -666,7 +666,7 @@ missingDependenciesInvalid.js:95:3 lint/correctness/useExhaustiveDependencies ``` missingDependenciesInvalid.js:103:3 lint/correctness/useExhaustiveDependencies ━━━━━━━━━━━━━━━━━━━━━ - ! This hook does not specify all of its dependencies. + ! This hook does not specify all of its dependencies: a 101 │ export function MyComponent9() { 102 │ let a = 1; @@ -692,7 +692,7 @@ missingDependenciesInvalid.js:103:3 lint/correctness/useExhaustiveDependencies ``` missingDependenciesInvalid.js:110:3 lint/correctness/useExhaustiveDependencies ━━━━━━━━━━━━━━━━━━━━━ - ! This hook does not specify all of its dependencies. + ! This hook does not specify all of its dependencies: a 108 │ export default function MyComponent10() { 109 │ let a = 1; @@ -718,7 +718,7 @@ missingDependenciesInvalid.js:110:3 lint/correctness/useExhaustiveDependencies ``` missingDependenciesInvalid.js:118:3 lint/correctness/useExhaustiveDependencies ━━━━━━━━━━━━━━━━━━━━━ - ! This hook does not specify all of its dependencies. + ! This hook does not specify all of its dependencies: a 116 │ function MyComponent11() { 117 │ let a = 1; @@ -744,7 +744,7 @@ missingDependenciesInvalid.js:118:3 lint/correctness/useExhaustiveDependencies ``` missingDependenciesInvalid.js:125:3 lint/correctness/useExhaustiveDependencies ━━━━━━━━━━━━━━━━━━━━━ - ! This hook does not specify all of its dependencies. + ! This hook does not specify all of its dependencies: a 123 │ function MyComponent12() { 124 │ let a = 1; @@ -770,7 +770,7 @@ missingDependenciesInvalid.js:125:3 lint/correctness/useExhaustiveDependencies ``` missingDependenciesInvalid.js:133:9 lint/correctness/useExhaustiveDependencies ━━━━━━━━━━━━━━━━━━━━━ - ! This hook does not specify all of its dependencies. + ! This hook does not specify all of its dependencies: a 131 │ function MyComponent13() { 132 │ let a = 1; @@ -796,7 +796,7 @@ missingDependenciesInvalid.js:133:9 lint/correctness/useExhaustiveDependencies ``` missingDependenciesInvalid.js:141:2 lint/correctness/useExhaustiveDependencies ━━━━━━━━━━━━━━━━━━━━━ - ! This hook does not specify all of its dependencies. + ! This hook does not specify all of its dependencies: ref.current 139 │ function MyComponent14() { 140 │ const ref = useRef(); @@ -822,7 +822,7 @@ missingDependenciesInvalid.js:141:2 lint/correctness/useExhaustiveDependencies ``` missingDependenciesInvalid.js:152:2 lint/correctness/useExhaustiveDependencies ━━━━━━━━━━━━━━━━━━━━━ - ! This hook does not specify all of its dependencies. + ! This hook does not specify all of its dependencies: ref.current 150 │ } 151 │ const ref = useRef(); diff --git a/justfile b/justfile index 217c0698e165..bbfc8668eaec 100644 --- a/justfile +++ b/justfile @@ -117,7 +117,7 @@ ready: git diff --exit-code --quiet just gen just documentation - #just format # fromat is already run in `just gen` + #just format # format is already run in `just gen` just lint just test just test-doc diff --git a/website/src/content/docs/linter/rules/use-exhaustive-dependencies.md b/website/src/content/docs/linter/rules/use-exhaustive-dependencies.md index d6ccd64fb8a2..4abe0b4f7ec2 100644 --- a/website/src/content/docs/linter/rules/use-exhaustive-dependencies.md +++ b/website/src/content/docs/linter/rules/use-exhaustive-dependencies.md @@ -50,7 +50,7 @@ function component() { 
correctness/useExhaustiveDependencies.js:5:5 lint/correctness/useExhaustiveDependencies ━━━━━━━━━━━━
 
-  ✖ This hook does not specify all of its dependencies.
+  ✖ This hook does not specify all of its dependencies: a
   
     3 │ function component() {
     4 │     let a = 1;
@@ -84,7 +84,7 @@ function component() {
 
 
correctness/useExhaustiveDependencies.js:5:5 lint/correctness/useExhaustiveDependencies ━━━━━━━━━━━━
 
-  ✖ This hook specifies more dependencies than necessary.
+  ✖ This hook specifies more dependencies than necessary: b
   
     3 │ function component() {
     4 │     let b = 1;
@@ -118,7 +118,7 @@ function component() {
 
 
correctness/useExhaustiveDependencies.js:5:5 lint/correctness/useExhaustiveDependencies ━━━━━━━━━━━━
 
-  ✖ This hook specifies more dependencies than necessary.
+  ✖ This hook specifies more dependencies than necessary: setName
   
     3 │ function component() {
     4 │     const [name, setName] = useState();
@@ -152,7 +152,7 @@ function component() {
 
 
correctness/useExhaustiveDependencies.js:6:5 lint/correctness/useExhaustiveDependencies ━━━━━━━━━━━━
 
-  ✖ This hook does not specify all of its dependencies.
+  ✖ This hook does not specify all of its dependencies: b
   
     4 │     let a = 1;
     5 │     const b = a + 1;

From 0bc20217c50ddbc14e65b86f385cd50241f70d8f Mon Sep 17 00:00:00 2001
From: mehm8128 
Date: Sat, 13 Jan 2024 22:36:16 +0900
Subject: [PATCH 2/2] docs: generate changelog.mdx

---
 crates/biome_css_factory/src/generated/syntax_factory.rs | 4 +++-
 website/src/content/docs/internals/changelog.mdx         | 2 ++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/crates/biome_css_factory/src/generated/syntax_factory.rs b/crates/biome_css_factory/src/generated/syntax_factory.rs
index 2fc6735a14a6..bebd68d45115 100644
--- a/crates/biome_css_factory/src/generated/syntax_factory.rs
+++ b/crates/biome_css_factory/src/generated/syntax_factory.rs
@@ -269,7 +269,9 @@ impl SyntaxFactory for CssSyntaxFactory {
                 let mut unmatched_count = 3usize;
                 let mut group_slot_map = [false; 3usize];
                 for _ in 0usize..3usize {
-                    let Some (element) = & current_element else { break ; } ;
+                    let Some(element) = ¤t_element else {
+                        break;
+                    };
                     if !group_slot_map[0usize] && AnyCssLineWidth::can_cast(element.kind()) {
                         group_slot_map[0usize] = true;
                     } else if !group_slot_map[1usize] && CssLineStyle::can_cast(element.kind()) {
diff --git a/website/src/content/docs/internals/changelog.mdx b/website/src/content/docs/internals/changelog.mdx
index bd9a6ce29c19..3f2fe1873fe1 100644
--- a/website/src/content/docs/internals/changelog.mdx
+++ b/website/src/content/docs/internals/changelog.mdx
@@ -57,6 +57,8 @@ Read our [guidelines for writing a good changelog entry](https://github.com/biom
 
   This cases requires the presence of a prototype.
 
+- Add dependency variable names on error message when useExhaustiveDependencies rule shows errors. Contributed by @mehm8128
+
 #### Bug fixes
 
 - The fix of [useArrowFunction](https://biomejs.dev/linter/rules/use-arrow-function) now adds parentheses around the arrow function in more cases where it is needed ([#1524](https://github.com/biomejs/biome/issues/1524)).