Extra spaces in html tagged templates

Prettier 1.19.1 Playground link

--parser babel

Input:

const label = html`<span>${text}</span>`;

Output:

const label = html`
  <span>${text}</span>
`;

Expected behavior:

Adding whitespace inside the tagged template literal affects the output. To avoid the spaces around my components, the only way right now is to add ignore comments.

[saschanaz]

That doesn’t even need an option then! Sounds good to me 👍

[DiogoDoreto]

@saschanaz I’d vote to keep it simple: if the user tries to have it as one-liner and the line is not too long, avoid adding the line breaks. Otherwise leave the default formatting behavior.

This will create an incentive to the user to simplify their content, possibly extracting it into simple variables that would be easier to read.

It then will behave in a similar way as this example:

// the line below is left as-is
const obj = [{ test: true }];

// the code below will be reformatted with line breaks
// input:
const obj = [{ 
  test: true }];
// output:
const obj = [
  {
    test: true
  }
];

What do you think?