How to Format Laravel Blade Codes in Visual Studio Code?

1. First go to "Visual Studio Code" Settings and search for the option "files.associations" If that option is not available in your settings. Please update your Visual Studio Code to latest version.

2. In the settings overwrite panel past the following snippet

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

It'll associate .blade.php and .tpl file extensions for html type

Save it and your are good to go. Happy formatting :)

Update: There are still some issues in formatting html with blade code, the formatter tend to bring blade codes in a single line while executing format command. However, if your codes grow that's won't be a problem. Moreover, you can easily manage those by putting a line comment in between your blade blocks. And commenting in code is always a good thing.

Update: Seems updated version adds an option to enable blade formatting in the user settings. To use that,

1. Please make sure you are using the latest version and "Laravel Blade Snippets" Extension installed.

2. Then Ctrl+Shift+P : type User settings : Enter

3. In "User settings" > "Extensions" > "Blade Configaration" check the option Enable format blade file.

That's it.

Update your VSCode. Go to Settings>Extensions and Enable Blade Format checkbox. Use Shortcut for Window: Shift+Alt+F:

For me, this extension works perfect for auto indentation with the following settings:

"beautify.language": {
        "html": [
            "blade",
            "html"
        ]
    },

Files>Preferences>Settings>Extensions>Blade Configurations

Then Enable format blade file (Follow Image).Then Restart Visual Studio Code.Now Use Shift+Alt+F To format. Now OK.