JS Beautify hack to work with Blade directives (Laravel)

beautify-html.js

function Beautifier(html_source, options, js_beautify, css_beautify) {
    //Wrapper function to invoke all the necessary constructors and deal with the output.
    html_source = html_source || '';

    // BEGIN (around line 199)
    console.log(html_source);
    html_source = html_source.replace(/\{\{((?:(?!\}\}).)+)\}\}/g, function (m, c) {
        if (c) {
            c = c.replace(/(^[ \t]*|[ \t]*$)/g, '');
            c = c.replace(/'/g, ''');
            c = c.replace(/"/g, '"');
            c = encodeURIComponent(c);
        }
        return "{{" + c + "}}";
    });

    html_source = html_source.replace(/^[ \t]*@(elseif|else|empty)([^\r\n]*)$([^@]+)/gim, function (m, d, c, e) {
        var ce = c;
        if (ce) {
            ce = ce.replace(/'/g, ''');
            ce = ce.replace(/"/g, '"');
            ce = '|' + encodeURIComponent(ce);
        }

        return ('<blade-internal ' + d + ce + '>' + e + '</blade-internal end' + d + '>\n');
    });

    html_source = html_source.replace(/^[ \t]*@([a-z]+)([^\r\n]*)$/gim, function (m, d, c) {
        var ce = c;
        if (ce) {
            ce = ce.replace(/'/g, '&#39;');
            ce = ce.replace(/"/g, '&#34;');
            ce = '|' + encodeURIComponent(ce);
        }
        switch (d) {
            case 'break':
            case 'case':
            case 'continue':
            case 'csrf':
            case 'extends':
            case 'include':
            case 'includeFirst':
            case 'includeIf':
            case 'includeWhen':
            case 'inject':
            case 'json':
            case 'method':
            case 'parent':
            case 'stack':
            case 'yield':
                return '<blade ' + d + ce + '/>';
            case 'section':
                if (c.match(/[ \t]*\([ \t]*['"][^'"]*['"][ \t]*\)/i)) {
                    return '<blade ' + d + ce + '>';
                } else {
                    return '<blade ' + d + ce + '/>';
                }
            case 'show':
            case 'stop':
                return '</blade ' + d + ce + '>';
            default:
                if (d.startsWith('end')) {
                    return '</blade ' + d + ce + '>';
                } else {
                    return '<blade ' + d + ce + '>';
                }
        }
    });
    // END

    // ...

    var sweet_code = multi_parser.output.join('').replace(/[\r\n\t ]+$/, '');

    // BEGIN (around line 1234)
    sweet_code = sweet_code.replace(/([\n\r]*^[ \t]*<\/blade-internal [a-z]+\|?([^>\/]+)?\/?>$)/gim, function () {
        return '';
    });

    var ps = '';

    sweet_code = sweet_code.replace(/^([ \t]*)<\/?(?:blade-internal|blade) ([a-z]+)\|?([^>\/]+)?\/?>$/gim, function (m, s, d, c) {
        if (c) {
            c = decodeURIComponent(c);
            c = c.replace(/&#39;/g, "'");
            c = c.replace(/&#34;/g, '"');
            c = c.replace(/^[ \t]*/g, '');
        } else {
            c = '';
        }
        if (!s) {
            s = '';
        }
        if (d === 'if' || d === 'forelse') {
            ps = s;
        }
        switch (d) {
            case 'elseif':
                return ps + '@' + d + ' ' + c;
            case 'else':
            case 'empty':
                return ps + '@' + d + c;
            case 'for':
            case 'foreach':
            case 'forelse':
            case 'if':
            case 'unless':
            case 'while':
                return s + '@' + d + ' ' + c;
            default:
                return s + '@' + d + c;
        }
    });

    sweet_code = sweet_code.replace(/\{\{((?:(?!\}\}).)+)\}\}/g, function (m, c) {
        if (c) {
            c = decodeURIComponent(c);
            c = c.replace(/&#39;/g, "'");
            c = c.replace(/&#34;/g, '"');
            c = c.replace(/(^[ \t]*|[ \t]*$)/g, ' ');
            c = c.replace(/(^[ \t]+--|--[ \t]+$)/g, '--');
        }
        return "{{" + c + "}}";
    });
    // END

    // ...

    return sweet_code;
}

Copy of comments for reference from forked gist:

You have to modify the files under node_modules for the HookyQR.beautify extension.

On Unix cd ~/.vscode/extensions/HookyQR.beautify-1.3.2/node_modules/js-beautify. On Windows, go to %USERPROFILE%\.vscode\extensions\HookyQR.beautify-1.3.2\node_modules\js-beautify. Use your current version number instead of 1.3.2.

Edit js/lib/beautify-html.js and add the code from the gist.

Configure VS Code to treat Blade templates as HTML by adding "*.blade.php": "html" to files.associations setting as shown below.

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

If your Blade templates are configured to be detected as blade format, you may configure Beautify extension to treat blade format as HTML by adding blade to html list of the beautify.language setting.

"html": [
    "htm",
    "html",
    "blade"
]

Restart VS Code.

IMPORTANT: Every time when VS Code is updated, check whether the fix is still in place and re-apply if needed.