[no-unused-vars] False positive because React JSXIdentifier nodes are ignored

[octogonz]

Repro

{
  "rules": {
    "@typescript-eslint/no-unused-vars": [ "error" ]
  }
}

import * as React from 'react';

// ERROR: 'Foo' is defined but never used. [Error/@typescript-eslint/no-unused-vars]
class Foo extends React.Component { }

export class Bar extends React.Component {
  public render(): React.ReactNode {
    return <Foo />
  }
}

Expected Result

There should be no error for Foo, because it is used in the expression <Foo />.

Actual Result

The error is reported.

Additional Info

In the AST, the reference appears inside a JSXIdentifier node like this:

{
  "type": "ReturnStatement",
  "argument": {
	"type": "JSXElement",
	"openingElement": {
	  "type": "JSXOpeningElement",
	  "typeParameters": null,
	  "selfClosing": true,
	  "name": {
		"type": "JSXIdentifier",  // <====
		"name": "Foo"
	  },
	  "attributes": []
	},
	"closingElement": null,
	"children": []
  }
}

Whereas the rule only considers regular Identifier nodes:

typescript-eslint/packages/eslint-plugin/src/rules/no-unused-vars.ts

Lines 42 to 72 in 5eb40dc

	return Object.assign({}, rules, {
	'TSTypeReference Identifier'(node: TSESTree.Identifier) {
	context.markVariableAsUsed(node.name);
	},
	TSInterfaceHeritage(node: TSESTree.TSInterfaceHeritage) {
	if (node.expression) {
	markHeritageAsUsed(node.expression);
	}
	},
	TSClassImplements(node: TSESTree.TSClassImplements) {
	if (node.expression) {
	markHeritageAsUsed(node.expression);
	}
	},
	'TSParameterProperty Identifier'(node: TSESTree.Identifier) {
	// just assume parameter properties are used
	context.markVariableAsUsed(node.name);
	},
	'TSEnumMember Identifier'(node: TSESTree.Identifier) {
	context.markVariableAsUsed(node.name);
	},
	'*[declare=true] Identifier'(node: TSESTree.Identifier) {
	context.markVariableAsUsed(node.name);
	const scope = context.getScope();
	const { variableScope } = scope;
	if (variableScope !== scope) {
	const superVar = variableScope.set.get(node.name);
	if (superVar) {
	superVar.eslintUsed = true;
	}
	}

Versions

package	version
@typescript-eslint/eslint-plugin	2.0.0
@typescript-eslint/parser	2.0.0
TypeScript	3.5.2
ESLint	6.1.0
node	8.15.0
npm	6.4.1

[bradzacher]

This is a "known problem" of sorts.

The solution to this is to use the no-unused-vars rule from eslint-plugin-react.

We don't really want to encode JSX-specific information into the rule when there's another plugin which does it already.

This will be "fixed" by #688 though by virtue of the fact that the TS diagnostics has knowledge of JSX.

Prior art: #111, bradzacher/eslint-plugin-typescript#283

[octogonz]

Cool, that works in my case because I am using React. (It may not be a good option for people using JSX with other libraries unrelated to React. #688 seems like a great long-term solution.)