CODEWITHSUNDEEP
reactjstypescripttslint
Robin
Robin

Reputation: 8498

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

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

Explanation

Upvotes: 6

Views: 3872

Answers (3)

FabienChn
FabienChn

Reputation: 968

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

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

Upvotes: 2

soywod
soywod

Reputation: 4520

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

enter image description here

Upvotes: 0

Amid
Amid

Reputation: 22352

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.

Upvotes: 4

Related Questions