How to prevent Prettier putting a full stop on a new line after a link
Tags: webdev, prettier
Published: 2024-05-13 14:14:44

Do you use [Prettier](https://prettier.io)? Have your configuration settings caused weird HTML rendering issues by adding extra whitespace where you didn't want it? Perhaps after an anchor link at the end of a paragraph? Me, too. Here's what's happening and how you **might** be able to fix it.

## The HTML whitespace problem

Formatting code using Prettier is often a frustrating battle. Standard configuration options that make sense for the majority of code formatting could cause unexpected problems in the rendering of whitespace in HTML.

Say I want to render a link followed by a full stop at the end of a paragraph, like this:

```html
<p>p4nth3rworld is a multiplayer text-based game powered by a live coding stream at <a href="https://twitch.tv/whitep4nth3r/chat">twitch.tv/whitep4nth3r</a>.</p>
```

A certain Prettier setting might auto-format the code to look like this. You'll notice that the full stop has been placed on a new line after the closing anchor tag.

```html
<p>
  p4nth3rworld is a multiplayer text-based game powered by a live coding stream at 
  <a href="https://twitch.tv/whitep4nth3r/chat">
    twitch.tv/whitep4nth3r
  </a>
  .
</p>
```

This renders undesirable whitespace in the HTML in the browser, like this:

![A render of the previously described HTML code, showing a space added at the end of the anchor link text, creating a gap between the end of the link and the full stop.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wzbc09i32mkw5bswyydc.png)

This happens because whitespace is treated literally in inline HTML elements: `1<b> 2 </b>3` will output a different result to `1<b>2</b>3`. Given anchor tags are `display: inline` by default, any whitespace in and around these elements will not be ignored and will be rendered literally.

To fix this, you might need to configure Prettier's [HTML Whitespace Sensitivity](https://prettier.io/docs/en/options.html#html-whitespace-sensitivity) option — and you might need to change some other options, too.

## Configure Prettier HTML Whitespace Sensitivity

Prettier allows you to specify the global whitespace sensitivity for HTML using the following options:

| htmlWhitespaceSensitivity setting | Description                                                                   |
|-----------------------------------|-------------------------------------------------------------------------------|
| "css"                             | Respect the default value of CSS display property.                            |
| "strict"                          | Whitespace (or the lack of it) around all tags is considered   significant.   |
| "ignore"                          | Whitespace (or the lack of it) around all tags is considered   insignificant. |

The default option for Prettier's whitespace sensitivity setting is `"css"`, which **should** mean that full stops after a closing anchor tag don't wrap onto a new line and cause whitespace issues (given `<a>` elements are inline elements). However, this wasn't the case with my code. It **seemed** like I needed to use the strict option, which formatted the code like this.

```html
<p>
  p4nth3rworld is a multiplayer text-based game powered by a live coding stream at
<a href="https://twitch.tv/whitep4nth3r/chat"
   >twitch.tv/whitep4nth3r</a
  >.
</p>
```

Now, despite the whitespace problem being solved in the resulting HTML in the browser, this presentation still wasn't ideal for me given the the closing angled brackets were put onto a new line. This was the case _even though I specified that brackets should stay on the same line_ using the [Prettier Bracket Line configuration](https://prettier.io/docs/en/options.html#bracket-line). As it turns out, the length of my paragraph and anchor link created a bit of an edge case, and I needed to increase the printWidth setting.

## Configure Prettier Print Width

[Prettier Print Width](https://prettier.io/docs/en/options.html#print-width) specifies the line length at which your IDE will wrap text. The Prettier default is 80 characters. By arbitrarily changing `prettier.printWidth` to **90** in my configuration settings, the HTML was more readable in combination with the whitespace sensitivity setting.

It's worth mentioning at this point that by increasing the `printWidth`, the default `htmlWhitespaceSensitivity: "css"` produced the desired formatting results. I decided to leave the whitespace setting as `strict` to remind me of this pain in the future.

![Side by side view of the new prettier settings and the correctly formatted HTML in VS Code.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b6iaqtct3q29rzk778gm.png)

Here are the two settings I'm currently using:

```json
{
  /* in pretter config file */
  htmlWhitespaceSensitivity: "strict",
  printWidth: 90

  /* in VS Code settings */
  "prettier.htmlWhitespaceSensitivity": "strict",
  "prettier.printWidth": 90
}
```

## Ugh, what a minefield

Should I have needed to change the `printWidth` in order to respect the `bracketSameLine` setting for this particular block of code? Probably not. Alas, Prettier states that it's an _opinionated_ code formatting tool. Make of that what you will.