php – How to Format Laravel Blade Codes in Visual Studio Code?-ThrowExceptions

Exception or error:

I have installed some Visual Studio Code extensions to handle Laravel Blade Codes like

laravel-blade [ https://marketplace.visualstudio.com/items?itemName=KTamas.laravel-blade ]

Laravel Blade Snippets [ https://marketplace.visualstudio.com/items?itemName=onecentlin.laravel-blade ]

But they are not helping me to format Laravel Blade Codes [blade.php files]. I mean they are not auto indenting the codes as I expected. But I have seen blade codes online which are well indented in visual studio Code IDE.

Example :

enter image description here

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

Is their any specific configuration or technique which I can use to make these extensions work or there is some other way? Thanks in advance

How to solve:
  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 ­čÖé

enter image description here

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

enter image description here
3. In “User settings” > “Extensions” > “Blade Configaration” check the option Enable format blade file.

enter image description here

That’s it.

Answer´╝Ü

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

Enable Blade code format

Answer´╝Ü

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

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

Answer´╝Ü

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.

Answer´╝Ü

First install this extension, https://marketplace.visualstudio.com/items?itemName=onecentlin.laravel-blade

Open settings.json.
Add this lines.

"[blade]": {
    "editor.defaultFormatter": "onecentlin.laravel-blade",
    "editor.formatOnSave": true
}

Answer´╝Ü

The only solution I’ve found that will actually attempt to indent blade directives mixed with html in a blade file is a hack for the beautifier javascript from the Beautify extension, done by Faizal Nugraha.

Edit: This doesn’t appear to support formatting of blade directives inside an html <script> tag, though. Beautify seems to format that as JavaScript.

  1. Install the Beautify extension
  2. Edit ~/.vscode/extensions/hookyqr.beautify-1.5.0/node_modules/js-beautify/js/src/html/beautifier.js (Linux/MacOS) or %USERPROFILE%\.vscode\extensions\hookyqr.beautify-1.5.0\node_modules\js-beautify\js\src\html\beautifier.js (Windows) and do the following:
  3. Look for the function Beautifier.prototype.beautify = function().
  4. Inside the function look for the line var source_text = this._source_text;
  5. After that line, paste in:
        // BEGIN blade-1of2
        source_text = source_text.replace(/\{\{(--)?((?:(?!(--)?\}\}).)+)(--)?\}\}/g, function(m, ds, c, dh, de) {
        if (c) {
            c = c.replace(/(^[ \t]*|[ \t]*$)/g, '');
            c = c.replace(/'/g, ''');
            c = c.replace(/"/g, '"');
            c = encodeURIComponent(c);
        }
        return "{{" + (ds ? ds : "") + c + (de ? de : "") + "}}";
    });
    source_text = source_text.replace(/^[ \t]*@([a-z]+)([^\n]*)$/gim, function(m, d, c) {
        if (c) {
            c = c.replace(/'/g, ''');
            c = c.replace(/"/g, '"');
            c = "|" + encodeURIComponent(c);
        }
        switch (d) {
            case 'break':
            case 'case':
            case 'continue':
            case 'default':
            case 'empty':
            case 'endsection':
            case 'else':
            case 'elseif':
            case 'extends':
            case 'csrf':
            case 'include':
            case 'json':
            case 'method':
            case 'parent':
            case 'section':
            case 'stack':
            case 'yield':
                return "<blade " + d + c + "/>";
            default:
                if (d.startsWith('end')) {
                    return "</blade " + d + c + ">";
                } else {
                    return "<blade " + d + c + ">";
                }
        }
    });
    // END blade-1of2
  1. Look for the line var sweet_code = printer._output.get_code(eol);
  2. After that line, paste in:
    // BEGIN blade-2of2
    sweet_code = sweet_code.replace(/^([ \t]*)<\/?blade ([a-z]+)\|?([^>\/]+)?\/?>$/gim, function toDirective(m, s, d, c) {
        if (c) {
            c = decodeURIComponent(c);
            c = c.replace(/'/g, "'");
            c = c.replace(/"/g, '"');
            c = c.replace(/^[ \t]*/g, '');
        } else {
            c = "";
        }
        if (!s) {
            s = "";
        }
        switch (d) {
            case 'else':
            case 'elseif':
            case 'empty':
                s = s.replace(printer._output.__indent_cache.__indent_string, '');
                break;
        }
        return s + "@" + d + c.trim();
    });
    sweet_code = sweet_code.replace(/@(case|default)((?:(?!@break).|\n)+)@break/gim, function addMoreIndent(m, t, c) {
        var indent = printer._output.__indent_cache.__base_string;
        c = c.replace(/\n/g, "\n" + indent + printer._output.__indent_cache.__indent_string);
        c = c.replace(new RegExp(indent + '@' + t, 'gi'), '@' + t);
        return "@" + t + c + "@break";
    });
    sweet_code = sweet_code.replace(/\{\{(--)?((?:(?!(--)?\}\}).)+)(--)?\}\}/g, function (m, ds, c, dh, de) {
        if (c) {
            c = decodeURIComponent(c);
            c = c.replace(/'/g, "'");
            c = c.replace(/"/g, '"');
            c = c.replace(/(^[ \t]*|[ \t]*$)/g, ' ');
        }
        return "{{" + (ds ? ds : "") + c + (de ? de : "") + "}}";
    });
    // END blade-2of2
  1. Save the file and restart VS Code.

Of course this has to be redone if the file is changed, by an update or otherwise.

Ref. https://gist.github.com/fzldn/a27973ff7e4c8e3738b0e06e525f7403#gistcomment-2693197

Leave a Reply

Your email address will not be published. Required fields are marked *