How to force closing HTML tags on a new line?

Question

In VS Code, I use Beautify extensively. But it unnerves me that closing tags always wrap on the same line as "floating" text, or self-closing tags. For instance, before Beautify :

<div class="wrap">
    <img src="/wp-content/uploads/2018/08/image.png">
</div>
<div class="wrap">This is just some text
    <strong>but it needs to be emphasized</strong>! And then some...
</div>

And after Beautify :

<div class="wrap">
    <img src="/wp-content/uploads/2018/08/image.png"> </div>
<div class="wrap">This is just some text
    <strong>but it needs to be emphasized</strong>! And then some... </div>

Is there a setting, or another extension that could help get the code closer to what it looks like in the first example, or am I just doing things wrong ?

It doesn't matter much most of the time, other than being a bit ugly to my taste, but yesterday I saw that it actually created problems with Wordpress, I just can't use Beautify anymore, it risks breaking the formatting.

Answer 1

There isn't an option to force the end tags to new lines.

One setting that helps is preserve_newlines. Enabling that should keep your tags from getting pulled back to the same line if you have them on their own line.

Version 1.8.1 of js-beautify (the library underlying Beautify for VSCode) improves the behavior in this area, but still doesn't have an option to force the end tags to new lines.

Several issues have been filed around this, including #1468 and #1413. PRs are always welcome.