JavaScript/React Style Guide Indentation

Question

Is there an agreed-upon convention for indentation in React JSX? 2 spaces, 4 spaces, tabs, etc.

Because of the large use of callbacks, many style guides suggest to use `2 spaces` for indentation, but this question regards javascript in general, not react. — Hitmands, Apr 28 '16 at 10:01
A bit late to the party. Anyway, I think 2 spaces hides the problem. If you have many callbacks, you should refactor your code instead of adding another layer of indentation. — David, Apr 29 '19 at 07:24

score 22 · Accepted Answer · answered Apr 28 '16 at 09:55

22

You should just use the same indentation as the rest of your javascript code.

That said react ecosystem seems to use mostly double spaces so I'd use that for consistency.

answered Apr 28 '16 at 09:55

silkAdmin

4,640
10
52
83

2

Two spaces, that's what I thought. Thanks! – Apr 28 '16 at 10:01

score 3 · Answer 2 · answered Nov 21 '16 at 12:34

Most popular libraries tend to use 2 spaces, but you can change this if you and your team agree on a standard.

You can setup up eslint so that your code base is standardised. I would definitely recommend you to take a look at one of the most popular javascript style guide by Airbnb.

score 2 · Answer 3 · answered Apr 28 '16 at 10:03

2

You should use the identation style that fit your style. You can use something like ESlint to define a convention. 4 or 2 spaces or tabs, is just a style.

answered Apr 28 '16 at 10:03

severin.julien

1,314
15
27

score 0 · Answer 4 · answered Aug 23 '22 at 13:08

0

The react source code and sample code in the React tutorial use 2 spaces. Also it seems like many of the Github projects related to React use 2.

answered Aug 23 '22 at 13:08

James Lawruk

30,112
19
130
137

JavaScript/React Style Guide Indentation

4 Answers4