关于html标签换行格式问题

还原问题

在配置 eslint 和 prettier 规范项目时，总是会遇到下面的情况：

源代码：

<span class="aaa"><span>123</span></span>

假如这块代码触发了 prettier 的换行规则，理想的排版应该是：

<span class="aaa">
  <span>123</span>
</span>

但是实际上是

<span class="aaa"
  ><span>123</span></span
>

规则分析

为什么会存在把 > 格式化到下一行的情况，这里涉及到一个“行内\块级元素”的规则。

由于 span 便签是行内标签，起初我们只添加的文本 ”123“ ，为了保持它行内的属性，prettier在执行格式化时，不会主动添加换行符，因为换行符在渲染 html 时会被渲染出来，实际上我们没有主动添加，为了严格保持内容一致，所以采用了隔断标签换行的策略。

我们给 class="aaa"> 后面手动回车一下，就能发现，prettier在执行换行格式化时，能达到我们的预期，这是因为我们告诉了它，这里可以换行，我的内容包含换行符，不是纯粹的行内文字。

在框架组件中，也会存在这个问题，因为 prettier 并不知道组件是什么类型的节点，所以默认安装行内的规则执行了格式化。