Eslint rule to validate pascal case on react compoent name (only for .tsx extension)

Question

I'm trying to use Eslint to enforce PascalCase on my React components. I've looked at all the existing plugins/rules I could find, and here are my issues:

I'm using Typescript (.tsx extensions), so react/jsx-pascal-case won't work for me.
For files that are not components, I do want to allow kebab-case, so i'd like to filter out only files with the .tsx extension.

TL;DR - Id like an Eslint rule to enforce PascalCase, but only on files ending with .tsx.
Thanks!

Answer 1

You could consider the typescript-eslint extension for your eslint setup.

Then, you may refer to the naming-convention rule, which will allow you to enforce pascal case for your components.

Answer 2

Looks like what I needed was the eslint-plugin-filenames plugin and it's "filenames/match-exported" rule. This doesn't enforce that the actual component is called using pascal case, but this can be enforced maybe using @wentjun's answer