PrettierでHTMLの空要素に"/"が入る(VS Code使用)

Prettierを使ってHTMLをフォーマットすると空要素の最後に"/"が入る。

例

<meta charset="UTF-8">
<img src="xxx.jpg" alt="xxx">

が次に書くように、”/”が追加されてしまう。

<meta charset="UTF-8" />
<img src="xxx.jpg" alt="xxx" />

なぜHTMLの空要素の最後に"/"が入るのか？

Prettierのissue "Add an option to prefer void tags over self closing tags. #5246"、
ざっと読んだところこの仕様の理由は

• XML(XHTML)との互換性
• 読みやすさ
  などであり、設定で変更することはできない。

また別のissue"The formatting of self-closing tags in HTML5 #5641"によると、HTMLのフォーマッティングの開発時にそう決まったからだそう。
そして、オプションの理念ページには

Prettier has a few options because of history. But we won’t add more of them.

ざっくり訳すと「オプションの追加は現在受け付けていない」とのことで、この件に関わる仕様が変わる可能性は低いと思う。
詳しくはオプションの理念ページを読んでほしい。

とはいえ、issue#5246はまだcloseになっていないので、今後大きな動きがあれば変更されるかもしれない。

対応

VS　CodeのHTMLフォーマッタをVSCodeのフォーマッタに切り替えることで対応できる。
(つまり、Prettierを使うのを諦める😥)
次に示す例では、VS Codeのsettings.jsonのHTMLのフォーマッタを"esbenp.prettier-vscode"(Prettier)から"vscode.html-language-features"(VS Code標準)に修正する。

settings.js

// 修正前
 "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }

// 修正後
"[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
  }