Ternary formatting is a bit unexpected

I’m sure this is intentional, but wanted to point it out/ask. My source:

let foo = (bar === 0) ?
               baz :
               qux;

Which gets reformatted to:

let foo = (bar === 0)
                ? baz
                : qux;

This is a little strange to me, as it seems like the first stanza is the “question” and should keep the ? token. The second and third stanzas are “truthy” answer and “falsy” answer.

let foo = question ?
                truthyAnswer :
                falsyAnswer;

I can see where the current formatting is “prettier” in that the ? and : stack neatly, just wondering if it throws the implication of the syntax a bit.

Thx!

[kimjoar]

In my experience having ? and : on the new line improves the readability (as it’s easier to immediately see them while scanning code). This becomes more obvious when you have something more than a single word, e.g. an example with a require:

const { configureStore } = process.env.NODE_ENV === `production` ?
  require(`./configureProdStore`) : // eslint-disable-line import/no-commonjs
  require(`./configureDevStore`); // eslint-disable-line import/no-commonjs

// compared to

const { configureStore } = process.env.NODE_ENV === `production`
  ? require(`./configureProdStore`) // eslint-disable-line import/no-commonjs
  : require(`./configureDevStore`); // eslint-disable-line import/no-commonjs

(In the former it kinda looks like it’s requiring both until I read the code more closely, while in the latter it’s immediately obvious while scanning the code that it’s a ternary)

Or with jsx:

<button
  onClick={e => this.toggleAdvanced(e)}
  className="advancedOptions-button"
>
  {this.state.showAdvanced ?
    <FormattedMessage
      id="allocator-vacate-index.hide-advanced-options"
      defaultMessage="Hide advanced options"
    /> :
    <FormattedMessage
      id="allocator-vacate-index.show-advanced-options"
      defaultMessage="Show advanced options"
    />}
</button>

// compared to

<button
  onClick={e => this.toggleAdvanced(e)}
  className="advancedOptions-button"
>
  {this.state.showAdvanced
    ? <FormattedMessage
        id="allocator-vacate-index.hide-advanced-options"
        defaultMessage="Hide advanced options"
      />
    : <FormattedMessage
        id="allocator-vacate-index.show-advanced-options"
        defaultMessage="Show advanced options"
      />}
</button>

I feel the latter is more obvious when quickly scanning through the code (though, I’m biased as that’s the way I’ve written them for a long time, so might just be because of experience that I scan them quicker).

[mvolkmann]

Here’s an example of a ternary in my code:

      const prop =
        field === 'DurationOfLast1_2Signal' ? 'durationLast12' :
        field === 'DurationOfLast1_4Signal' ? 'durationLast14' :
        field === 'LeakFault' ? 'leakFault' :
        null;

And here is how Prettier reformats it:

      const prop = field === 'DurationOfLast1_2Signal'
        ? 'durationLast12'
        : field === 'DurationOfLast1_4Signal'
            ? 'durationLast14'
            : field === 'LeakFault'
                ? 'leakFault'
                : null;

I know it’s subjective, but I think my code is more readable. In my real code there are 9 ternaries, so the Prettier indentation gets pretty extreme.

The default indentation is 2 spaces, so why does it switch to 4-space indentation after the first ternary?