Simple expressions in template literals

[thorn0]

Prettier 1.8.2
Playground link

Input:

const a = `Lorem ipsum dolor sit amet, consectetur ${bar} adipiscing ${foo}. Sed tincidunt diam tortor.`;

Output:

const a = `Lorem ipsum dolor sit amet, consectetur ${bar} adipiscing ${
  foo
}. Sed tincidunt diam tortor.`;

Expected behavior:

Is the output indeed prettier than the input? To me, it looks simply strange. Why did foo get its own line while bar didn't? I'd love to have a switch to disable formatting like this. Having a line longer than print-width seems to be a lesser evil in this case. It should be okay though, even when the switch is on, to break lines when embedded expressions are more complex than foo or data.id.

[SimenB]

See #3299

[duailibe]

Thanks for the report! We have changed the behavior for identifiers, so it should stop breaking.

It will continue to break on member expressions (even a.b) until we find a good heuristic for when to break (or someone suggests one).

[thorn0]

That's great news. Thank you @duailibe. I'd vote for never breaking on member expressions if the left part is an identifier and the expression

1. uses dot (a.b), or
2. uses brackets with the property name being a number (a[1]), or
3. uses brackets with the property name being an identifier (a[i]).

Breaking on such simple expressions looks as unnatural as on identifiers.

[duailibe]

@thorn0 Thanks for the suggestion.

The thing about template literals is without breaking between { } we were printing:

const str1 = `text text text ${foo.
  bar} text text`;

const str2 = `text text text ${foo[
  bar
]} text text`;

because foo.bar will break regardless of being in a template literal expression.

Then we could special case printing those differently when inside a template literal.

[ikatyang]

Closing as duplicate of #3280 (comment) and OP's identifier issue was fixed in #3299, let's track the member expression issue in #3368 to avoid confusing.