如何使用Prettier在新行上关闭HTML标签？

Question

在编写纯HTML时，我试图通过Prettier实现以下输出：

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

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

请注意，具有多个属性的div上的结束div标签是如何在单独的一行上显示的（对于具有单个/无属性的div而言，一行上的所有容器都是如此）。

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

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

Answer 1

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

{
    "parser": "lwc"
}

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

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