1

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.

1
  • i wondered same you. how to set "printWidth" on php? Commented Aug 24, 2022 at 7:10

1 Answer 1

2
+50
  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 
  1. 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.

format HTML in PHP demo

Sign up to request clarification or add additional context in comments.

2 Comments

Thanks, @Mark. Does the job.
This did work for me, but how would this be done without format on save?

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.