如何使用 Prettier 在新行上获取结束 HTML 标记？答案

【问题标题】：How can I use Prettier to get closing HTML tags on a new line?如何使用 Prettier 在新行上获取结束 HTML 标记？
【发布时间】：2023-10-03 08:15:02
【问题描述】：

在编写纯 HTML 时，我正在尝试使用 Prettier 实现以下输出：

<div class="foo"></div>

<div
  class="foo"
  id="bar"
>
</div>

请注意，具有多个属性的 div 上的结束 div 标记如何位于单独的一行（对于具有单个/无属性的 div，所有容器都位于一行）。

我相信 --jsx-bracket-same-line 设置为 false 可以在 JSX 中实现预期的结果，但我正在尝试在常规 HTML 中实现这一目标。

我愿意在 Prettier 中使用其他插件或 ESLint 设置。

【问题讨论】：

【解决方案1】：

如果您只有 HTML 文件，则可以将默认解析器更改为 lwc 而不是 HTML。此更改会将所有解析器转换为 lwc

{
    "parser": "lwc"
}

如果您有多种不同的文件类型，最好只申请*.html文件，然后将以下内容放入您的.prettierrc.

{
  "overrides": [{ "files": "*.html", "options": { "parser": "lwc" } }]
}

【讨论】：