[Vuejs]-Prettier force white space before and after every balise in HTML

0๐Ÿ‘

โœ…

I added already a comment, but I want to also post it as an answer here, because someone else might also have the same question at some point.

In the prettier options you can configure the htmlWhitespaceSensitivity which can have different values. This setting is also used in Vue templates to format the HTML.

The htmlWhitespaceSensitivity option can have three values:

strict

Strict sensitivity makes sure, that the whitespace characters within the element are not changed. (If this looks good, is another question)

<h2
  >I am a too long title and i proc a error</h2
>

ignore

Prettier would add whitespace if it is needed for the formatting.

<h2>
  I am a too long title and i proc a error
</h2>

css

Respect the default whitespace character handling of html elements.

<h2>
  I am a too long title and i proc a error
</h2>

<!-- inside a pre element: -->
<pre>
I am a too long title and i proc a error</pre
>

Leave a comment