-
Notifications
You must be signed in to change notification settings - Fork 14
-
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",
Beta Was this translation helpful? Give feedback.
All reactions
Replies: 1 comment
-
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.
Beta Was this translation helpful? Give feedback.