visual studio code prettierでの整形について

Question

VScodeのプラグイン「prettier - Code formatter」を使用しているのですが
どうしてもHTMLコードが思うように整形されないので、
解決策がわかる方いらっしゃいましたらご教示お願いいたします。

整形前

      <li>
        <a href="images/photo1.jpg" class="modal"><img src="images/photo1_thum.jpg" alt="シャンデリア"/></a>
      </li>

整形後

      <li>
        <a href="images/photo1.jpg" class="modal"
          ><img src="images/photo1_thum.jpg" alt="シャンデリア"
        /></a>
      </li>

setting.json

{
    "workbench.startupEditor": "newUntitledFile",
    "workbench.iconTheme": "vscode-icons",
    "editor.multiCursorModifier": "ctrlCmd",
    "workbench.colorTheme": "Dracula",
    "editor.formatOnSave": true,
    "editor.tabSize": 2,
    "editor.fontFamily": "'Fira Code'",
    "editor.fontLigatures": true,
    "files.autoSaveDelay": 100,
    "editor.fontSize": 16,
    "files.autoSave": "afterDelay",
    "editor.formatOnType": true,
    "editor.wordWrap": "on"
    "emmet.variables": {"lang":"ja"},
    "html.format.enable": false,
    "html.format.contentUnformatted": "null"
}

Comments

[y_waiwai]

どういうふうに解決するという話なんでしょうか。
なにが問題か不明です

[yana22]

言葉足らずで申し訳ございません。
少なくとも見やすいようには整形されないということを言いたかったのですが
どのように整形されるのが目標なのかまで明示するべきでした。
ご指摘ありがとうございます。

Answer 1

別のフォーマッターを試せばよいのでは？
私はBeautifyを使ってます。
標準？のHTMLフォーマッターでもあまり遜色ないと思います。

…殆どHTMLは書かないので、使用感とかは語れません。

Comments

[yana22]

他のフォーマッターを使う発想がありませんでした...
Beautifyを使ってみたところ、綺麗に整形されました！
ありがとうございます。

Answer 2

軽く動かしてみましたが、なるほど変ですね…。
タグの>の後に改行かスペースがあればちゃんと整形されるっぽいですが。

単純なオプションもざっと見たけどなかなかそれらしいものもないので、おかしな感じはします。

軽くググってみたらこんなissueがありましたが、めんどくさいんでナナメ読みした限りですけど、HTMLは他のフォーマッタ使うわ、と言ってる人がいたり、コード修正と関連づいてなかったりするんで、あんまりやる気なさそうな感じはしますね。

Comments

[yana22]

ご回答ありがとうございました。
他のフォーマッターを使用することで解決しました。
prettier自体は優秀なフォーマッターのはずですが、HTMLでは不具合のようなものが
あるみたいですね...