如何使用 VSCode Prettier 防止每个 html 元素结束标记换行？

Question

This what I currently have on my Editor. This is actually a laravel blade, so the filename is page.blade.php . However, I added these on the files.associate ;

"*.blade.php":"html"

<nav
    class="navbar navbar-standard navbar-expand-lg fixed-top navbar-dark navbar-theme"
>
    <div class="container">
        <a class="navbar-brand" href="../index.html"
            ><span class="text-white">{{ config("app.name") }}</span></a
        >
        <button
            class="navbar-toggler collapsed"
            type="button"
            data-toggle="collapse"
            data-target="#navbarStandard"
            aria-controls="navbarStandard"
            aria-expanded="false"
            aria-label="Toggle navigation"
        >
            <span class="navbar-toggler-icon"></span>
        </button>
    </div>
</nav>

So if you notice on the snippet, the > is always breaking the line and it's not good. especially on the </a> tag. I tried editing the HTML>Format: Wrapp Attributes , but it's not working, see picture attached:

Now this is what I want.

<nav class="navbar navbar-standard navbar-expand-lg fixed-top navbar-dark navbar-theme">
    <div class="container">
        <a class="navbar-brand" href="../index.html">
            <span class="text-white">Logo</span>
        </a>
        <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarStandard" aria-controls="navbarStandard" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
    </div>
</nav>

Answer 1

Just click on Right bottom plain text, it will open a dialog box type html and Select HTML. see Picture 1.

Then right click and select format document. It will format file like you want. See Picture 2.