如何配置Prettier实现固定的大间距HTML格式化效果？

Prettier对HTML元素的换行/间距差异，主要由几个核心配置项控制，要实现你偏好的隔行排列效果，可按以下方式调整：

关键配置项调整 #

• printWidth：若右侧文件代码整体偏短，Prettier可能会压缩元素间距。可将该值设为80（默认值）或更小，强制Prettier在块级元素间换行。
• htmlWhitespaceSensitivity：这是影响空白处理的核心配置，可选值包括css（默认）、strict、ignore：
  • 设置为strict时，Prettier会严格为块级元素（如div）添加分隔行，确保元素间有空行间隔；
  • 默认的css模式会根据CSS空白规则判断是否保留换行，易因文件内容差异出现格式化不一致。
• singleAttributePerLine：开启该配置（设为true）会让元素的每个属性单独占一行，间接强化div元素之间的分隔效果。

配置文件示例 #

在项目根目录的.prettierrc或.prettierrc.json中添加如下配置：

{
  "printWidth": 80,
  "htmlWhitespaceSensitivity": "strict",
  "singleAttributePerLine": true
}

额外排查点 #

• 检查文件内是否存在<!-- prettier-ignore -->注释，这类注释会局部禁用Prettier规则，导致格式化差异；
• 若div内部内容长度差异大，也可能影响换行逻辑，上述配置可统一这类场景的格式化效果。

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