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"
tofiles.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 treatblade
format as HTML by addingblade
tohtml
list of thebeautify.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.
approve it to js-beautify