Prettier 去掉了 html 标签和文本之间的空格

【问题标题】：Prettier removes the space between html tag and textPrettier 去掉了 html 标签和文本之间的空格
【发布时间】：2020-05-22 20:00:22
【问题描述】：

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

【问题讨论】：

标签： vue.js prettier

【解决方案1】：

如果您遇到的问题是 Prettier 省略空格会导致渲染的 HTML 缺少空格：

List| Create

然后您可以将| 包装在<span> 标记中，这将在渲染时自动在元素之间添加一个空格。包装好后，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 />

您可能还想查看 Prettier 配置中的 HTML Whitespace Sensitivity 设置，以及他们的 writeup on whitespace-sensitive formatting in HTML。

【讨论】：

感谢您的回答。我添加了一个然而，在 | 之前，我需要知道如何摆脱那个更漂亮的配置