CODEWITHSUNDEEP
phplaravelvisual-studio-codecode-formatting
progonkpa
progonkpa

Reputation: 3950

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

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?

Upvotes: 36

Views: 69108

Answers (10)

Matias Semelman
Matias Semelman

Reputation: 15

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

Upvotes: 1

user791379
user791379

Reputation:

I use Format HTML in PHP which works well in a file containing both HTML and PHP. However it does not appear to format a 'pure' php file such as a Class. So I have also installed Phpfmt, which does a great job with the pure php file but wrecks the indenting in a file with mixed content. Here's an example of what I get:

<?php
if (!$logged_in) {
    $login_form = 'data-toggle="modal" data-target="#Modal1"';
    $href = '#';
} else {
    $login_form = '';
    $href = 'members';
}
?>

The opening php tag is correctly aligned with the html. 'I see that under 'Supported Transformations' it says:

AlignPHPCode:   Align PHP code within HTML block.

But as you can see from the above, it's not working for me. Any suggestions??

Upvotes: 0

Mohamed Allal
Mohamed Allal

Reputation: 20980

The extension Beautify (from HookyQR) just does it very well. Either add PHP, and any other file extension type, to the configuration. As said by Nico, here is an example:

  1. Go to user settings (Ctrl + Shift + P → User settings (UI) or Ctrl + , (comma)

  2. Search for Beautify in the field above. And click on "Edit in settings.json" for "Beautify: Config".

  3. For the "html" section, add "php" and "blade".

    Enter image description here Enter image description here

###Usage

You can invoke it directly. Press F1, and then write Beautify. The auto completion gives you two choices, "Beautify file" and "Beautify selection". Choose the one you need, and it will do the job. That's a straightforward direct way.

Enter image description here

You can also add a keybinding to have a keyboard shortcut. Here is how to do it:

  1. Open keybindings.json (go to menu File → Preferences → Keyboard Shortcuts)

  2. Click in the above. Open and edit file 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 an existing one. Search first in the left side if it exists or not.

    Enter image description here

Note that all of those things are well documented in the description of the extension.

Extra: Note about blade

(suite to @Peter Mortensen clarification pinpoint)

blade or blade.php

If you are confused if it's blade or blade.php for the setting! I'll clear it up for you! It's blade! That's vscode keyword for the language!

How do you know ?

First if you open the list of languages as by the image bellow:

enter image description here

Write blade

enter image description here

You can see Laravel Blade (blade)! The language keyword is in the paratheses! blade!

Well but how to check!

Try with blade.php in the settings!

enter image description here

Try to beautify

enter image description here

You'll get an asking context menu for what language (html, css, js)!

enter image description here

So it doesn't works!

To really know ! Put back blade! And it will work and beautify directly!

How well it works with blade

The awesome answer to that! Is try it, and see for yourself!

But if you ask me! I'll say it does work as with html! It can be too handy! And you may need to fix some lines! Depending on your expectations and your style!

Here an illustration! I screwed the indentation in purpose

enter image description here

And here the beautification result:

enter image description here

Upvotes: 64

Charles Goodwin
Charles Goodwin

Reputation: 624

Using a newish feature in php, vscode seems to format and highlight embedded HTML beautifully. (php 7.3, released after the question was posted) adds what are called "heredoc" and "neardoc" strings. They are well described here: https://andy-carter.com/blog/what-are-php-heredoc-nowdoc.

Basically, you put your HTML in like this:

[php code.....]
echo
<<<HTML
   <div>
     <h1>This is a headline</h1>
    <p> this is a paragraph. lorem ipsum lorem ipsum blah black </p>
   </div>
HTML;
[^ don't forget the ;  follow with more php if you want]

it looks just great on screen.

Upvotes: 0

TeachMe
TeachMe

Reputation: 635

This can be done by using HTML formatting for ".blade.php":

  1. Open Command Palette (Ctrl + Shift + P (on a 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 files as HTML, but it will not remove Blade snippets.

Upvotes: 0

Gus
Gus

Reputation: 121

Andrew Schultz mentioned the extension: "Format HTML in PHP".

This is indeed a great extension for format PHP files with HTML markup. It also formats JavaScript code 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 in Visual Studio Code by switching language manually from Blade to PHP then I use the extension "Format HTML in PHP" with Ctrl + Alt + F or right click. It works great for me.

Upvotes: 1

Andrew Schultz
Andrew Schultz

Reputation: 4243

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

Upvotes: 0

rifi2k
rifi2k

Reputation: 199

If you want something that just works out of the box, add the format nested HTML in PHP files support Visual Studio Code should already have.

It 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%.

Upvotes: 2

Sam Dan
Sam Dan

Reputation: 169

Beautify (from HookyQR) does solve this problem!

Many people add "blade.php" and "php" to the HTML configuration. Beautify does not recognize and manually choose an HTML template. Instead, just adding "blade" to the HTML configuration fixes all issues.

Upvotes: 10

Nico
Nico

Reputation: 71

I think Beautify (by HookyQR) might do the trick. Just add 'php' and/or 'blade.php' to the HTML section of its configuration to beautify PHP / Blade view files.

It works for me!

Upvotes: 7

Related Questions