如何阻止Prettier将单行HTML标签与内容拆分为多行？

问题场景 #

原始HTML代码：

<text x='90' y='170'>1</text>
<text x='190' y='170'>2</text>
<text x='290' y='170'>3</text>

经Prettier格式化后被拆分为多行：

<text x='90' y='170'>
  1
</text>
<text x='190' y='170'>
  2
</text>
<text x='290' y='170'>
  3
</text>

以下是几种阻止这种自动拆分的方法：

• 增大全局打印宽度
  在项目的Prettier配置文件（如.prettierrc、prettier.config.js）中调整printWidth参数，设置足够大的值让整行内容无需换行：

  {
    "printWidth": 120
  }
  

  该配置会全局生效，适合希望多数单行HTML保持紧凑格式的场景。

• 添加行内忽略注释
  给不需要格式化的单行标签添加<!-- prettier-ignore -->注释，让Prettier跳过该行处理：

  <!-- prettier-ignore -->
  <text x='90' y='170'>1</text>
  <!-- prettier-ignore -->
  <text x='190' y='170'>2</text>
  <!-- prettier-ignore -->
  <text x='290' y='170'>3</text>
  

  此方法精准控制单个或部分行的格式，不会影响全局配置。

• 调整HTML空格敏感度
  在Prettier配置中设置htmlWhitespaceSensitivity为ignore，降低对HTML文本空格的敏感度，减少不必要换行：

  {
    "htmlWhitespaceSensitivity": "ignore"
  }
  

  该配置会让Prettier更倾向于保持HTML内容的紧凑格式。

内容的提问来源于stack exchange，提问作者Eric Chow