VS Code PHP 格式每行單個屬性

Question

我正在嘗試將 VS Code 設置為將 PHP 文件的 HTML 部分格式化為signleAttributePerLine 。 我當前的項目設置：

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[PHP]": {
    "editor.defaultFormatter": "bmewburn.vscode-intelephense-client"
  },
  "prettier.singleAttributePerLine": true,
  "intelephense.singleAttributePerLine": true,
  "editor.formatOnSave": true,
  "editor.tabSize": 2,
  "html.format.wrapAttributes": "auto",
  "prettier.singleQuote": true,
  "prettier.semi": false,
  "prettier.printWidth": 80,
  "cSpell.words": ["gematriya", "roadmap", "WPAPI"]
}

例子：
我要這個：

<div class="d-flex gap-3 field-control flex-wrap">
  <?php
  $counter = 0;
  foreach ($select_values as ['label' => $label, 'value' => $value]) :
    if ($counter >= 10) break;
  ?>
    <div class="small-button" data-post-type="<?= $post_type ?>" data-type="<?= esc_attr($type) ?>" role="button" data-value="<?= esc_attr($value) ?>">
      <?= $label ?>
    </div>
  <?php
    $counter++;
  endforeach;
  ?>
</div>

變成這個（保存時）：

<div class="d-flex gap-3 field-control flex-wrap">
  <?php
  $counter = 0;
  foreach ($select_values as ['label' => $label, 'value' => $value]) :
    if ($counter >= 10) break;
  ?>
    <div 
      class="small-button"
      data-post-type="<?= $post_type ?>"
      data-type="<?= esc_attr($type) ?>"
      role="button"
      data-value="<?= esc_attr($value) ?>"
    >
      <?= $label ?>
    </div>
  <?php
    $counter++;
  endforeach;
  ?>
</div>

注意 - 我對當前的 PHP 部分格式很滿意，只是想更新 HTML 部分。

Answer 1

1. 在 PHP 擴展中安裝格式 HTML 。
2. 將設置HTML > Format: Wrap Attributes更改為force-expand-multiline ：

"html.format.wrapAttributes": "force-expand-multiline",  // should be in your settings

3. 將此添加到您的設置（ settings.json ）：

"[php]": {
  "editor.formatOnSave": true
}

現在，當您保存.php文檔時，其中的 html 應該根據您在 vscode 中設置的 html 格式化選項進行格式化。