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?

Yap

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.

Granular

Man. I'm really looking forward to when VSCode has formatting support for PHP. – Kally

@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 – Granular

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. – Kally

@JoSmo I'll give it a test on Mac later tonight. Have you followed the configuration instructions here? Some features require that the path to php be set. – Granular

I tried but couldn't make it work. I may have missed something. Maybe because i used php.executablePath instead of php.validate.executablePath. – Klarrisa

@JoSmo Try both. It shouldn't hurt to have extra properties. You're using ⌥⇧F, right? That's what pretty much all of the extensions were using last I checked. – Granular

@Granular yes, i'm using ⌥⇧F. – Klarrisa

This answer is quite messy. According to your answer, Code has awesome PHP support and extensions. The first link burred into 1, does not format HTML, the second is 404 and the third one is not better than the first one. With Code 1.23, 3 years later, I still can't answer the question :( Any update? – Maeganmaelstrom

@Maeganmaelstrom It remains a little messy to actually find the correct extensions for most languages, including PHP; you can never be quite sure which have overlapping features. As you've noticed from the 404 link, extensions are still in their early stages, and some disappear seemingly overnight. However, I've found the PHP support offered by the various extensions to be sufficient for casual use. At this point, I've given up researching new extensions; instead, I just pick the most popular ones and hope they work. (They usually do.) As for mixed PHP/HTML: might work today, might not tomorrow. – Granular

Thanks for this clear reply which deserve to be in your main answer :) – Maeganmaelstrom

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

VS Code has no built in support for formatting PHP code, and this answer just lists a bunch of extensions that someone found with a search. Why is this the accepted answer? – Ulane

@Andrew Koster, I personally use a single extension that I think is better than the others. However, Stack Overflow isn’t a place for me to advertise my own opinions. There are multiple extensions that claim to support the requested features, and it’s not my prerogative to promote a specific solution. As was explained in previous comments, extensions come and go; I was probably using a different one when I wrote this answer. Want a more consistent, powerful PHP IDE? You might have to look beyond VSCode. As for no intrinsic support: VSC is useless for most languages without extensions anyway. – Granular

I can get PHP formatting working with VS Code and Prettier and the Prettier extension for VS Code, but it involves steps which are not documented in any of the software that I've just mentioned. What's missing here is a specific set of open-source instructions that just works, without the user needing to be an expert in these specific software packages, and without the user needing to make any guesses or decisions. – Ulane

@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. – Granular

The fact that it is 2022 and intelephense is still the go to tool for this and vscode still lacks a built in formatter for basic php and html is just icing on the cake. Have been forced to switch devices and just had to make the transition from phpstorm to vscode and man............I want to kill myself. – Durango

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.

Gamali

Your answer deserves more upvotes! Thank you. – Bullyboy

where can I find settings.json file? – Hanzelin

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? – Gamali

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." – Gamali

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,

Cedeno

This setting worked for me, I had already installed this extension but I was missing this setting. – Pellegrino

Awesome, Works great. Why they not to tell in extension faq that settings? ): – Canakin

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.

Myself

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.

Spohr

That's the only one that helped me since one of the latest VS Code updates - thanks for that! – Jipijapa

Answer 6

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.

Infantile

not working for me, already reload vscode still none. it seems like the owner having trouble in github issues – Alane

Answer 7

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.

Lawful

Answer 8

Go to extension in vs code:

then write: category:formatters php

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

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

Psychopathy

thats paid, not free tho. im in laravel project right now – Alane

@FoggyMindedGreenhorn paid for premium features. formatting is not included in the premium. – Psychopathy

Answer 9

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.

Incompletion

Answer 10

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

Actinium

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.. :)

Dissociable

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.

Roberge

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

Lamont