Allow PascalCase to React Component in `@typescript-eslint/naming-convention` rule

[younho9]

Currently @typescript-eslint/naming-convention rule reports "react function component is not strictCamelCase."

How about add overrides for .tsx (react file extension) ?

Maybe can override it in the following way or copy all configuration for @typescript-eslint/naming-convention

overrides: [
  {
    files: ['**/*.tsx'],
    rules: {
      // ...
      '@typescript-eslint/naming-convention': [
        'error',
        {
          selector: 'function',
          format: ['PascalCase', 'camelCase'],
        },
      ],
    },
  },
]

[fregante]

I don't know how common this is in react, but react-table also uses object properties to specify components, so they're in PascalCase

https://react-table.tanstack.com/docs/quick-start#define-columns

So I had to append this to the config:

{
  selector: ["function", "objectLiteralProperty", "objectLiteralMethod"],
  format: ["PascalCase", "camelCase"]
}

[younho9]

I found variable name could be PascalCase when declare component as arrow function.

This is enforced in the xo-react rule.

{
    selector: ['variable', 'function', 'objectLiteralProperty', 'objectLiteralMethod'],
    types: ['function'],
    format: ['StrictPascalCase', 'strictCamelCase'],
},

In order to select more specifically, it seems necessary to add function type.

[sindresorhus]

PR welcome