如何配置VS Code中Prettier避免格式化HTML时生成过多空行？

1. 两种格式的可读性对比 #

你期望的紧凑换行格式确实可读性更优——它贴合文本内容的自然换行逻辑，不会用大量空行割裂段落连贯性，对于包含多段文本的HTML元素（比如<p>、<div>），这种格式能让代码结构和内容语义更匹配，阅读时不用跳过冗余空行，效率更高。

2. 是否需要在意空行问题 #

这取决于场景：

• 个人项目：完全可以按自己的阅读习惯调整，没必要勉强适应不合理的格式
• 团队协作：先和团队对齐规范——Prettier的核心是统一格式减少争论，但如果多数人觉得过多空行影响效率，调整配置才是更合理的选择，不用硬忍

3. 配置Prettier符合需求 #

可以通过调整Prettier的核心配置来解决，关键选项如下：

核心配置项 #

在项目的.prettierrc（JSON格式）或prettier.config.js（JS格式）中添加以下配置：

JSON格式示例（.prettierrc）

{
  "printWidth": 120,
  "htmlWhitespaceSensitivity": "css"
}

JS格式示例（prettier.config.js）

module.exports = {
  printWidth: 120,
  htmlWhitespaceSensitivity: "css"
};

• printWidth：调整换行触发的字符长度阈值，默认80，设为更大的值（比如120）可以减少不必要的换行
• htmlWhitespaceSensitivity：设为css时，Prettier会遵循CSS的空白处理规则，避免生成多余空行；如果需要更宽松的处理，也可以设为ignore

局部跳过格式化 #

如果某些特定HTML区块想保留手动设置的格式，可以用注释跳过Prettier处理：

<!-- prettier-ignore -->
<div class="content">
  手动设置的文本
  换行和空行
  会完全保留
</div>

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