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 格式化选项进行格式化。