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

Question

I'm trying to achieve the following output with Prettier when writing plain HTML:

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

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

Note how the closing div tag on a div with multiple attributes is on a separate line (and all container on one line for a div with a single / no attributes).

I believe --jsx-bracket-same-line set to false achieves the desired outcome in JSX, but I'm trying to achieve this in regular HTML.

I am open to using other plugins or ESLint settings with Prettier.

Answer 1

If you only have HTML files, then you can change the default parser to lwc instead of HTML . This change will turn all parsers to lwc

{
    "parser": "lwc"
}

In the case where you have multiple different filetypes, better to only apply for *.html files then put the following into your .prettierrc.

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