Discussion about formatting "rules" (i.e. the one with parenthesis)

Note: this is primarily for others who’ve used prettier since its inception to understand, as formatting styles have changed, the underlying rationale behind formatting decisions.

tldr; How would you describe the “rules” that prettier operates against when deciding to keep or remove structural syntax?.

---

Background

(Related to #1733 and now #2065)

This tweet got some attention from some notable folks:

https://twitter.com/ericclemmons/status/876179258888081408 “I like prettier, but I’d prefer that parenthesis didn’t change instances like these.” – @ericclemmons

Rationale

My take on Prettier’s “rationale” (rules) for formatting is to balance legibility with consistency.

Based on the changes since 1.3.1 (IIRC), it’s more like balance legibility with ~consistency~ simplicity.

Early on, my sense was that ArrowExpressions generally matched the following:

• Single-line expressions with implicit return:

  () => 42
  

• Multi-line expressions with implicit return:

  (props) => (
    <div>
      Hello there, {props.children}!
    </div>
  );`
  

• Multi-line expressions with explicit return:

  (props) => {
    const { children } = props;
  
    return (
      <div>
        Hello there, {children}!
      </div>
    );
  }`
  

As complexity grew (going from () to (props) to ({ children }), etc.), formatting changes were minimal.

It seems now that there’s a bit more of a jello effect, where it wiggles in more places than where you poked it 😉

[Haroenv]

I’d prefer parenthesis for all multi-line arrow functions as well. Before prettier I was not aware that it was possible to do that, and it looks quite scary to me. The parenthesis around jsx also made it easier to move parts, since it’s completely separated from other parts of the code.

[btnwtn]

I want enforced parens for single parameter arrow functions so badly 👍