Vetur + Prettier HTML formatter

Question

I'm using Quasar with Vue3 and the vs code extension Vetur and Prettier to help me keep the code well formatted.

I see something I don't really like and I would like to fix it in the configuration, but I cannot find the solution, so I hope you can help me.

The current HTML formatter generate this code:

<q-btn
   unelevated
   color="secondary"
   type="submit"
   class="full-width"
   >Sign in</q-btn
>

I don't really like to see this: >Text</close, instead, I would like it to be like this:

<q-btn
   unelevated
   color="secondary"
   type="submit"
   class="full-width"
>
   Sign in
</q-btn>

So that the element and the text are on different lines.

Can you please drive me to the solution? Thanks

Answer 1

I believe it is not possible to do what you want because prettier (or even eslint, volar) cannot determine whether now or in the future an element will be able to parent another element if you having a Node but not a Text inside such formatting changes a lot of things:

When you enter a newline then \n will definitely appear because it is Text so by default it is rendered as Node<Text> which doesn't sound bad but look at the example below:

app.appendChild(document.createElement('div'))
app2.appendChild(document.createElement('div'))


console.log('child of default: %s', app.childNodes.length)
console.log('child of you format: %s', app2.childNodes.length)

<div id="app"></div>
<div id="app2">
</div>

you will find that adding anything in front of it destroys the expected DOM structure. it is so awful

to fix it you can add space after > of the opening tag because space or space - new line it is just 1 Node<Text> only nothing is affected