属性が別々の行にあるように、Visual StudioコードでHTMLコードをフォーマットしますか？

Question

Vscodeのフォーマット設定が不足しているようです。私のhtmlが次のように表示されるように、htmlをフォーマットできるようにしたいと思います。

<div attrib1=value1
     attrib2=value2
     attrib3=value3>
  Content
</div>

これは、私が本当に持ちたい機能の1つです！

Answer 1

VSCodeはこれを行う方法を追加しました。 settings.jsonを編集してから、目的の効果を得るために以下を追加できます。

"html.format.wrapAttributes": "force-aligned"

-または-

"html.format.wrapAttributes": "force"

force-alignedは、タグが開かれた行の属性に合わせてインデントを追加します。

詳細または更新については、 このリンク にアクセスしてください。

Answer 2

さまざまな「フォーマッタ」拡張機能がありますが、私が見つけた拡張機能は、探しているこの正確な書式設定を適切に処理します。 「vscode-tidyhtml」と呼ばれます。

https://marketplace.visualstudio.com/items?itemName=anweber.vscode-tidyhtml

1. 左側の拡張機能アイコンをクリックします
2. 「vscode-tidyhtml」を検索してインストールし、Visual Studio Codeをリロードします
3. 「F1」キーを押してから「TidyHtml」と入力し、Enterキーを押します

属性が異なる行にあるようにHTMLをフォーマットする必要があります。他の種類のファイルでうまく機能するかどうかはわかりません。

Answer 3

私の拡張htmlは「Prettier：Print width」設定によって制限されていたので、ランダムな値を0にすると思っていましたが、すべてのタグが属性を壊し始めました。そこで彼は10,000を置きました。これで問題が解決しました。