How to format PHP files with HTML markup in Visual Studio Code?

Question

I'm using Laravel so all the views are .blade.php files. Visual Studio Code won't format the HTML because of the PHP extension. I removed the blade part of the filename, but it still isn't formatting the files properly (via Alt+Shift+F).

I also tried about five extensions but none of them do the reformatting.

How can I format .blade.php files in Visual Studio Code?

Answer 1

The extension beautify just do it very well, either add php and any other file extension type to the config as said above here is an example :

1. go to user settings (CTRL + comma)
2. search for beautify in the field above, and identify the line beautify.language, then click left in the pencil icon and click replace in settings. It will add the config to the right (user settings).
3. for html section just add php and blade.php

OTHERWISE: you can also do it directly, type F1 then write beautify, the auto completion give you two choices beautify selection or beautify file. Choose the one you need, and it will do the job. that's a straight direct way.

You can also add a keybinding to have a keyboard shortcut, here how to do it:

1. open keybindings.json (go file>preferences>keyboard shortcuts)
2. click in above open and edit keybindings.json

3. add the following into the closed brackets []

   {
   "key": "alt+b",
   "command": "HookyQR.beautify",
   "when": "editorFocus"
   }
   

choose any key you want, and make sure you don't override and existing one, search first in the left side if it exist or not.

note that all of those things are well documented on the description of the extension.

Answer 2

Beautify does solve this problem! Many people add "blade.php" and "php" to HTML config Beautify does not recognize and manually choose HTML template. Instead just adding "blade" to HTML config fix all issues.

Answer 3

I think beautify might do the trick. Just add 'php' and/or 'blade.php' to the HTML section of its config to beautify PHP / Blade view files. Works for me!

Answer 4

If you want something that just works out the box, adds the format nested HTML in PHP files support vscode should already have.

Uses all the native settings for html.format, format on save, etc. Give the extension Format HTML in PHP a try. I made it because every other solution made me annoyed because it didn't work 100%.

Answer 5

I found this extension called Format HTML in PHP that works well for me.

Answer 6

This can be done by using html formatting for .blade.php

1. Open Command Palette (CTRL+Shift+P[on pc])
2. Type "Preferences:Open Settings (JSON)" (This is for opening settings.json)

3. Add

   "files.associations": { "*.blade.php": "html", ".tpl": "html" },

This will format .blade.php as html but will not remove blade snippet.

Answer 7

Andrew Schultz mentioned the extension: "[Format HTML in PHP][1]" [1]: https://marketplace.visualstudio.com/items?itemName=rifi2k.format-html-in-php. This is indeed a great extension for format PHP files with html markup. It also format js included in PHP files. Moreover. Good news! The developer is already working successfully to include Laravel blade.php files. In the meantime I format Laravel blade files on vscode by switching language manually from blade to php then I use the extension "[Format HTML in PHP][1]" with CTRL+ALT+F or right click. It works great for me.