Open johnhaley81 opened 6 years ago
An example of a difficult to read block of React code:
render: _self =>
isTheThingConfiguredCorrectly(
someCondition1,
someCondition2,
someCondition3,
) ?
<Notifications.Notification type_=`success>
<Notifications.Title>
(ReasonReact.string("The thing is configured correctly"))
</Notifications.Title>
<Notifications.Paragraph>
(ReasonReact.string("The app is good to go. Have fun!"))
</Notifications.Paragraph>
</Notifications.Notification> :
<Notifications.Notification type_=`warning>
<Notifications.Title>
(ReasonReact.string("The thing requires some configuration"))
</Notifications.Title>
<Notifications.Paragraph>
(
ReasonReact.string(
"Click the below button to finish the setup for your account.",
)
)
</Notifications.Paragraph>
<Buttons.ButtonGroup>
<Buttons.Button primary=true onClick=(e => e |. onConfigureClick)>
(ReasonReact.string("Configure your account"))
</Buttons.Button>
</Buttons.ButtonGroup>
</Notifications.Notification>
Would anybody else feel like it would be better if ternary operators went as the first character on a new line instead of the last character on the current line?
Currently
refmt
does this:I think it would be more readable if it was formatted like this:
When you have a big block of react components that are conditionally displayed on a boolean, your code gets auto formatted to use a ternary operator and it's really hard to see where the ? and : start/stop.
As a possible added benefit, I think this is how eslint and prettier formats ternary statements so people coming over from JS land might find this more familiar.