Prettier如何配置保留HTML元素间的空行间距

Prettier是强约定的格式化工具，核心设计原则是减少自定义格式配置、统一团队代码风格，没有提供完全保留所有自定义HTML空行的配置项。
它默认对HTML空行做归一化处理：连续2个及以上的空行会被压缩为1个，起始标签之后、结束标签之前的多余空行会被自动移除，仅保留同级块元素之间的1个空行间距，和你给出的格式化示例表现完全一致。

相关可调整配置 #

目前和HTML空白处理相关的官方配置项只有htmlWhitespaceSensitivity，在.prettierrc中配置即可生效：

{
  "htmlWhitespaceSensitivity": "ignore"
}

该配置有3个可选值，对应效果分别为：

• css：默认值，按照元素CSS默认display属性判断空白是否影响页面渲染，按默认规则压缩空行
• strict：严格遵循空白影响渲染的规则处理，空行压缩逻辑更严格
• ignore：判定所有HTML空白不影响最终渲染效果，空行处理相对宽松，但依然会压缩连续多空行、移除标签首尾的多余空行，无法做到完全保留自定义空行的位置和数量。

指定位置空行保留方法 #

如果必须在特定位置保留自定义空行，可以使用Prettier自带的区域忽略注释，在需要留空的位置插入注释对，让Prettier跳过对应区域的格式化处理：

<template>
  <form>
    <!-- prettier-ignore-start -->

    <!-- prettier-ignore-end -->
    <div>First block</div>

    <div>Second block</div>
    <!-- prettier-ignore-start -->
    
    <!-- prettier-ignore-end -->
  </form>
</template>

注意：被prettier-ignore-start和prettier-ignore-end包裹的内容会完全跳过Prettier格式化，需要手动维护这部分的代码格式。

如果只是需要给同级逻辑代码块做分组留空，只需要在两个块之间保留1个空行即可，Prettier不会移除这类单空行，不需要额外配置。

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