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)?
Camel case and Pascal case are similar. Both demand variables made from compound words and have the first letter of each appended word written with an uppercase letter. The difference is that Pascal case requires the first letter to be uppercase as well, while camel case does not.
Since JSX is closer to JavaScript than to HTML, React DOM uses camelCase property naming convention instead of HTML attribute names. For example, class becomes className in JSX, and tabindex becomes tabIndex .
When multiple words are used to form a variable, camel case joins those words together, without any white space, and delineates the start of each new word with a capital letter. In contrast, snake case uses an underscore between words to create separation.
User-Defined Components Must Be Capitalized createElement . Types that start with a capital letter like <Foo /> compile to React. createElement(Foo) and correspond to a component defined or imported in your JavaScript file.
I think you have two options here:
Use where appopriate comment like this
/* tslint:disable-next-line:variable-name */
to disable tslint warning at that particular line
Use class components instead of functional ones.
You can add the following rule in you tslint.json:
"variable-name": [true, "ban-keywords", "check-format", "allow-pascal-case"]
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With