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)?

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.

Answer 2

您可以在tslint.json中添加以下规则：

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

Answer 3

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