eslint rule for preferring React Class Component syntax

Question

I'm looking for an existing eslint rule that prefers this syntax in React Class components. Does something like this exist?

class Foo extends Component {

Over this:

class Foo extends React.Component {

Except trying to word this in a quick search is not very fruitful. Currently looking into implementing a custom rule.

Answer 1

You can do this with the no-restricted-syntax rule. Try pasting this in the demo to try it out:

/* eslint no-restricted-syntax: ["error", {
    "selector": "ClassDeclaration > MemberExpression.superClass[object.type='Identifier'][object.name='React'][property.type='Identifier'][property.name='Component']",
    "message": "Use `extends Component` instead"
}] */

class Valid extends Component { }

class Invalid extends React.Component { } // Use `extends Component` instead (no-restricted-syntax)