Automatic Blade Formatting on Save in PhpStorm

PhpStorm has good automatic formatting of PHP files based on standards like PSR-2, PSR-12, Symfony, Laravel, etc.; however, there have not been a lot of options for consistently formatting blade files in PhpStorm until recently. There are whispers of Blade formatting coming to Laravel Pint, but another interesting option is using the JavaScript's Prettier code formatting tool with the prettier-plugin-blade plugin.

Matt Stauffer's article How to set up Prettier On a Laravel App, Linting Tailwind Class Order and More is an excellent primer to formatting Tailwind and Blade using Prettier.

Here's the gist of the Prettier configuration file:

{
  "plugins": ["prettier-plugin-blade", "prettier-plugin-tailwindcss"],
  "overrides": [
    {
      "files": [
        "*.blade.php"
      ],
      "options": {
        "parser": "blade"
      }
    }
  ]
}

Once you have configured Prettier, you can quickly set up formatting on save in PhpStorm by navigating to Languages & Frameworks > JavaScript > Prettier. Update your settings to reflect the following:

Specifically, you'll want to add blade.php to the "Run for files" pattern. The full pattern should be: **/*.{js,ts,jsx,tsx,vue,astro,blade.php}. Make sure that "Run on save" is checked, and now Blade files will be automatically formatted. If you've enabled the prettier-plugin-tailwindcss plugin, Tailwind classes will be sorted as well!

If you want to reformat code manually, you can also use the "Reformat Code" action (the shortcut for me is Alt+Super+l) to format any file using the configured formatter.

Related: Jeffrey Way's PhpStorm Setup in 2024