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

@@ -13,7 +13,6 @@ import {
 	useRef,
 	useMemo,
 } from '@wordpress/element';
-import { __, _n } from '@wordpress/i18n';
 import { useInstanceId, useMergeRefs, useRefEffect } from '@wordpress/compose';
 import {
 	create,

packages/components/src/border-box-control/border-box-control-visualizer/component.tsx

@@ -1,8 +1,3 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-
 /**
  * Internal dependencies
  */

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

packages/components/src/font-size-picker/utils.ts

@@ -1,8 +1,3 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-
 /**
  * Internal dependencies
  */

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();
 	}

packages/components/src/private-apis.ts

@@ -1,8 +1,3 @@
-/**
- * WordPress dependencies
- */
-import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';
-
 /**
  * Internal dependencies
  */

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">

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';
 
 /**

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'

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' );
 	} );

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.

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

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.

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.

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

packages/core-data/tsconfig.json

@@ -4,7 +4,6 @@
 	"compilerOptions": {
 		"rootDir": "src",
 		"declarationDir": "build-types",
-		"noUnusedParameters": false,
 		"checkJs": false,
 		"noImplicitAny": false
 	},

packages/data/tsconfig.json

@@ -4,7 +4,6 @@
 	"compilerOptions": {
 		"rootDir": "src",
 		"declarationDir": "build-types",
-		"noUnusedParameters": false,
 		"checkJs": false
 	},
 	"references": [

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';
 

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/**/*" ]

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,

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 {

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 =

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)
 

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',

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/**/*" ]
 }

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

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 */
 }

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 )
 	);
 }
 

tsconfig.base.json

@@ -20,8 +20,6 @@
 		"strict": true,
 
 		/* Additional Checks */
-		"noUnusedLocals": true,
-		"noUnusedParameters": true,
 		"noImplicitReturns": true,
 		"noFallthroughCasesInSwitch": true,