Prettier has an option called htmlWhitespaceSensitivity (see [0]). Currently it is set to ignore, which means Prettier will be allowed to add line breaks and whitespace to any HTML element. It turns out this is not ideal for some elements such as <a> and <span> where the whitespace is visible at rendering.
We should change the option to css which takes into account the kind of element: for inline elements, whitespace is significant, for block elements it isn't.
We have to be aware that it will produce the following kind of results:
<!-- original -->
<a
v-bind:href="file_url"
class="document-folder-subitem-link"
data-test="document-folder-subitem-link"
draggable="false"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod<i class="fas fa-link document-action-icon"></i>
</a>
<!-- htmlWhitespaceSensitivity = ignore -->
<a
v-bind:href="file_url"
class="document-folder-subitem-link"
data-test="document-folder-subitem-link"
draggable="false"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
<i class="fas fa-link document-action-icon"></i>
</a>
<!-- htmlWhitespaceSensitivity = css -->
<a
v-bind:href="file_url"
class="document-folder-subitem-link"
data-test="document-folder-subitem-link"
draggable="false"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod<i
class="fas fa-link document-action-icon"
></i>
</a>
Testing the change produced only 31 fixable errors throughout the codebase. It does not modify existing instances but will affect new templates.
[0] https://prettier.io/blog/2018/11/07/1.15.0.html#whitespace-sensitive-formatting