如何阻止Prettier强制<span>换行导致页面出现多余空格

问题场景 #

我有一段HTML代码：

<a class="logo" href="">Web<span class="logo-part">Studio</span></a>

经过Prettier格式化后变成了这样：

<a class="logo" href="">
  Web
  <span class="logo-part">Studio</span>
</a>

这导致页面渲染时，「Web」和「Studio」之间出现了多余的空格。我已经尝试将htmlWhitespaceSensitivity设置为strict和ignore，但都没有效果，想知道还有哪些配置可能导致这个问题。

当前使用的Prettier配置 #

{
  "arrowParens": "always",
  "bracketSpacing": true,
  "endOfLine": "lf",
  "htmlWhitespaceSensitivity": "ignore",
  "insertPragma": false,
  "singleAttributePerLine": false,
  "bracketSameLine": true,
  "jsxBracketSameLine": false,
  "jsxSingleQuote": false,
  "printWidth": 80,
  "proseWrap": "preserve",
  "quoteProps": "as-needed",
  "requirePragma": false,
  "semi": true,
  "singleQuote": false,
  "tabWidth": 2,
  "trailingComma": "es5",
  "useTabs": false,
  "embeddedLanguageFormatting": "auto",
  "vueIndentScriptAndStyle": false,
  "filepath": "d:\\test.html",
  "parser": "html"
}

可能的解决方向 #

• 调整printWidth阈值：当前设置的printWidth为80，Prettier可能判定原始代码行长度接近阈值而自动换行。尝试调大该值（比如设为120），看是否能避免换行。
• 排查编辑器插件冲突：如果用VS Code等编辑器的Prettier扩展，可能存在其他HTML格式化插件覆盖了Prettier的设置。暂时禁用其他格式化插件，仅保留Prettier测试。
• 尝试跳过特定代码格式化：如果需要强制保持代码不换行，可以在目标代码前添加<!-- prettier-ignore -->注释，让Prettier跳过这段代码：

  <!-- prettier-ignore -->
  <a class="logo" href="">Web<span class="logo-part">Studio</span></a>
  

• 升级Prettier版本：不同版本的Prettier对HTML内联元素的换行逻辑可能有差异，升级到最新稳定版或许能解决该问题。
• 检查parser的处理逻辑：当前使用html parser，部分场景下Prettier对inline元素的换行判断可能受上下文影响。可以尝试将代码包裹在<span>等内联容器中，测试是否改变格式化结果。

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