Proposal: Change indentation of JSX props to increase the readability

[dotintegral]

Hi Guys,

There's a one thing that bothers me in the standard and that is the indentation rule for JSX props (react/jsx-indent-props).
Consider the following piece of JSX code

<MyComponent
  prop1={prop1}
  prop2={prop2}
  prop3={prop3}
  prop4={pro4}>
  {myVariable1}
  {myVariable2}
</MyComponent>

At first glance, it's pretty hard to say where the props ends and the children area of the MyComponent starts.

Therefore I would like to propose a change in form of doubled indentation. This would result in the following code formatting:

<MyComponent
    prop1={prop1}
    prop2={prop2}
    prop3={prop3}
    prop4={pro4}>
  {myVariable1}
  {myVariable2}
</MyComponent>

Now, the props and the children are much more distinct visually, hence making the code more readable.

[oayres]

If you have a situation where you have several props on new lines like this, and it also interferes enough with the children to make it less readable, I would suggest adding the props in this way instead:

const props = {
  prop1: prop1,
  prop2: prop2,
  prop3: prop3,
  prop4: prop4
}

<MyComponent {...props}>
  {myVariable1}
  {myVariable2}
</MyComponent>

Personally, I feel having a 4 space indentation in this specific circumstance would cause some confusion and lack consistency.

[dotintegral]

Thanks for the insight. To me it seems more of a walkaround than a solution. I believe, that not being able to use propos in the way they were designed just to avoid readability issues is not the best approach. I love the idea of standarizing the code, although forcing developer to write additional object is way outside of the code convention, IMHO.

I'm not a big fan of double indentation too, don't get me wrong. And i think it looks kind of silly, to have props spaced more than the children. The problem is that, from the readability perspective, it just works.

So it comes down to the question, which is more important: formatting consistency or readability?

[oayres]

I do partly agree with what you're saying and I'm all for clean code with maximum readability.

When I have a situation where I have enough props to make them need to go into new lines, and they also accept children in a fashion that produces your problem, I'm happy to put the props into an object up above in some way. I think it makes for the most readable solution whilst also keeping the formatting consistency. I also think this isn't 'not using props in the way that they were designed' - this is just utilising ES6 to make shorter and cleaner code that everyone can follow.

Heck, with tools like pre-pack around the corner too, I'm sure the extra object is irrelevant - it's all about readability at the end of the day. For me, that's separating out longer lists of props into an object.

I prefer this

<MyComponent {...props}>
  {myVariable1}
  {myVariable2}
</MyComponent>

Over this

<MyComponent
    prop1={prop1}
    prop2={prop2}
    prop3={prop3}
    prop4={pro4}>
  {myVariable1}
  {myVariable2}
</MyComponent>

Don't you?

[dotintegral]

You know what, you did convinced me. It looks better. Having a very long list of props can reduce the readability of the code, therefore extracting it to a separate object totally makes sense.

I'm just thinking, that this solution is kind of hidden. Let me explain. If anybody else will ever encounter the same issue as I did - for that person it will not be obvious what to do. Either user will have to come up himself/herself with similar approach or find this ticket. And that makes me a bit worried, as both scenarios are not so obvious. It's more likely for that person to be like "what are those stupid rules, why are they here" instead of searching an alternative approach. Is there something that can be done, to hint the user what to do in such case? Maybe an explanation why and how to deal with such case written
here https://standardjs.com/rules.html#javascript-standard-style ?

[eddiemonge]

The separate prop object is nice. I usually do this:

<MyComponent
  prop1={prop1}
  prop2={prop2}
  prop3={prop3}
  prop4={prop4}
>
  {myVariable1}
  {myVariable2}
</MyComponent>

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

[eddiemonge]

@dotintegral Should this get closed?

[dotintegral]

Beats me, I still think my proposal looks more readable. But looking on the other standards (like Airbnb's config for ESLint), all lean towards the approach suggested by @eddiemonge. End of the day, it's a matter of personal preference and there can't be a clear winner here. So maybe being inline with other conventions is not a bad decision here.