From b4040030e913d441ca2d44fc1d428eb667b9098e Mon Sep 17 00:00:00 2001
From: Christian Leucht <family.leucht@gmail.com>
Date: Fri, 5 Jul 2024 10:19:18 +0200
Subject: [PATCH] Scripts: Add @typescript-eslint/no-unused-vars eslint rule
 (#62925)

Enable @typescript-eslint/no-unused-vars eslint rule in default eslint TypeScript configuration.
Disable redundant `noUnusedLocals` and `noUnusedParameters` from TypeScript configuration.

The TypeScript eslint configuration disabled no-unused-vars rules, resulting in many cases of unused vars appearing in code.

The expectation was that TypeScript handle the linting via configuration such as `noUnusedLocals` and `noUnusedParameters`. This was unreliable because TypeScript may not run on entire projects, for example if `checkJs` is disabled.

---

Co-authored-by: Chrico <chrico@git.wordpress.org>
Co-authored-by: sirreal <jonsurrell@git.wordpress.org>
Co-authored-by: gziolo <gziolo@git.wordpress.org>
---
 packages/components/src/autocomplete/index.tsx           | 1 -
 .../border-box-control-visualizer/component.tsx          | 5 -----
 packages/components/src/date-time/date-time/index.tsx    | 1 -
 packages/components/src/font-size-picker/utils.ts        | 5 -----
 packages/components/src/palette-edit/test/index.tsx      | 1 +
 packages/components/src/private-apis.ts                  | 5 -----
 packages/components/src/theme/stories/index.story.tsx    | 2 ++
 .../toggle-group-control/component.tsx                   | 1 -
 packages/compose/src/higher-order/test/compose.ts        | 1 -
 packages/compose/src/higher-order/test/pipe.ts           | 1 -
 packages/core-data/src/entity-types/menu-location.ts     | 1 +
 packages/core-data/src/entity-types/settings.ts          | 1 +
 packages/core-data/src/entity-types/theme.ts             | 1 +
 packages/core-data/src/entity-types/widget-type.ts       | 1 +
 packages/core-data/src/selectors.ts                      | 6 ++++++
 packages/core-data/tsconfig.json                         | 1 -
 packages/data/tsconfig.json                              | 1 -
 packages/dataviews/src/dataform.tsx                      | 1 -
 packages/date/tsconfig.json                              | 3 +--
 packages/editor/src/dataviews/actions/delete-post.tsx    | 2 +-
 packages/editor/src/dataviews/actions/reset-post.tsx     | 2 +-
 packages/editor/src/dataviews/store/reducer.ts           | 1 -
 packages/eslint-plugin/CHANGELOG.md                      | 4 ++--
 packages/eslint-plugin/configs/recommended.js            | 9 ++++++++-
 packages/redux-routine/tsconfig.json                     | 3 +--
 packages/report-flaky-tests/src/__tests__/run.test.ts    | 1 -
 packages/token-list/src/index.ts                         | 2 ++
 test/performance/config/performance-reporter.ts          | 2 +-
 tsconfig.base.json                                       | 2 --
 29 files changed, 30 insertions(+), 37 deletions(-)

diff --git a/packages/components/src/autocomplete/index.tsx b/packages/components/src/autocomplete/index.tsx
index 3bde3a73999f65..ef0fefe199c2e3 100644
--- a/packages/components/src/autocomplete/index.tsx
+++ b/packages/components/src/autocomplete/index.tsx
@@ -13,7 +13,6 @@ import {
 	useRef,
 	useMemo,
 } from '@wordpress/element';
-import { __, _n } from '@wordpress/i18n';
 import { useInstanceId, useMergeRefs, useRefEffect } from '@wordpress/compose';
 import {
 	create,
diff --git a/packages/components/src/border-box-control/border-box-control-visualizer/component.tsx b/packages/components/src/border-box-control/border-box-control-visualizer/component.tsx
index 2656911d765797..fe457eccac8c0e 100644
--- a/packages/components/src/border-box-control/border-box-control-visualizer/component.tsx
+++ b/packages/components/src/border-box-control/border-box-control-visualizer/component.tsx
@@ -1,8 +1,3 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-
 /**
  * Internal dependencies
  */
diff --git a/packages/components/src/date-time/date-time/index.tsx b/packages/components/src/date-time/date-time/index.tsx
index a75b9fe57c14ed..bdb4738c4b12c0 100644
--- a/packages/components/src/date-time/date-time/index.tsx
+++ b/packages/components/src/date-time/date-time/index.tsx
@@ -7,7 +7,6 @@ import type { ForwardedRef } from 'react';
  * WordPress dependencies
  */
 import { forwardRef } from '@wordpress/element';
-import { __, _x } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
diff --git a/packages/components/src/font-size-picker/utils.ts b/packages/components/src/font-size-picker/utils.ts
index cf81c7ed27b182..64816f12255bac 100644
--- a/packages/components/src/font-size-picker/utils.ts
+++ b/packages/components/src/font-size-picker/utils.ts
@@ -1,8 +1,3 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-
 /**
  * Internal dependencies
  */
diff --git a/packages/components/src/palette-edit/test/index.tsx b/packages/components/src/palette-edit/test/index.tsx
index 4900db80a833dd..980630633b97f9 100644
--- a/packages/components/src/palette-edit/test/index.tsx
+++ b/packages/components/src/palette-edit/test/index.tsx
@@ -16,6 +16,7 @@ async function clearInput( input: HTMLInputElement ) {
 	await click( input );
 
 	// Press backspace as many times as the input's current value
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars
 	for ( const _ of Array( input.value.length ) ) {
 		await press.Backspace();
 	}
diff --git a/packages/components/src/private-apis.ts b/packages/components/src/private-apis.ts
index 2c0eb92d3c76e5..19c8778a1fbda8 100644
--- a/packages/components/src/private-apis.ts
+++ b/packages/components/src/private-apis.ts
@@ -1,8 +1,3 @@
-/**
- * WordPress dependencies
- */
-import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';
-
 /**
  * Internal dependencies
  */
diff --git a/packages/components/src/theme/stories/index.story.tsx b/packages/components/src/theme/stories/index.story.tsx
index e83d0421f02298..d0af0a9b974fe3 100644
--- a/packages/components/src/theme/stories/index.story.tsx
+++ b/packages/components/src/theme/stories/index.story.tsx
@@ -59,9 +59,11 @@ export const ColorScheme: StoryFn< typeof Theme > = ( {
 } ) => {
 	const { colors } = generateThemeVariables( { accent, background } );
 	const { gray, ...otherColors } = colors;
+	/* eslint-disable @typescript-eslint/no-unused-vars */
 	const contrastIssues = Object.entries(
 		checkContrasts( { accent, background }, colors )
 	).filter( ( [ _, error ] ) => !! error );
+	/* eslint-enable @typescript-eslint/no-unused-vars */
 
 	const Chip = ( { color, name }: { color: string; name: string } ) => (
 		<HStack justify="flex-start">
diff --git a/packages/components/src/toggle-group-control/toggle-group-control/component.tsx b/packages/components/src/toggle-group-control/toggle-group-control/component.tsx
index 94d257900a2e35..520b2c414d70b9 100644
--- a/packages/components/src/toggle-group-control/toggle-group-control/component.tsx
+++ b/packages/components/src/toggle-group-control/toggle-group-control/component.tsx
@@ -8,7 +8,6 @@ import { LayoutGroup } from 'framer-motion';
  * WordPress dependencies
  */
 import { useInstanceId } from '@wordpress/compose';
-import { __ } from '@wordpress/i18n';
 import { useMemo } from '@wordpress/element';
 
 /**
diff --git a/packages/compose/src/higher-order/test/compose.ts b/packages/compose/src/higher-order/test/compose.ts
index 8c27a0b9b4401d..d53710015b89f4 100644
--- a/packages/compose/src/higher-order/test/compose.ts
+++ b/packages/compose/src/higher-order/test/compose.ts
@@ -30,7 +30,6 @@ describe( 'compose', () => {
 		const c = ( value ) => ( value += 'c' );
 		const d = ( value ) => ( value += 'd' );
 		const e = ( value ) => ( value += 'e' );
-		const f = ( value ) => ( value += 'f' );
 
 		expect( compose( [ a, b ], c, [ d ], e )( 'test' ) ).toBe(
 			'testedcba'
diff --git a/packages/compose/src/higher-order/test/pipe.ts b/packages/compose/src/higher-order/test/pipe.ts
index b15a7a3319128b..2f4119d724dbd2 100644
--- a/packages/compose/src/higher-order/test/pipe.ts
+++ b/packages/compose/src/higher-order/test/pipe.ts
@@ -30,7 +30,6 @@ describe( 'pipe', () => {
 		const c = ( value ) => ( value += 'c' );
 		const d = ( value ) => ( value += 'd' );
 		const e = ( value ) => ( value += 'e' );
-		const f = ( value ) => ( value += 'f' );
 
 		expect( pipe( [ a, b ], c, [ d ], e )( 'test' ) ).toBe( 'testabcde' );
 	} );
diff --git a/packages/core-data/src/entity-types/menu-location.ts b/packages/core-data/src/entity-types/menu-location.ts
index 9bc3e5f7189b0e..d5e01f45738c6d 100644
--- a/packages/core-data/src/entity-types/menu-location.ts
+++ b/packages/core-data/src/entity-types/menu-location.ts
@@ -7,6 +7,7 @@ import type { BaseEntityRecords as _BaseEntityRecords } from './base-entity-reco
 
 declare module './base-entity-records' {
 	export namespace BaseEntityRecords {
+		/* eslint-disable-next-line @typescript-eslint/no-unused-vars */
 		export interface MenuLocation< C extends Context > {
 			/**
 			 * The name of the menu location.
diff --git a/packages/core-data/src/entity-types/settings.ts b/packages/core-data/src/entity-types/settings.ts
index 23bd223571d39e..2ce7eff89d8889 100644
--- a/packages/core-data/src/entity-types/settings.ts
+++ b/packages/core-data/src/entity-types/settings.ts
@@ -12,6 +12,7 @@ import type { BaseEntityRecords as _BaseEntityRecords } from './base-entity-reco
 
 declare module './base-entity-records' {
 	export namespace BaseEntityRecords {
+		/* eslint-disable-next-line @typescript-eslint/no-unused-vars */
 		export interface Settings< C extends Context > {
 			/**
 			 * What to show on the front page
diff --git a/packages/core-data/src/entity-types/theme.ts b/packages/core-data/src/entity-types/theme.ts
index 75826c9110b652..87074f674a0b6e 100644
--- a/packages/core-data/src/entity-types/theme.ts
+++ b/packages/core-data/src/entity-types/theme.ts
@@ -7,6 +7,7 @@ import type { BaseEntityRecords as _BaseEntityRecords } from './base-entity-reco
 
 declare module './base-entity-records' {
 	export namespace BaseEntityRecords {
+		/* eslint-disable-next-line @typescript-eslint/no-unused-vars */
 		export interface Theme< C extends Context > {
 			/**
 			 * The theme's stylesheet. This uniquely identifies the theme.
diff --git a/packages/core-data/src/entity-types/widget-type.ts b/packages/core-data/src/entity-types/widget-type.ts
index 29c47d5a9635c1..d1f0aa7f72578f 100644
--- a/packages/core-data/src/entity-types/widget-type.ts
+++ b/packages/core-data/src/entity-types/widget-type.ts
@@ -7,6 +7,7 @@ import type { BaseEntityRecords as _BaseEntityRecords } from './base-entity-reco
 
 declare module './base-entity-records' {
 	export namespace BaseEntityRecords {
+		/* eslint-disable-next-line @typescript-eslint/no-unused-vars */
 		export interface WidgetType< C extends Context > {
 			/**
 			 * Unique slug identifying the widget type.
diff --git a/packages/core-data/src/selectors.ts b/packages/core-data/src/selectors.ts
index 242d516170d27d..425a537cad7363 100644
--- a/packages/core-data/src/selectors.ts
+++ b/packages/core-data/src/selectors.ts
@@ -232,7 +232,9 @@ export function getEntitiesByKind( state: State, kind: string ): Array< any > {
 export const getEntitiesConfig = createSelector(
 	( state: State, kind: string ): Array< any > =>
 		state.entities.config.filter( ( entity ) => entity.kind === kind ),
+	/* eslint-disable @typescript-eslint/no-unused-vars */
 	( state: State, kind: string ) => state.entities.config
+	/* eslint-enable @typescript-eslint/no-unused-vars */
 );
 /**
  * Returns the entity config given its kind and name.
@@ -992,6 +994,7 @@ export function getLastEntityDeleteError(
 		?.error;
 }
 
+/* eslint-disable @typescript-eslint/no-unused-vars */
 /**
  * Returns the previous edit from the current undo offset
  * for the entity records edits history, if any.
@@ -1008,7 +1011,9 @@ export function getUndoEdit( state: State ): Optional< any > {
 	} );
 	return undefined;
 }
+/* eslint-enable @typescript-eslint/no-unused-vars */
 
+/* eslint-disable @typescript-eslint/no-unused-vars */
 /**
  * Returns the next edit from the current undo offset
  * for the entity records edits history, if any.
@@ -1025,6 +1030,7 @@ export function getRedoEdit( state: State ): Optional< any > {
 	} );
 	return undefined;
 }
+/* eslint-enable @typescript-eslint/no-unused-vars */
 
 /**
  * Returns true if there is a previous edit from the current undo offset
diff --git a/packages/core-data/tsconfig.json b/packages/core-data/tsconfig.json
index a7aa712b28181b..5db0de19f111e8 100644
--- a/packages/core-data/tsconfig.json
+++ b/packages/core-data/tsconfig.json
@@ -4,7 +4,6 @@
 	"compilerOptions": {
 		"rootDir": "src",
 		"declarationDir": "build-types",
-		"noUnusedParameters": false,
 		"checkJs": false,
 		"noImplicitAny": false
 	},
diff --git a/packages/data/tsconfig.json b/packages/data/tsconfig.json
index ac06c716a3f16f..2bfc881dc6216e 100644
--- a/packages/data/tsconfig.json
+++ b/packages/data/tsconfig.json
@@ -4,7 +4,6 @@
 	"compilerOptions": {
 		"rootDir": "src",
 		"declarationDir": "build-types",
-		"noUnusedParameters": false,
 		"checkJs": false
 	},
 	"references": [
diff --git a/packages/dataviews/src/dataform.tsx b/packages/dataviews/src/dataform.tsx
index e96e0e13dc0517..6280964e911629 100644
--- a/packages/dataviews/src/dataform.tsx
+++ b/packages/dataviews/src/dataform.tsx
@@ -6,7 +6,6 @@ import type { Dispatch, SetStateAction } from 'react';
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
 import { TextControl } from '@wordpress/components';
 import { useCallback, useMemo } from '@wordpress/element';
 
diff --git a/packages/date/tsconfig.json b/packages/date/tsconfig.json
index d906a6dfd03439..0c9e6d5ed02b0b 100644
--- a/packages/date/tsconfig.json
+++ b/packages/date/tsconfig.json
@@ -3,8 +3,7 @@
 	"extends": "../../tsconfig.base.json",
 	"compilerOptions": {
 		"rootDir": "src",
-		"declarationDir": "build-types",
-		"noUnusedParameters": false
+		"declarationDir": "build-types"
 	},
 	"references": [ { "path": "../deprecated" } ],
 	"include": [ "src/**/*" ]
diff --git a/packages/editor/src/dataviews/actions/delete-post.tsx b/packages/editor/src/dataviews/actions/delete-post.tsx
index 36400702dae3f6..e6af8e963d5878 100644
--- a/packages/editor/src/dataviews/actions/delete-post.tsx
+++ b/packages/editor/src/dataviews/actions/delete-post.tsx
@@ -3,7 +3,7 @@
  */
 import { trash } from '@wordpress/icons';
 import { useDispatch } from '@wordpress/data';
-import { __, _n, sprintf, _x } from '@wordpress/i18n';
+import { __, _n, sprintf } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
 import {
 	Button,
diff --git a/packages/editor/src/dataviews/actions/reset-post.tsx b/packages/editor/src/dataviews/actions/reset-post.tsx
index 17c2860444630f..59199555ddd4db 100644
--- a/packages/editor/src/dataviews/actions/reset-post.tsx
+++ b/packages/editor/src/dataviews/actions/reset-post.tsx
@@ -4,7 +4,7 @@
 import { backup } from '@wordpress/icons';
 import { useDispatch } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
-import { __, _n, sprintf, _x } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
 import { useState } from '@wordpress/element';
 import {
diff --git a/packages/editor/src/dataviews/store/reducer.ts b/packages/editor/src/dataviews/store/reducer.ts
index e3b400faabe934..e00af778ddf01e 100644
--- a/packages/editor/src/dataviews/store/reducer.ts
+++ b/packages/editor/src/dataviews/store/reducer.ts
@@ -2,7 +2,6 @@
  * WordPress dependencies
  */
 import { combineReducers } from '@wordpress/data';
-import { __ } from '@wordpress/i18n';
 import type { Action } from '@wordpress/dataviews';
 
 type ReduxAction =
diff --git a/packages/eslint-plugin/CHANGELOG.md b/packages/eslint-plugin/CHANGELOG.md
index d6763095ba4a24..53bcb36e55bc33 100644
--- a/packages/eslint-plugin/CHANGELOG.md
+++ b/packages/eslint-plugin/CHANGELOG.md
@@ -3,8 +3,8 @@
 ## Unreleased
 
 ### Breaking Changes
-
--   Add [`@typescript-eslint/method-signature-style` rule](https://typescript-eslint.io/rules/method-signature-style) to the recommended TypeScript ruleset ([#62718](https://github.com/WordPress/gutenberg/pull/62718)).
+- Add [`@typescript-eslint/no-unused-vars` rule](https://typescript-eslint.io/rules/no-unused-vars) to the recommended TypeScript ruleset ([#62925](https://github.com/WordPress/gutenberg/pull/62925)).
+- Add [`@typescript-eslint/method-signature-style` rule](https://typescript-eslint.io/rules/method-signature-style) to the recommended TypeScript ruleset ([#62718](https://github.com/WordPress/gutenberg/pull/62718)).
 
 ## 19.2.0 (2024-06-26)
 
diff --git a/packages/eslint-plugin/configs/recommended.js b/packages/eslint-plugin/configs/recommended.js
index 28c6812fc3f840..df09d17beb6cbe 100644
--- a/packages/eslint-plugin/configs/recommended.js
+++ b/packages/eslint-plugin/configs/recommended.js
@@ -55,8 +55,15 @@ if ( isPackageInstalled( 'typescript' ) ) {
 				// Don't require redundant JSDoc types in TypeScript files.
 				'jsdoc/require-param-type': 'off',
 				'jsdoc/require-returns-type': 'off',
-				// Handled by TS itself.
+				// Use eslint for unused variable and parameter detection.
+				// This overlaps with TypeScript noUnusedLocals and noUnusedParameters settings.
+				// TypeScript may only run on a subset of files. Prefer eslint which is more
+				// likely to run on the entire codebase.
 				'no-unused-vars': 'off',
+				'@typescript-eslint/no-unused-vars': [
+					'error',
+					{ ignoreRestSiblings: true },
+				],
 				// no-shadow doesn't work correctly in TS, so let's use a TS-dedicated version instead.
 				'no-shadow': 'off',
 				'@typescript-eslint/no-shadow': 'error',
diff --git a/packages/redux-routine/tsconfig.json b/packages/redux-routine/tsconfig.json
index b100679f893998..6e33d8ff82d47e 100644
--- a/packages/redux-routine/tsconfig.json
+++ b/packages/redux-routine/tsconfig.json
@@ -3,8 +3,7 @@
 	"extends": "../../tsconfig.base.json",
 	"compilerOptions": {
 		"rootDir": "src",
-		"declarationDir": "build-types",
-		"noUnusedParameters": false
+		"declarationDir": "build-types"
 	},
 	"include": [ "src/**/*" ]
 }
diff --git a/packages/report-flaky-tests/src/__tests__/run.test.ts b/packages/report-flaky-tests/src/__tests__/run.test.ts
index 529dcd41cdcf89..f194d59c04fee6 100644
--- a/packages/report-flaky-tests/src/__tests__/run.test.ts
+++ b/packages/report-flaky-tests/src/__tests__/run.test.ts
@@ -2,7 +2,6 @@
  * External dependencies
  */
 import * as core from '@actions/core';
-import * as github from '@actions/github';
 
 /**
  * Internal dependencies
diff --git a/packages/token-list/src/index.ts b/packages/token-list/src/index.ts
index f4da3d23293eda..744afe54eb4928 100644
--- a/packages/token-list/src/index.ts
+++ b/packages/token-list/src/index.ts
@@ -193,6 +193,7 @@ export default class TokenList {
 		return true;
 	}
 
+	/* eslint-disable @typescript-eslint/no-unused-vars */
 	/**
 	 * Returns true if `token` is in the associated attribute’s supported
 	 * tokens. Returns false otherwise.
@@ -207,4 +208,5 @@ export default class TokenList {
 	supports( _token: string ): boolean {
 		return true;
 	}
+	/* eslint-enable @typescript-eslint/no-unused-vars */
 }
diff --git a/test/performance/config/performance-reporter.ts b/test/performance/config/performance-reporter.ts
index 6360b78636a2ac..a6d245091c1591 100644
--- a/test/performance/config/performance-reporter.ts
+++ b/test/performance/config/performance-reporter.ts
@@ -118,7 +118,7 @@ export function curateResults(
 	return Object.fromEntries(
 		Object.entries( output )
 			// Reduce the output to contain taken metrics only.
-			.filter( ( [ _, value ] ) => value !== undefined )
+			.filter( ( [ , value ] ) => value !== undefined )
 	);
 }
 
diff --git a/tsconfig.base.json b/tsconfig.base.json
index d1747ac4d1efec..a766eedaeddcaa 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -20,8 +20,6 @@
 		"strict": true,
 
 		/* Additional Checks */
-		"noUnusedLocals": true,
-		"noUnusedParameters": true,
 		"noImplicitReturns": true,
 		"noFallthroughCasesInSwitch": true,