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.
- Install the Beautify extension
- 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:
- Look for the function
Beautifier.prototype.beautify = function().
- Inside the function look for the line
var source_text = this._source_text;
- 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
- Look for the line
var sweet_code = printer._output.get_code(eol);
- 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
- 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
