Prettier removes the space between html tag and text

Question

I have installed a vue project using the cli, with eslint and prettier configured, however prettier does things I don't want. I want to have a | between the two tags, but when I save prettier removes the space between the tag and |. how can I fix this. here is the code: notice the | on line two, and the space before it is removed by prettier.

<div id="nav">
  <router-link :to="{name: 'event-list'}">List</router-link>|
  <router-link :to="{name: 'event-create'}">Create</router-link>
</div>
<router-view />

Answer 1

If the problem you're having is that Prettier omitting the whitespace is causing your rendered HTML to come out missing the space:

List| Create

Then you can wrap your | in a <span> tag, which will automatically add a space between the elements when rendered. Prettier shouldn't complain about it once it's wrapped.

<div id="nav">
  <router-link :to="{name: 'event-list'}">List</router-link>
  <span>|</span>
  <router-link :to="{name: 'event-create'}">Create</router-link>
</div>
<router-view />

You also may want to check out the HTML Whitespace Sensitivity setting in your Prettier config, and their writeup on whitespace-sensitive formatting in HTML.