Scripts: Ensure that typescript-eslint checks for unused vars

[Chrico]

What?

'no-unused-vars': 'off' in eslint-plugin/configs/recommanded.js will also disable the Typescript eslint when running wp-scripts lint-js.

Why?

eslint/no-unused-vars got disabled when introducing support for TypeScript with #27143 (2-3 years ago) when Gutenberg was moving to Typescript. By disabling this feature, the Typescript eslint will not be executed. We actively enable "no-unused-vars" and "@typescript-eslint/no-unused-vars" and additionally setting "ignoreRestSiblings" to "true", which is actively used in Gutenberg.

See more information in: #54305

Testing Instructions

Create a new file:

index.ts

class Foo {
	protected bar: string;
	public constructor( protected value: string ) {
		this.bar = 'bar';
	}

	public getValue = (): string => {
		return this.value;
	};
}
new Foo( 1 );

with package.json:

{
    "name": "tsc-eslint",
    "version": "1.0.0",
    "license": "GPL-2.0-or-later",
    "devDependencies": {
        "@wordpress/scripts": "^25.0.0",
        "typescript": "^4.9.4"
    }
}

and execute on cli:

$ wp-scripts lint-js *.{ts,tsx}

before this fix the Typescript eslint did not catch any type errors:

Done in 1.83s.

after this fix the Typescript eslint will match errors:

/{snip}/index.ts
  5:32  error  'value' is defined but never used  no-unused-vars

✖ 1 problem (1 error, 0 warnings)

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: Chrico <[email protected]>
Co-authored-by: sirreal <[email protected]>
Co-authored-by: gziolo <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[github-actions]

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @Chrico! In case you missed it, we'd love to have you join us in our Slack community.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

[gziolo]

I see that changes work as CI reports many linting errors that would have to be fixed:

The question is whether both rules should be enabled at the same time, as they often report the same issues. I don't know the details but at least for the Gutenberg repository no-unused-var is reporting violations way often.

[Chrico]

@gziolo
The @typescript-eslint/no-unused-vars extends the eslint/no-unused-vars. I guess we need to change it to following:

{
   'no-unused-vars': 'off',
   '@typescript-eslint/no-unused-vars': [ 'error', { ignoreRestSiblings: true } ]
}

At least, this is the recommended way in the docs https://typescript-eslint.io/rules/no-unused-vars/#how-to-use ;-)

[gziolo]

There are still 24 errors reported, way better but it probably reports unused variables that need to be put in the function callbacks:

[Chrico]

Should we ( I ?) also fix the problems which now occur or is this a "follow-up" Issue/PR? :-) Probably, depending on how we want to continue, some code might needs to be touched and/or we need to add some // eslint-disable-next-line @typescript-eslint/no-unused-vars ?!

[gziolo]

It needs to be evaluated before landing whether these issues are correctly highlighted and the should get fixed. Alternatively, maybe there are some config options that could relax these checks to pass the validation.

[Chrico]

The new reported errors look really like a quick win. Maybe just needs some jep/nope from you (?). :-)

Quickly went through all items:

---

https://github.com/WordPress/gutenberg/blob/v18.6.1/packages/components/src/autocomplete/index.tsx#L16
--> Could be removed, it is not used in that file.

---

https://github.com/WordPress/gutenberg/blob/v18.6.1/packages/components/src/border-box-control/border-box-control-visualizer/component.tsx#L4
--> Could be removed, it is not used in that file.

---

https://github.com/WordPress/gutenberg/blob/v18.6.1/packages/components/src/date-time/date-time/index.tsx#L10
--> Could be removed, it is not used in that file.

---

https://github.com/WordPress/gutenberg/blob/v18.6.1/packages/components/src/font-size-picker/utils.ts#L4
--> Could be removed, it is not used in that file.

---

https://github.com/WordPress/gutenberg/blob/v18.6.1/packages/components/src/palette-edit/test/index.tsx#L19

_ is unused, probably could be rewritten into:

[ ...Array( input.value.length ) ].forEach( async () => await press.Backspace() )

---

https://github.com/WordPress/gutenberg/blob/v18.6.1/packages/components/src/private-apis.ts#L4
--> Could be removed, it is not used in that file.

---

https://github.com/WordPress/gutenberg/blob/v18.6.1/packages/components/src/theme/stories/index.story.tsx#L64
--> disable for that line?

---

https://github.com/WordPress/gutenberg/blob/v18.6.1/packages/components/src/toggle-group-control/toggle-group-control/component.tsx#L12
--> Could be removed, it is not used in that file.

---

https://github.com/WordPress/gutenberg/blob/v18.6.1/packages/compose/src/higher-order/test/compose.ts#L33
https://github.com/WordPress/gutenberg/blob/v18.6.1/packages/compose/src/higher-order/test/pipe.ts#L33

--> Seems like the case f is really not used in the following expect(). So: Remove that line or add to the expect()?

---

[gziolo]

Maybe you could commit to all the proposed changes to help decide.

[Chrico]

Seems like, every time something is fixed, something new appears. The wp-scripts lint-js does not show all errors at once (probably due the hugh amount of warnings). This might can take a bit longer, but probably also needs some help to not break things ;-)

[gziolo]

So far so good. 12 errors fixed, 12 more to go.

[Chrico]

Here we go @gziolo :) ☕

[sirreal]

Thanks for working on this, good spot! I've left a few suggestions I'd like to see changed before this moves ahead.

Will you also add a Breaking Changes changelog entry to the eslint-plugin package?

[sirreal]

Let's also remove the noUnused* config from all the package tsconfigs where it's redundant now.

[sirreal]

Thanks for the thoughtful discussion. I'm ready to approve and land this pending two changes:

• Revert and eslint-disable this valid case: Scripts: Ensure that typescript-eslint checks for unused vars #62925 (comment)
• Remove other tsconfig noUnused*: Scripts: Ensure that typescript-eslint checks for unused vars #62925 (comment)

[Chrico]

• Revert and eslint-disable this valid case: Scripts: Ensure that typescript-eslint checks for unused vars #62925 (comment)

Change was done here: 2b21b06

• Remove other tsconfig noUnused*: Scripts: Ensure that typescript-eslint checks for unused vars #62925 (comment)

Updates were done here: 93da83f

[sirreal]

Thanks, nice work on this one @Chrico.

[gziolo]

Thank you both for taking it to the finish line 🥇