TSLint and React stateless component naming (PascalCase vs. camelCase)

Question

Stateless React components should be named in PascalCase, so React can distinguish between native elements and components. Typescripts naming convention dictates that we should use lowerCamelCase or UPPER_CASE for the name of const variables.

How can I satisfy both (React and tslint)?

Stagger

Answer 1

I think you have two options here:

1. Use where appopriate comment like this

   /* tslint:disable-next-line:variable-name */

   to disable tslint warning at that particular line

2. Use class components instead of functional ones.

Linders

Thank you for your answer. Maybe this is another solution: palantir.github.io/tslint/rules/variable-name – Stagger

If you will allow both pascal case and camel case - this will effectively kill the purpose of the check. As the most common problem is the mix of the mentioned styles - and tslint is a good tool to prevent this. – Linders

Can't we just allow PascalCase for StatelessComponent<S> type? – Gil

Answer 2

You can add the following rule in you tslint.json:

"variable-name": [true, "ban-keywords", "check-format", "allow-pascal-case"]

Maigre

Answer 3

I found a compromise, using a function declaration instead of a variable declaration for my component:

Policyholder