Respect paren + newline

Hi friends!

Been using prettier full time for a while now and it’s prettier great. I’d like to request one change that I think makes refactoring less error prone: respect ( + newline the same way if { + newline is treated.

// prettier maintains the block
if (foo) {
  doStuff()
}

// but changes this:
if (foo)
  doStuff()

// to this:
if (foo) doStuff()

I think doing the same for multi-line expressions (which happen all the time in JSX) would be equally beneficial. Since using prettier, I am getting a lot more syntax errors as I refactor my code because it puts the code on the same lines as the syntax. JSX is the most affected part in my code since it’s expression heavy, and also the most likely to be moved around as you build and refactor a UI.

Some examples

For example, consider this code:

const Slider = ({ isOpen, title, children }) => (
  <div>
    <h1>{title}</h1>
    {isOpen && (
      <div>
        {children}
      </div>
    )}
  </div>
);

Prettier changes it to:

const Slider = ({ isOpen, title, children }) =>
  <div>
    <h1>{title}</h1>
    {isOpen &&
      <div>
        {children}
      </div>}
  </div>;

If I am refactoring and move the <div/> somewhere else, maybe I’m inlining it into a different component, that semi-colon comes along with the div leading to syntax errors or in this case just a printed ; in the UI if you don’t catch it.

Additionally, the closing } in the isOpen block gets put on the same line as the closing div, so refactoring that block is more likely to result in accidental syntax errors:

If parens were respected like if block curlies

However, if the parens were respected (just like if block’s curlies) we can just move stuff around w/o spending extra time adjusting syntax.

Ternaries are also much easier to work with if the parens are respected:

As compared to not respecting them:

I am not proposing prettier insert parens and new lines but rather, do what it does today, except when a developer puts a paren + newline in, respect it the same way an if { is respected.

Thanks! 💙💙💙

[suchipi]

I’ve made a PR that:

• Adds wrapping parens back to JSX Arrow functions (when the JSX is multiline):

// Before
const MyThing = () =>
  <div>
    <span>Hi</span>
  </div>;

// After
const MyThing = () => (
  <div>
    <span>Hi</span>
  </div>
);

• Uses different formatting for ?: when using JSX

// Before
const MyThing = () =>
  <div>
    {isGood
      ? <div>
          <span>"yeah it's good"</span>
        </div>
      : isOkay ? <div>it's okay</div> : null}
  </div>;

// After:
const MyThing = () => (
  <div>
    {isGood ? (
      <div>
        <span>
          "yeah it's good"
        </span>
      </div>
    ) : isOkay ? (
      <div>it's okay</div>
    ) : (
      null
    )}
  </div>
);

• Adds wrapping parens when JSX is used in a logical expression:

// Before:
<div> 
  {a || <span />} 
</div>;

// After:
<div>
  {a || (
    <span />
  )}
</div>;

[ryanflorence]

@vjeux some people can’t use a mouse. Also, respecting parens still allows you to do the same thing you are right now.