Vue中使用Prettier如何避免HTML闭合标签被强制换行

我完全懂你这种头疼的感觉——明明写的是一行连贯的文本，Prettier格式化后却把<b>的闭合标签或者周边的标点拆成了换行，破坏了原本的排版逻辑。咱们先理清楚问题的来龙去脉：

原始Vue SFC代码 #

<template>
<div>
  <span if=false>
   Feedback for the event was already sent before.
    <span v-else>
      Feedback for the event, <b>{{ eventName }}</b>, was already sent before.
      <br>
      You can still leave us feedback at
    </span>
    <a href="mailto:email">example.com</a>.
  </span>
</div>
</template>

第一次格式化后的异常结果 #

用Prettier处理后，<b>的闭合标签被硬生生拆成了两行，看起来特别别扭：

<template>
  <div>
    <span if="false">
      Feedback for the event was already sent before.
      <span v-else>
        Feedback for the event, <b>{{ eventName }}</b
        >, was already sent before.
        <br />
        You can still leave us feedback at
      </span>
      <a href="mailto:email">example.com</a>.
    </span>
  </div>
</template>

调整html-whitespace-sensitivity后的问题 #

本来以为调整html-whitespace-sensitivity配置能解决，但结果反而更糟——连逗号、句号都被拆成了单独的行：

<template>
  <div>
    <span if="false">
      Feedback for the event was already sent before.
      <span v-else>
        Feedback for the event,
        <b>{{ eventName }}</b>
        , was already sent before.
        <br />
        You can still leave us feedback at
      </span>
      <a href="mailto:email">example.com</a>
      .
    </span>
  </div>
</template>

可行的解决方法 #

针对这个问题，我整理了两种实用的解决思路：

1. 使用Prettier忽略注释

如果你只想让这段代码完全保留原样，最直接的方式就是在需要保护的元素前加上<!-- prettier-ignore -->注释，告诉Prettier跳过这个区域的格式化：

<template>
<div>
  <span if=false>
   Feedback for the event was already sent before.
    <!-- prettier-ignore -->
    <span v-else>
      Feedback for the event, <b>{{ eventName }}</b>, was already sent before.
      <br>
      You can still leave us feedback at
    </span>
    <a href="mailto:email">example.com</a>.
  </span>
</div>
</template>

2. 用内联标签包裹连贯文本

如果不想用注释，也可以用额外的<span>标签把需要保持连贯的文本包裹成一个整体，引导Prettier把它识别为一个内联内容块，避免随意拆分：

<template>
<div>
  <span if=false>
   Feedback for the event was already sent before.
    <span v-else>
      <span>Feedback for the event, <b>{{ eventName }}</b>, was already sent before.</span>
      <br>
      You can still leave us feedback at
    </span>
    <a href="mailto:email">example.com</a>.
  </span>
</div>
</template>

总的来说，第一种方法更直接，能100%保留你的原始写法；第二种方法则更符合代码结构规范，不会引入注释。你可以根据自己的需求选择。

备注：内容来源于stack exchange，提问作者Jaroslav Klimčík