VS Code PHP 格式每行单个属性

Question

I'm trying to set VS Code to format the HTML part of the PHP file as signleAttributePerLine . My current project settings:

{
  "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"]
}

Example:
I want this:

<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>

To turn into this (on save):

<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>

Note - I am happy with the current PHP part formatting, just want to update the HTML part.

Answer 1

1. Install the Format HTML in PHP extension.
2. Change the setting HTML > Format: Wrap Attributes to force-expand-multiline :

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

3. Add this to your settings ( settings.json ):

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

Now when you save a .php document the html inside it should be formatted according to the html formatting options you set in vscode.