Format code command for PHP/HTML in Visual Studio Code

Question

Is it possible to get Visual Studio Code to format mixed HTML and PHP code on Windows Visual Studio Code version 0.7.1?

Answer 1

Update 2021年07月21日

It's been more than half a decade since I first wrote this answer. The extensions to which I originally linked are abandoned, and Visual Studio Code's intrinsic PHP support hasn't improved, which is disappointing. The only decent extension still standing of which I'm aware is PHP Intelephense, which uses a freemium model: basic features are free, and a lifetime license is 12ドル USD as of writing.

The free version of Intelephense supports code formatting with the usual shortcuts (Alt + Shift + F on Windows and Linux, ⌥⇧F on macOS). Visual Studio Code continues to lack built-in support for PHP code formatting and will direct you to the extension marketplace if you attempt to format PHP without an appropriate extension installed.

Original answer

Visual Studio Code has pretty awesome PHP support. What it lacks is covered by extensions. A quick search reveals at least three (1, 2, and 3) that claim to support PHP formatting.

They mostly seem to use the standard shortcut of Alt + Shift + F on Windows/Linux, with varying shortcuts on Mac. If you're on Mac, give ⌥⇧F a try.

• Martyn Chamberlin: Man. I'm really looking forward to when VSCode has formatting support for PHP.
• Zenexer: @MartynChamberlin Visual Studio Code has near-complete PHP support now, including formatting support with the help of a third-party extension. code.visualstudio.com/Docs/languages/overview
• Martyn Chamberlin: Hmm. They're all lacking imo. format-php doesn't handle function-scope comment formatting. format-indent is completely unusable (Artur's "Adds a new empty line after every line every time I format" is true for me too). php-debug is ridiculous because it's not a one-stop solution—you have to modify your php.ini file, and I would have to modify several since some of my projects are in VMs, some in MAMP. Also it has zero Mac documentation, which is odd. I'm still waiting for "the" PHP formatter that will make VSCode usable for me.
• Ivan Topić: Year is almost 2019 and we still don't have this part covered. Beautify extension works ok sometimes but messes up indentation in some parts, like inside class methods
• Zenexer: @AndrewKoster In the years since I wrote the answer here, I've come to agree. However, at the time--half a decade ago--VSC had just added PHP support, and it was far better than what had existed previously within the VSC ecosystem. In the years since, it hasn't been able to keep up with PhpStorm, and there hasn't really been any improvement in terms of intrinsic support. I currently use VSC + Intelephense; it's usable, but it leaves much to be desired.

Answer 2

I installed

• Prettier for HTML, CSS, and JavaScript files

• PHP Intelephense for PHP files

I followed the instructions for each plugin but found I had to additionally edit settings.json manually in order to get them to work together.

"editor.defaultFormatter": "esbenp.prettier-vscode",
"[php]": {
 "editor.defaultFormatter": "bmewburn.vscode-intelephense-client"
}

The settings use Intelephense as the formatter for PHP files and use Prettier as the formatter for all other files.

Now I use Shift + Alt + F to format the files like everybody else.

• Satyendra Prakash: where can I find settings.json file?
• bc1121: I usually just press [ctrl] + [,] to get to settings and then click the "Open Settings (JSON)" icon that appears in the top right hand corner under the title bar Here's another option... VS Code: How to open settings.json file?
• bc1121: Another option: languagespecific-editor-settings "If you have a file open and you want to customize the editor for this file type, select the Language Mode in the Status Bar to the bottom-right of the VS Code window. This opens the Language Mode picker with an option Configure 'language_name' language based settings. Selecting this opens your user settings.json with the language entry where you can add applicable settings."
• Jakub Míšek: PHP Tools for VSCode provides format-on-type, format selection, and tons of FREE predefined code styles (Laravel, PSR2, PSR12, PER, WordPress, ....). Customized format rules are premium.

Answer 3

For the best format setting for mixed PHP, HTML, and JavaScript code, just use 'PHP CS FIXER'.

And then use this simple configuration on your setting.json file:

"php-cs-fixer.executablePath": "${extensionPath}\\php-cs-fixer.phar",
"[php]": {
 "editor.defaultFormatter": "junstyle.php-cs-fixer",
 "editor.formatOnSave": true
},
"php-cs-fixer.rules": "@PSR2",
"php-cs-fixer.formatHtml": true,

• Mansoor Ul Haq: This setting worked for me, I had already installed this extension but I was missing this setting.
• Jodyshop: Awesome, Works great. Why they not to tell in extension faq that settings? ):
• Jakub Míšek: PHP Tools for VSCode provides format-on-type, format selection, mixed HTML/CSS/JS/PHP formatting, and tons of FREE predefined code styles (Laravel, PSR2, PSR12, PER, WordPress, ....). Customized format rules are premium.

Answer 4

The problem with most of the solutions is that they all are registered as formatting providers and within Visual Studio Code you can only run one formatter on a save for a specific file type.

So one may get you all the HTML, CSS, JavaScript code, but leave out the PHP code. Or if you use a regular PHP formatter there isn't one that exists that does the HTML correctly.

I went ahead and made an extension that runs before the save hook and isn't registered as a PHP formatter, so it will do all the HTML with js-beautify and then you can use something like PHPCS + PHPCBF to format the HTML. So it's basically, as far as I'm concerned, the best solution currently available.

Format HTML in PHP on the Visual Studio Code marketplace.

Answer 5

I use bmewburn.vscode-intelephense-client and it works perfectly (other than if there's an syntax error).

There is a premium version; I don't know how well that works.

On GitHub

On VSCode Marketplace

Official Site

---

The Format HTML in PHP extension that many other people mention does work, except there are some alignment issues, and you have to format the HTML and the PHP separately.

---

phpcbf is also a good choice, except it requires more customization, and it's a bit more complicated to figure out. That could be a good thing or a bad thing, depending on what you want.

• physalis: That's the only one that helped me since one of the latest VS Code updates - thanks for that!

Answer 6

I've tried just about every formatting extension for Visual Studio Code, and I don't think there is a single one that can handle correctly/consistently formatting of mixed PHP/HTML pages.

• Jakub Míšek: PHP Tools for VSCode provides format-on-type, format selection, mixed HTML/PHP/JS/CSS formatting, and tons of FREE predefined code styles (Laravel, PSR2, PSR12, PER, WordPress, ....). Customized format rules are premium.

Answer 7

I'm coding in Laravel and I am using Format HTML In PHP for formatting the HTML code among the PHP code. It's working perfectly.

• greendino: not working for me, already reload vscode still none. it seems like the owner having trouble in github issues
• Jakub Míšek: PHP Tools for VSCode provides format-on-type, format selection, mixed HTML/PHP/JS/CSS formatting, and tons of FREE predefined code styles (Laravel, PSR2, PSR12, PER, WordPress, ....). Customized format rules are premium.

Answer 8

Go to extension in vs code:

enter image description here

then write: category:formatters php

press enter. you will see all available formatter. at the moment install the one you like.

enter image description here

then right click inside any opened php file chose format document from the popup menu.

• greendino: thats paid, not free tho. im in laravel project right now
• Malek Tubaisaht: @FoggyMindedGreenhorn paid for premium features. formatting is not included in the premium.
• Jakub Míšek: PHP Tools for VSCode provides format-on-type, format selection, mixed HTML/PHP/JS/CSS formatting, and tons of FREE predefined code styles (Laravel, PSR2, PSR12, PER, WordPress, ....). Customized format rules are premium.

Answer 9

i finally found one that works decently to format html+php code. The extension is called "All-in-one PHP support" by devsense.com. Hope it helps

enter image description here

Answer 10

Add the extension Format HTML in PHP to Visual Studio Code.

Or search in extensions with "format HTML in PHP".

After reload, use Shift + Alt + F.

• Jakub Míšek: PHP Tools for VSCode provides format-on-type, format selection, mixed HTML/PHP/JS/CSS formatting, and tons of FREE predefined code styles (Laravel, PSR2, PSR12, PER, WordPress, ....). Customized format rules are premium.

Answer 11

After installed Extensions. Settings > Search >formatting and enable 'Format On Save' then edit setting.json file as below

 "editor.defaultFormatter": "esbenp.prettier-vscode",
 "[php]": {
 "editor.defaultFormatter": "bmewburn.vscode-intelephense-client",
 "editor.formatOnSave": true
 },
 "editor.formatOnSave": true

Save >Restart IDE this worked for me.. :)

Answer 12

press ctrl + shift + p and type >user settings.json

and paste this lines:

"[javascript]": {
 "editor.defaultFormatter": "esbenp.prettier-vscode",
 "editor.formatOnSave": true,
},
"[php]": {
 "editor.defaultFormatter": "bmewburn.vscode-intelephense-client",
 "editor.formatOnSave": true,
},

[javascript] means it for javascript language

"editor.defaultFormatter" means you choose a default formatter for javascript

"editor.formatOnSave": true means it will format your document after saving the file.

Answer 13

Update 2024年07月17日

I think this can now be done in VS Code without an extension. If you press Ctrl + Shift + P, then select "Change Language Mode", then type "PHP". You should now see the PHP option.

I'm using version 1.74.2

Answer 14

UPDATE 2024:

Till the date, the only solution I found to format is using AI.

I'm using Github Copilot, selecting what I want to format and in the line editor enter "fix indentation" and voilá, it really gets the task.

Hope this solves your problem like it does with me.

• Community: Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.