How to Format Laravel Blade Codes in Visual Studio Code ?

@coolsaint I use this https://marketplace.visualstudio.com/items?itemName=onecentlin.laravel-blade and it's working correctly.

Maybe this article will help:

https://medium.com/@ardanirohman/laravel-%EF%B8%8F-visual-studio-code-debug-environment-65440274d3b0

I have already read the article and installed some of the extensions that might solve my problem like beautify, auto close tags, laravel code snippets and PHP Intellisense - Crane. But still my laravel blade codes are not auto indenting.

I have found this on the github issue page of larave blade snippets :

https://github.com/onecentlin/laravel-blade-snippets-vscode/issues/9

looks like it is not working in others cases too. Did you do any configuration change for blade files handling?

Can't get this to work either. There is a PR that onecentlin won't merge with a fix

see this hack for beautify

Beautify works with me .. just add it to your settings and add the word "blade" not "blade.php" in the user settings. check this SO answer. https://stackoverflow.com/a/48339700/9041947

This link could be helpful : https://www.gyrocode.com/articles/how-to-format-laravel-blade-templates-in-visual-studio-code/

it use html format instead of blade.

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

aligilan's solution is a partial work-around. It does format the HTML nicely, but it also places blade directives on a single line like:

@extends('...') @section('...') etc.

However, if you install the "Laravel Blade Snippets" extension and then go to User Settings -> Extensions and look for "Blade Configuration". There's an option to enable formatting. Just check the box and then reload Visual Studio Code.

EDIT: On second thought, you're better off with aligan's solution or, better yet, no auto-formatting at all. The Laravel Blade Snippets extension [really] messes up the formatting.

after installing Laravel Blade Snippets you must enable formatting blade files in settings search for blade.format.enable

I have installed this Beautify blade extension by Apility AS from https://marketplace.visualstudio.com/items?itemName=apility.beautify-blade and changed some config.

All you need to do is open user settings in json format and add following code after installing that extension.

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

works like a charm.

@yuvrajsab This worked perfectly for me, thank you.

Thank you @yuvrajsab

Some things don't work well, for example the layout that comes with --auth.

@if (Route::has('register'))

turns into

<blade
    if|%20(Route%3A%3Ahas(%26%2339%3Bregister%26%2339%3B))>

@yuvrajsab Thank you, worked perfectly for me!

I have installed and enabled PHP Blade Snippets, then checked the enable format blade file box for blade.format.enable in VSCode settings, but I can't see any format change when I execute >Format Document. Also, if I execute >Format Document With..., I don't see Laravel Blade Snippet in the list, only PHP Intelephense and php cs fixer.

What might be wrong in my config ?

Aptly beautify blade all most works but there when I use @props() all the code below it gets indented.

This is a great extension - if it will be possible to support "beautify.config" settings and it would be amazing.

Something like this in settings would be amazing:

  "beautify.config": {
    "indent_size": 2,
    "wrap_line_length": 140,
    "wrap_attributes": "force-aligned"
  },

@sloveniangooner Thank you! I think it's good idea to support js beautify configs. I'll consider this feature to include in the next version.

I tried Blade Snippet By Winnie but it has multiple issue. Recently I started using the below on and its working perfectly.

Name: Laravel Blade

Id: amirmarmul.laravel-blade-vscode

Description: Snippets, Syntax Highlighting, and Formatting for VS Code

Version: 2.0.4

Publisher: amirmarmul

VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=amirmarmul.laravel-blade-vscode