web-dev-qa-db-ja.com

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

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

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

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

28
Siddharth Singh

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

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

-または-

"html.format.wrapAttributes": "force"

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

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

39
Siddharth Singh

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

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

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

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

2
EdwardM

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