configure Prettier to allow whitespace except within anchor tags

user_1166285 0
Viewed 554

I have two scenarios that I can't figure out Prettier configuration settings:

Currently, I set "htmlWhitespaceSensitivity": "ignore" to turn this:

<div
>stuff<
/div>

into this:

<div>
stuff
</div>

but this prevents be from assigning proper whitespace with <a> tags:

<a>hello</a>. gets turned into this, with unwanted whitespace:

<a>
   hello
</a>
.

Is there any Prettier configuration to get the best of both worlds?

prettier html
2 Answers

You can add this comment before <a> tag

<!-- prettier-ignore -->
<a>foo</a>

user_106954200

There isn't an actual setting for this. It's more about how Prettier formats lines of code depending on their length and the content in that line of code

 <a href="www.google.com" target="_blank">Google In New Tab</a>

If you have the above code, when you save it, Prettier will format it like this:

 <a href="www.google.com" target="_blank">
   Google In New Tab
 </a>

If there is not extra attributes for the anchor tag, Prettier will keep it as it is:

<a>Google In New Tab</a>

This stays the same before and after saving with Prettier enabled

So best is to add the needed attributes to the anchor tag, such as the 'target' and 'href' Prettier should format it for you properly

You can also look at the Print Width setting in the Prettier Settings to make the code fit in a certain line width

user_128158820
Related