Extra indent on ternary with long expressions

Prettier 1.16.1 Playground link

Input:

function doThing() {
  return arg =>
    !arg
      ? null
      : otherArg => (
        <MagicThing
          with="Kinda long"
          attrs={{ a: 1, b: 2 }}
          that={otherArg}
          keep="going"
        />
      )
}

Output:

function doThing() {
  return arg =>
    !arg
      ? null
      : otherArg => (
          <MagicThing
            with="Kinda long"
            attrs={{ a: 1, b: 2 }}
            that={otherArg}
            keep="going"
          />
        );
}

Expected behavior:

Do not add extra two spaces of indent.

Comments

First let me say I’ve used Prettier for a few weeks now and really enjoy it. This has been my only hang-up after weeks of use. It’s forced me to rewrite ternaries to avoid this ascii art indentation.

The previous issue was locked due to inactivity, but I think it deserves a second look.

Some obvious reasons off the top of my head:

• Breaks expected indent with eslint indent rule
• Inconsistent with other indentation rules used by Prettier
• Adds two-space indent even when using non-2-space indentation
• Adds mixed spaces and tabs indentation when using tabs
• Reduces readability for me, especially with code folding

[duailibe]

Hi!

Breaks expected indent with eslint indent rule

We don’t try to conform to eslint rules.

Inconsistent with other indentation rules used by Prettier

Can you be more specific?

Adds two-space indent even when using non-2-space indentation

Yes, we’ll align the whole “alternate” (the node after :). In your case, before otherArg there are two characters (: and a space) and so we’ll add 2 spaces to align everything correctly.

Adds mixed spaces and tabs indentation when using tabs

This isn’t something we’re really concerned since we still haven’t seen a valid argument against it.

Reduces readability for me, especially with code folding

I think the Prettier version is much more readable because of indentation.

[thorn0]

Adds mixed spaces and tabs indentation when using tabs

This isn’t something we’re really concerned since we still haven’t seen a valid argument against it.

I don’t like it because it creates strange-looking unbalanced indentation sometimes. Example:

Prettier’s current output (tabs replaced with 4 spaces because otherwise GitHub shows them as 8 spaces):

const template =
    '<div>' +
    (isToolboxVisible
        ? '<div class="grid-toolbox with-top-line">' +
          (showCloseButton
                ? '<div class="toolbox-group pull-right"><a id="close-btn">Close</a></div>'
                : '') +
          (showApplyButton
                ? '<div class="toolbox-group pull-right"><a id="apply-btn">Apply</a></div>'
                : '') +
          '</div>'
        : '') +
    '</div>';

Expected:

const template =
    '<div>' +
    (isToolboxVisible
        ? '<div class="grid-toolbox with-top-line">' +
            (showCloseButton
                ? '<div class="toolbox-group pull-right"><a id="close-btn">Close</a></div>'
                : '') +
            (showApplyButton
                ? '<div class="toolbox-group pull-right"><a id="apply-btn">Apply</a></div>'
                : '') +
            '</div>'
        : '') +
    '</div>';