How to format Laravel Blade templates in Visual Studio Code

I tried Laravel Blade Snippets extension but it moves some of the Blade directives into one line.

Then I found this gist where Faizal Dwi Nugraha suggested a hack to support Blade directives for js-beautify used by Beautify extension.

It worked almost perfectly. I forked Faizal’s code and added support for Windows line endings and empty section directives. See instructions and code below for more details.

I have to admit that this process is not very user-friendly. You would have to repeat this every time Beautify extension is updated. Hopefully someone can make it into a separate extension.

Instructions

On Unix, go to ~/.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.

Code

	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]+)([^\r\n])$/gim, function (m, d, c) {
	var ce = c;
	if (ce) {
	ce = ce.replace(/'/g, ''');
	ce = ce.replace(/"/g, '"');
	ce = "\|" + encodeURIComponent(ce);
	}
	switch (d) {
	case 'break':
	case 'case':
	case 'continue':
	case 'csrf':
	case 'else':
	case 'elseif':
	case 'empty':
	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
	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;
	}