Visual Studio Code is a wonderful editor and recently became my primary web development tool. I am developing using Laravel framework and there are many good extensions for Laravel and PHP in general. I configured PHP CS Fixer as my PHP formatter and Beautify as SASS/CSS, JavaScript and HTML formatter.

The only missing part was formatting Blade templates.

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

  1. 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`.
  2. Edit js/lib/beautify-html.js and add the code from the gist.
  3. 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"
]
  4. Restart VS Code.
  5. IMPORTANT: Every time when VS Code is updated, check whether the fix is still in place and re-apply if needed.

Code

Michael Ryvkin

Freelance web developer based in Perkasie, Bucks County, PA. I design and develop custom websites and web applications, perform website maintenance and provide technical support for small and medium-sized businesses.

Contact me for a free quote or consultation on your project.