Prettier - prevent HTML closing tag > being placed on a new line?

Problem

Our project uses Prettier to format our code. We have Angular components that have HTML code in them.

Prettier formats the HTML code in the Angular component and places the closing tag > on a new line. This is not what we want.

<label class="mb-10 flex">
  <span>
    I accept the
    <a class="underline" routerLink="/tnc"
      >Our terms and conditions</a
    >
  </span>
</label>

The reason is because Prettier is trying to preserve the whitespace between the a tag and the closing tag >. Thus, it places text like >Our terms and conditions< so that the whitespace is preserved.

See the explanation from the Prettier documentation:

• https://github.com/prettier/prettier/issues/9381#issuecomment-707156908
• https://prettier.io/blog/2018/11/07/1.15.0.html#whitespace-sensitive-formatting

Solution

Since we are not interested in preserving the whitespace between HTML tag, we can tell Prettier to ignore the whitespace sensitivity by updating Prettier configuration file with htmlWhitespaceSensitivity option to ignore.

module.exports = {
  bracketSameLine: true,
  trailingComma: 'all',
  tabWidth: 2,
  semi: true,
  singleQuote: true,
+  htmlWhitespaceSensitivity: 'ignore',
};

Now run prettier again for all html files, the closing tag > should be on the same line as the last attribute.

npx prettier "**/*.html" --write --ignore-unknown

<label class="mb-10 flex">
  <span>
    I accept the
    <a class="underline" routerLink="/tnc">
      Our terms and conditions
    </a>
  </span>
</label>

References

• https://stackoverflow.com/a/63654373
• https://stackoverflow.com/a/64329629