如何在 VScode 中格式化 HTML 代碼？

Question

我想找到一種在 VScode 中格式化 HTML 的方法，例如，如果我有一個像這樣的長 div：

<div class="signal-item-icon checkbox-signal signal-icon" [class.selected]="signal.isSelectedCheckSign" (click)="$event.stopPropagation(); onSelectOneShadowSignal(signal);">

我希望它在我執行 ctrl+shift+i 時顯示如下：

<div class="signal-item-icon checkbox-signal signal-icon" 
     [class.selected]="signal.isSelectedCheckSign" 
     (click)="$event.stopPropagation(); 
     onSelectOneShadowSignal(signal);">

如果可能的話，你會嗎？ 是否存在用於這種實現的擴展 VScode？

謝謝 ！

Answer 1

將 VSCode 首選項html.format.wrapAttributes設置為force將完成示例中的格式設置。

Answer 2

您也可以將它與html.format.wrapLineLength組合使用。

"html.format.wrapLineLength": 80,
"html.format.wrapAttributes": "auto",

在這種情況下，當行長超過80時，屬性開始換行。 當你有很多屬性時它很有用，它會填補右邊的空白。

Answer 3

我認為更好的解決方案是使用force-aligned的 VSCode html.format.wrapAttributes選項。 這不會模糊下一個嵌套對象與您的父級屬性之間的界限。 （在大多數情況下）。

力量

<form attribute1="value" 
  attribute2="othervalue">
  <div></div>
</form>

力對齊

<form attribute1="value" 
      attribute2="othervalue">
  <div></div>
</form>

在我看來，第一個選項使在表單中找到 div 變得更加困難。 當這種情況發生時，我已經看到它引起了許多開發人員的頭痛。

<form attribute1="value">
  attribute2="othervalue"
  <div></div>
</form>