Prettier 删除了 html 标签和文本之间的 space

Question

我已经使用 cli 安装了一个 vue 项目，配置了 eslint 和 prettier，但是 prettier 做了我不想要的事情。我想要一个 |在两个标签之间，但是当我保存时，prettier 删除了标签和 | 之间的 space。我怎样才能解决这个问题。这是代码：注意 |在第二行，space 被 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

如果您遇到的问题是 Prettier 省略了白色 space 导致渲染后的 HTML 缺少 space:

List| Create

然后您可以将 | 包装在 <span> 标记中，这将在呈现时自动在元素之间添加 space。 Prettier 不应该在包裹后抱怨它。

<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 />

您可能还想查看 HTML Whitespace Sensitivity setting in your Prettier config, and their writeup on whitespace-sensitive formatting in HTML。

Prettier 删除了 html 标签和文本之间的 space

Prettier removes the space between html tag and text

vue.js

prettier