Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
JS Beautify hack to work with Blade directives (Laravel)
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;
}
@valeryan
Copy link
Author

valeryan commented Aug 31, 2018

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.

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