Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 596
Robin Avatar asked Sep 06 '17 06:09

Robin


People also ask

What is the difference between camelCase and PascalCase?

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.

Why we use camelCase in react?

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 should camelCase be used?

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.

Should React components files be capitalized?

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.


2 Answers

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.

like image 129
Amid Avatar answered Oct 09 '22 21:10

Amid


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

"variable-name": [true, "ban-keywords", "check-format", "allow-pascal-case"]
like image 26
FabienChn Avatar answered Oct 09 '22 20:10

FabienChn