hey,

so when using prettier for tagged template literals it becomes kind of very verbose. e.g. it puts every ${ and function() on its own line. I would like to get easily readable and "short" js/html code - and that in this case unneeded verbosity sort of defeats the purpose.

Don't get me wrong for javascript it completely makes sense... but the js in a html tagged template literal is usually pretty limited. e.g. you will not define full functions there.

So this is basically a discussion to see if we can get a more "suitable" default for js in html tagged template literals. It does not need to be completely the same as Expected behavior but not putting each ${ followed by a function onto a seprate line would already help tremendously.

Prettier 1.15.3
Playground link

--parser babylon

Input:

const bars = ['end of the earth', 'drunken sailors'];

function HelloWorld() {
  return html`
    <h3>Bar List</h3>
    ${bars.map(bar => html`
       <p>${bar}</p>
    `)}
  `;
}

Output:

const bars = ["end of the earth", "drunken sailors"];

function HelloWorld() {
  return html`
    <h3>Bar List</h3>
    ${
      bars.map(
        bar => html`
          <p>${bar}</p>
        `
      )
    }
  `;
}

Expected behavior:

const bars = ["end of the earth", "drunken sailors"];

function HelloWorld() {
  return html`
    <h3>Bar List</h3>
    ${bars.map(bar => html`
       <p>${bar}</p>
    `)}
  `;
}

An alternative possible outcome (okish):

const bars = ["end of the earth", "drunken sailors"];

function HelloWorld() {
  return html`
    <h3>Bar List</h3>
    ${bars.map(
       bar => html`
         <p>${bar}</p>
       `
    )}
  `;
}