ESLint rule to warn about template string usage in the className prop

[valerybugakov]

Problem statement

Recently we refactored the main Sourcegraph codebase to be consistent in usage of the classNames utility to create className prop in React Components. To prevent usage of the template literal, we need to create an ESLint rule that communicates to a developer that the classNames util is the preferred approach.

Success criteria

1. The linter rule is created that detects the use of the template literal inside of the className prop and show a warning that suggests using classNames utility instead:

// Bad
<div className={`d-flex ${props.classname}`} />

// Good
<div className={classNames('d-flex', props.classname)} />

Things to learn/practice during the implementation

1. How to write custom ESLint rules to boost codebase consistency.

Estimated amount of work

T-shirt size abstract estimate: M.

[rafaeelaudibert]

Hey @valerybugakov! Could you assign this to me? It'd be pretty nice to test my AST skills :)

[valerybugakov]

@rafaeelaudibert, feel free to pick it up!