如何配置Prettier实现所有HTML闭合标签统一换行？

你的需求是让无内部内容的多属性HTML标签，其闭合标签单独占一行，但Prettier原生配置没有直接对应的选项——它默认对空标签采用紧凑格式化逻辑。可以通过以下方案实现预期效果：

方案一：使用社区插件 #

安装专门处理空标签换行的Prettier插件，比如prettier-plugin-empty-html-tag-newline：

1. 安装插件

npm install --save-dev prettier-plugin-empty-html-tag-newline

2. 修改Prettier配置
   在你的Prettier配置文件（如.prettierrc或package.json的prettier字段）中添加插件：

{
  "bracketSameLine": true,
  "singleAttributePerLine": true,
  "printWidth": 80,
  "htmlWhitespaceSensitivity": "ignore",
  "plugins": ["prettier-plugin-empty-html-tag-newline"]
}

配置完成后，格式化空的多属性标签时，闭合标签会自动单独换行，完全符合你的期望结果。

方案二：临时 workaround（不推荐） #

如果不想引入插件，可在空标签内添加无内容的注释，触发Prettier的换行逻辑：

<div class="some-class" data-placeholder="some data"><!-- --></div>

但这种方法会残留注释，仅适合临时应急场景。

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