'configure Prettier to allow whitespace except within anchor tags

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?

htmlprettier


Solution 1:[1]

You can add this comment before <a> tag

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

Solution 2:[2]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 D?ng Gramer
Solution 2 Ruben Verster

Related Questions