JSX ternaries with parens indent oddly

[suchipi]

I often use parens with JSX ternaries to align opening and closing blocks, so that each "if" or "child" indentation is just one more indentation level deep:

prettier, like many AST-based JSX formatters, strips the parens and moves the opening tag of each JSX element up to where the paren was, which looks weird:

[jlongster]

Yep, I'm not sure if we'll get it 100% to the original example, but I agree that it looks better. JSX still needs several tweaks.

[suchipi]

It's a bit difficult to detect when to do this because the AST doesn't consider parens as their own node. But maybe we could try to apply it in situations where it's most common, like ternaries, arrow function expressions, etc.

Here's an example of it in arrow function expressions:

<Something>
  {() => (
    <SomethingElse>
      <span />
    </SomethingElse>
  )}
</Something>

prettier currently outputs:

<Something>
  {() => <SomethingElse>
      <span />
    </SomethingElse>}
</Something>;

Edit: I hit submit before fixing my english 😅

[vramana]

This is closely related to #73. So I am closing this in favour of that issue. You can file a new bug or reopen this if the problem still exists after that issue is solved.