VSCode Prettier插件如何保留自定义垂直间距？

我认可Prettier的大多数特性，但它会清除我特意设置的垂直间距，示例如下：

原代码：

<main>

<div>

    <ul>
        <li></li>
        <li></li>
    </ul>

</div>
</main>

格式化后代码：

<main>
    <div>
        <ul>
            <li></li>
            <li></li>
        </ul>
    </div>
</main>

额外的垂直间距能帮助我整理代码、快速定位内容。我查看了Prettier设置但未找到相关选项，请问是否有方法让Prettier保留我设置的垂直间距？

解决方案 #

Prettier的核心设计目标是统一代码格式，默认会自动合并多余的垂直空行，目前没有全局配置项可以让它完全保留自定义的所有垂直间距，但可以通过以下方式局部控制：

• 使用// prettier-ignore注释：在需要保留空行的位置上方添加该注释，让Prettier跳过对该行及后续相关空行的格式化。示例：

<main>
// prettier-ignore

<div>
// prettier-ignore

    <ul>
        <li></li>
        <li></li>
    </ul>
// prettier-ignore

</div>
</main>

这样格式化后，注释下方的空行会被保留。

• 利用Prettier对特定元素的默认空行规则：部分HTML元素（如<body>、<section>等）Prettier会自动保留前后空行，但这仅针对特定元素，无法满足自定义任意空行的需求。

需要注意的是，这种局部忽略的方式会打破Prettier的格式统一性，建议仅在确实需要区分代码块的场景下使用。

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