Indent props aligned to first.

[justincorrigible]

Wishing there was a rule to force indentation of props similar to the parameter indentation by eslint.
https://eslint.org/docs/rules/indent#functiondeclaration

My idea would be to have something that looks like this:

<ComponentBlah prop1='stuff'
               prop2='stuff'
               prop3='stuff' />

Am I missing this as an option for an existing rule?

[jseminck]

I don't think that we have a rule that enforces this style at the moment.

[justincorrigible]

How difficult is it to implement such a thing for a new contributor? I may be able to give it a try.
or perhaps this is something that can be added on top of the main "indent" rule?

[jseminck]

I think it would be possible to implement. Can't say how hard it would be, definitely not easy but not impossible either.

• Find all JSXExpressions
• Count the number of props in each expression. If <= 1 ignore
• Store the location of the first prop (line, number of characters before -- I am not sure if this info is readily available but I'm quite sure it's possible to get it).
• Check whether every other prop is on a new line and has the same amount of characters as whitespace in front of it

I'm not sure if this should be a new rule, an option to an existing rule, or if it's something we want at all. I personally do not like this style at all and much more prefer:

<MyComponent
  prop1={x}
  prop2={y}
  prop3={z}
/>

But I understand everyone wants something different 😄

[justincorrigible]

Thanks 👍 may try an implementation this weekend.

[sbonami]

@hallaathrad did anything come of this?

Edit:
Oh, dupe of #398 it seems. I'll follow along there!