Search code examples
reactjstypescripteslintpascalcasing

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

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!

Solution

  • 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