Ugly formatting html in .vue file

I just updated prettier in my vue project and now in a SFC .vue file it’s formatting this code:

<template>
  <router-link
    class="margin-right-medium"
    to="/admin/ads/list">Lista</router-link>
</template>

into this:

<template>
  <router-link class="margin-right-medium" to="/admin/ads/list"
    >Lista</router-link
  >
</template>

this is very ugly while I expected something like this:

<template>
  <router-link
    class="margin-right-medium"
    to="/admin/ads/list">
    Lista
  </router-link>
</template>

[lydell]

Prettier isn’t composed of rules in that way, it’s more of a all-or-nothing type of thing. Note that if you manually add some spaces/newlines in certain places Prettier will preserve (some) of them (because it can’t know what is safe to do). For example:

Prettier 1.16.4 Playground link

--parser vue

Input:

<template>
  <router-link
    class="margin-right-medium"
    to="/admin/ads/list">
    Lista
  </router-link>
</template>

Output:

<template>
  <router-link class="margin-right-medium" to="/admin/ads/list">
    Lista
  </router-link>
</template>

But I do agree that splitting the end tag (</router-link) across several lines is a little bit unusual. It’s no bug though – Prettier has always done so for HTML. Maybe @ikatyang knows where this comes from?

[axit-joost]

Hi @oswaldofreitas,

I got the same issue today, with the </closing-tags> that the closing > was on a new line.

I ended up creating a .prettierrc with that htmlWhitespaceSensitivity set to ignore. That seemed to be picked up by my eslint + prettier setup and formatted everything correctly.

So at least for my, @duailibe 's suggestion he made here worked for me. I didn’t even bother with adding parser: vue anywhere.