How to prevent a line break to every html element end tag using VSCode Prettier?

1.1k views Asked by At

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:

vs-code settings

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>
1

There are 1 answers

0
hami On

Just click on Right bottom plain text, it will open a dialog box type html and SELECT html

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

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.