-
-
Save brnpimentel/3660b71dbc68691cdc8ac41cec379e2f to your computer and use it in GitHub Desktop.
| 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; | |
| } |
What does it do?
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
Were does this gist go?
- Is it made for an extention?
- Is it for .vscode?
- Is it a file that goes into webpack?
You have to modify the files under node_modules for the HookyQR.beautify extension. These are the steps that worked for me (on Ubuntu):
- cd ~/.vscode/extensions/HookyQR.beautify-1.1.1
- npm install js-beautify (needed some additional files to complete the build)
- open js/lib/beautify-html.js and add the code from the gist
- open tools/build.sh and comment out "generate tests" in the build_js() function (was throwing an error from me)
- 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
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
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
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, ''');
c = c.replace(/"/g, '"');
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, ''');
c = c.replace(/"/g, '"');
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(/'/g, "'");
c = c.replace(/"/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(/'/g, "'");
c = c.replace(/"/g, '"');
c = c.replace(/(^[ \t]*|[ \t]*$)/g, ' ');
}
return "{{" + c + "}}";
});
// END
...
return sweet_code;
}hope this will help
happy coding!
I also make the gist for js-beautify hack for HookyQR.beautify version 1.4.2 here the gist
add the follow lines to html parser on JS beautify on
style_html()function.