Weird behavior

Prettier 1.19.1 Playground link

--parser vue
--print-width 40

Input:

<template>
	<img :src="`../../../../../../../..image/${variable}.png`"/>
</template>

Output:

<template>
  <img
    :src="
      `../../../../../../../..image/${variable}.png`
    "
  />
</template>

Expected behavior:

<template>
  <img
    :src=
      "`../../../../../../../..image/${variable}.png`"
  />
</template>

or anything alike, but do not put the double quote alone on a single line.

Not sure if there is some kind of flag to set to prevent that. 😅

[thorn0]

closed by https://github.com/prettier/prettier/pull/7479

[kissu]

But I think put single TemplateLiteral and StringLiteral on the same line with attribute more readable.

Not sure of what those actually are. 😅

Output:

<template>
  <img
    :src="`../../../../../../../..image/${variable}.png`"
  />
</template>

This one is actually great tho because it keeps the double quotes on the same line and splits the beginning and ending of the tags on a new line, yes! 😁 And it’s super readable IMO. 👌🏻

The opening double quote position can be whatever tbh, but having the closing one on a new line, alone, is really ugly and actually breaks Vetur extension too…