Instantly share code, notes, and snippets.

Embed
What would you like to do?
JS Beautify hack to works with blade directives (laravel)
function style_html(html_source, options, js_beautify, css_beautify) {
html_source = html_source.replace(/\@([^\n\s]*)/ig, "<blade $1/>");
...
sweet_code = sweet_code.replace(/<blade ([^\n]*)\/>/ig, "@$1");
sweet_code = sweet_code.replace(/\(\ \'/ig, "('");
...
return sweet_code;
}
@brnmonteiro

This comment has been minimized.

Owner

brnmonteiro commented Dec 18, 2017

add the follow lines to html parser on JS beautify on style_html() function.

@bitwiseman

This comment has been minimized.

bitwiseman commented Dec 18, 2017

What does it do?

@brnmonteiro

This comment has been minimized.

Owner

brnmonteiro commented Dec 19, 2017

Expected results:

<body>
    @include('header')

    @yield('content')

    @include('footer')
</body>

Without this gist, after JSBeautify HTML Format:

<body>
    @include('header') @yield('content') @include('footer')
</body>

PS. not working with blade directive blocks like @php:

@php
$foo = 'bar';
@endphp
@nickclasener

This comment has been minimized.

nickclasener commented Dec 30, 2017

Were does this gist go?

  • Is it made for an extention?
  • Is it for .vscode?
  • Is it a file that goes into webpack?
@MarkusPayne

This comment has been minimized.

MarkusPayne commented Jan 7, 2018

You have to modify the files under node_modules for the HookyQR.beautify extension. These are the steps that worked for me (on Ubuntu):

  1. cd ~/.vscode/extensions/HookyQR.beautify-1.1.1
  2. npm install js-beautify (needed some additional files to complete the build)
  3. open js/lib/beautify-html.js and add the code from the gist
  4. open tools/build.sh and comment out "generate tests" in the build_js() function (was throwing an error from me)
  5. run ./build js

when that's done add "blade" to the bottom of your User Settings "beautify.language" config:

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

Then I created a custom keyboard shortcut to trigger the formatting

@nivv

This comment has been minimized.

nivv commented Jan 8, 2018

Does not work with @if-statements or @foreach.

// Before
@section('content')
    @if($page == 1)
        {!! $page !!}
    @endif
@endsection
// After
@section('content')
@if($page == 1) {!! $page !!}
@endif
@endsection
@vesper8

This comment has been minimized.

vesper8 commented Feb 6, 2018

ugh this is very frustrating.. several blade extensions in vscode but not one properly handles formatting inside blade files.. and this solution here while great and thanks for sharing is much too complicated

here's to hoping someone takes this solution and makes it into an easy-to-install extension

@fzldn

This comment has been minimized.

fzldn commented Apr 5, 2018

I made some improvement from codes above, this is not perfect but makes blade formatter cleaner

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
    html_source = html_source.replace(/\{\{((?:(?!\}\}).)+)\}\}/g, function (m, c) {
        if (c) {
            c = c.replace(/(^[ \t]*|[ \t]*$)/g, '');
            c = c.replace(/'/g, '&#39;');
            c = c.replace(/"/g, '&#34;');
            c = encodeURIComponent(c);
        }
        return "{{" + c + "}}";
    });
    html_source = html_source.replace(/^[ \t]*@([a-z]+)([^\n]*)$/gim, function (m, d, c) {
        if (c) {
            c = c.replace(/'/g, '&#39;');
            c = c.replace(/"/g, '&#34;');
            c = "|" + encodeURIComponent(c);
        }
        switch (d) {
            case 'break':
            case 'continue':
            case 'empty':
            case 'else':
            case 'elseif':
            case 'extends':
            case 'case':
            case 'csrf':
            case 'include':
            case 'json':
            case 'method':
            case 'parent':
            case 'stack':
            case 'yield':
                return "<blade " + d + c + "/>";
                break;
            default:
                if (d.startsWith('end')) {
                    return "</blade " + d + c + ">";
                } else {
                    return "<blade " + d + c + ">";
                }
                break;
        }
    });
    // END

    ...

    var sweet_code = multi_parser.output.join('').replace(/[\r\n\t ]+$/, '');
                    
    // BEGIN
    sweet_code = sweet_code.replace(/^([ \t]*)<\/?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 = "";
        }
        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, ' ');
        }
        return "{{" + c + "}}";
    });
    // END

    ...

    return sweet_code;
}

hope this will help

happy coding!

@mpryvkin

This comment has been minimized.

mpryvkin commented Apr 21, 2018

@fzldn, thanks for the snippet, works great. This part of the regex [^\n] needs to be changed to [^\r\n] to remove CR 0x0D character on Windows.

I added some other minor changes and created this gist based on your code.

@fzldn

This comment has been minimized.

fzldn commented Aug 31, 2018

I also make the gist for js-beautify hack for HookyQR.beautify version 1.4.2 here the gist

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment