Good formatting method recommendation for this tool?

[kathesch]

Hey, quite new to frontend development, so this might have a quite obvious solution (like some prettier configuration or something), but the default behavior of vscode's html formatter leads to something like this:

<div style="display: grid; grid-template: 1fr / 1fr">
        <style>
            me {
                height: 100px;
            }

            me div {
                background-color: blue;
            }

            me div[n1] {
                background-color: red;
            }
        </style>
        <div>test2</div>
        <div n1>test1</div>
    </div>

This is a little obtrusive compared to tailwind which integrates with html formatters maybe a little better. I was wondering if anyone out there had just found a formatter (ideally with a good out of the box configuration) that simply works well with this. About all I got is adding the following to setting.json...and just kind of being careful that it is styled well. Obviously, just a small QoL, but it'd be nice if there was a ready to go formatting solution that worked with this project.

"html.format.contentUnformatted": "style",

[gnat]

Welcome!

Code style is highly project/personal preference but I usually avoid auto-formatters because they often don't work with various template systems (often end up being more trouble than they are worth. ex: making a mess, excessive whitespace or opinionated rules, slowing down velocity).

That said css-scope-inline is pretty dang flexible to whatever you enjoy writing. For a more "tailwind like" DX, I'd personally write the above like this:

<div>
    <style>
        me { display: grid; grid-template: 1fr / 1fr; height: 100px; }
        me div { background-color: blue; }
        me div[n1] { background-color: red; }
    </style>
    <div>test2</div>
    <div n1>test1</div>
</div>

As the project creator, thought I'd come in right away with the YAGNI take..

That said, if anyone else has discovered tools/patterns to add to this discussion, feel free! Always on the lookout for net-positive workflow additions that don't blow up complexity / slow down velocity.