Halloween DealsAmazon USHalloween week deals: useful picks before month-endAmazon US: current deals, useful picks and tech finds.Check DealsPC HealthRecommendedCrashes, freezes, slowdowns? Check your PC nowSpot repairable issues before they interrupt work.Check PCHalloween DealsAmazon USOctober picks are moving - compare before checkoutAmazon US: current deals, useful picks and tech finds.See Picks×
FREEDOM251

Freedom251 › Blog › Blade

How to Format Laravel Blade Templates Without Breaking Directive Layout

By Freedom251 Team · · 9 min read

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Laravel Blade files are harder to format than ordinary HTML because a .blade.php file contains two structures at once: HTML elements and Blade/PHP template syntax. A formatter must understand tags, attributes, directives such as @if and @foreach, echoed expressions, and the way those constructs nest. An HTML-only formatter may make the tags look tidy while leaving directive blocks misaligned.

The practical solution is to use a Blade-aware formatter and make the same configuration run in your editor, command line, and CI. Laravel Pint’s Blade support is opt-in; Prettier with a Blade plugin offers editor integrations; and the standalone blade-formatter package provides its own configuration and ignore files. Each approach has different dependency and edge-case trade-offs.

As an Amazon Associate I earn from qualifying purchases.

Why Blade formatting is a different problem from HTML formatting

Laravel’s view files commonly use the .blade.php extension. That extension signals that the file contains HTML plus Blade directives for output, conditions, loops, and other template behavior. For example:

Free tools Windows power users keep installed

One-click scans. No signup required.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
<section class="orders">
    @if ($orders->isNotEmpty())
        @foreach ($orders as $order)
            <article class="order">{{ $order->number }}</article>
        @endforeach
    @else
        <p>No orders found.</p>
    @endif
</section>

An HTML formatter sees the <section>, <article>, and <p> elements. It does not necessarily know that @if opens a control-flow block, that @else changes the active branch, or that @endif closes the block. A Blade-aware formatter has to reconcile both models and then decide indentation, line wrapping, and attribute layout.

This does not mean every HTML formatter fails on every Blade file. A formatter without suitable Blade parsing simply cannot be expected to format template constructs consistently. Problems become more visible when directives surround markup, when PHP expressions are embedded in attributes, or when one branch opens a tag that another branch closes.

What “formatting Blade” should cover

A useful setup should address more than spaces before a tag. Evaluate whether it can handle the following concerns:

  • Directive indentation: nested @if, @foreach, @isset, and matching closing directives should form a readable hierarchy.
  • HTML layout: tags, attributes, and long elements should follow one print-width and wrapping policy.
  • Embedded expressions: echo statements and PHP-bearing attributes should remain syntactically intact while being positioned consistently.
  • Optional class sorting: projects using Tailwind CSS may want utility classes reordered, but this should be an explicit policy rather than an accidental change.
  • Scope controls: the formatter should let you skip generated views, email templates, vendor content, or intentionally unusual snippets.
  • Automation: the same command and configuration should work locally and in CI so that developers do not receive different results from the build.

Laravel Pint: the native Laravel workflow

Laravel’s 13.x Pint documentation states that Blade formatting is disabled by default. To opt in for a project, enable the Pint/laravel_blade rule in pint.json. For a one-time run, use:

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
./vendor/bin/pint --blade

The Blade rule applies indentation, spacing, and attribute formatting. The documented implementation delegates template formatting to Prettier together with a Blade plugin and the Tailwind CSS plugin, so Node.js and the related Prettier dependencies must be available in the environment where Pint runs.

Persistent project configuration

Keep the Blade rule in the repository’s Pint configuration when Blade formatting is part of the project standard. A minimal rules section is conceptually:

{
    "rules": {
        "Pint/laravel_blade": true
    }
}

Merge that rule into your existing configuration rather than replacing other presets or rules. Commit the configuration and the JavaScript dependencies required by the documented implementation so another developer or CI runner does not silently use a different formatter.

One-time or selective runs

./vendor/bin/pint --blade is useful when you are introducing formatting to an existing codebase, checking the effect before committing configuration, or reformatting a controlled set of changes. Review the resulting diff before applying it broadly; a formatter can make many legitimate whitespace changes at once.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Files Pint skips

The Pint documentation says it automatically skips certain files, including email views under resources/views/emails and resources/views/mail. If an expected file does not change, check whether it falls under one of these documented exclusions before assuming the formatter is broken.

Prettier with a Blade parser

The Prettier Blade plugin provides a blade parser, formatting options, and integrations for several editors. Its README documents settings such as tab width, print width, and attribute wrapping. Install the plugin locally in the project and configure the editor to use that project installation; installing only a generic VS Code Prettier extension does not provide Blade parsing by itself.

A practical Prettier setup

  1. Add the formatter to the project. Install Prettier and the Blade plugin as development dependencies. If the project sorts Tailwind classes, add the Tailwind Prettier plugin as well.
  2. Create the configuration. Set the parser to blade and choose the project’s tab width, print width, and attribute-wrapping policy. Keep these values in version control.
  3. Configure the editor. Point the editor integration at the local project dependencies and enable format-on-save only after checking a representative group of templates.
  4. Add a repeatable command. Put the project’s chosen Prettier invocation in its package scripts or documented developer commands, then call the same command in CI.
  5. Check ignored regions. The plugin supports Blade or HTML comments to exclude selected code. Use those markers sparingly and document why a region must remain untouched.

The plugin documents integrations for VS Code, Vim, JetBrains IDEs, and Nova. The exact editor steps differ, but the principle is the same: the editor must load the local Blade plugin and the repository’s configuration, not a globally installed formatter with unknown defaults.

Standalone blade-formatter

A separate blade-formatter package is an alternative when you want a formatter dedicated to Blade rather than one reached through Pint. Its documented features include a .bladeformatterrc.json configuration file, a .bladeignore exclusion file, and integrations such as VS Code and coc.nvim.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Configuration areas

The project documents settings for indentation, attribute wrapping, maximum line length, Tailwind class sorting, PHP version, and whether PHP syntax should be checked. Treat the PHP-version setting as a real compatibility choice: templates containing syntax from a newer PHP release should be checked with a matching version rather than relying on a default.

Use .bladeignore for generated or intentionally nonstandard templates. An ignore file is safer than repeatedly reverting a formatter’s changes, because it records the exception for every developer and automation run.

Compatibility caution

The project’s own list mentions custom directives and @for support. That is a signal to verify support in the release you adopt before making broad claims about every directive. Test the directives your application actually uses, especially custom control-flow syntax.

PHP formatting is not the same as Blade parsing

A PHP formatter or Prettier PHP plugin can format standalone PHP files and, in some workflows, PHP fragments. That capability does not by itself establish support for Blade directives. Blade parsing must still recognize constructs such as @if, @else, @endif, interpolation, and directive-shaped attributes. Configure PHP-fragment formatting and Blade-template formatting as separate concerns, then verify that the tools do not fight over the same file.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Choosing between the documented approaches

Approach What it provides Dependencies and setup Important caveat
Laravel Pint with --blade or Pint/laravel_blade Blade formatting inside the Laravel Pint workflow, including indentation, spacing, and attribute formatting Pint plus Node.js and the documented Prettier, Blade, and Tailwind plugins Blade support is opt-in, and Pint skips some documented view locations
Prettier with the Blade plugin A Blade parser, print-width and wrapping controls, editor integrations, and optional ignored regions Local project installation and editor configuration for the local plugin Complex directive/tag structures can receive incorrect indentation
Standalone blade-formatter Blade-focused CLI/editor workflow, .bladeformatterrc.json, and .bladeignore Separate package and its documented configuration Check current release support for custom directives and less-common loop syntax

There is no source-backed accuracy or speed benchmark that justifies declaring one option universally best. Choose the tool that fits your existing Laravel or JavaScript workflow, then validate it against your own templates.

The edge case that causes the most confusing diffs

The Prettier Blade plugin warns about complex combinations in which opening and closing HTML tags interact across Blade branches. For example:

@if ($showPanel)
    <div class="panel">
@else
    <div class="panel panel--empty">
@endif
    <span>Content</span>
</div>

Here, the branches open different versions of a tag while the closing tag appears after the conditional. A formatter has to infer a structure that is not represented as one ordinary HTML tree. It may indent the result in a way that is technically formatted but misleading, or it may move text in an unexpected way. This is a documented edge case, not evidence that all Blade formatting is unreliable.

How to reduce the risk

  • Keep opening and closing tags within the same logical branch whenever practical.
  • Prefer complete, self-contained markup in each @if or @else branch.
  • Break large view fragments into components or partials when a conditional spans several levels of markup.
  • Run the formatter on a small group first and inspect the diff, including the rendered page and any affected JavaScript hooks.
  • Pin the formatter versions used by local development and CI so that a dependency update does not produce a surprise reformat.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Support on Ko-Fi

A reliable rollout procedure for an existing project

  1. Inventory the templates. Include ordinary views, components, layouts, email views, and files containing custom directives. Note locations that a tool may skip.
  2. Select one formatter path. Decide whether Pint should own the command, whether Prettier should be called directly, or whether a standalone Blade formatter better matches the team’s workflow.
  3. Install all required runtimes. For Pint’s documented Blade path, verify Node.js and the required Prettier plugins. For a standalone package, install its documented dependencies and editor integration.
  4. Set a conservative print width. Match the project’s existing convention first. Changing width, indentation, and class sorting simultaneously makes review harder.
  5. Format representative files. Include nested loops, conditionals, component attributes, long attribute lists, echoed expressions, and any custom directives.
  6. Review the diff manually. Look for changed directive nesting, altered quoted expressions, moved attributes, and tags that cross branches. Formatting must not change template behavior.
  7. Exclude deliberate exceptions. Use Pint’s documented skips, Prettier ignore comments, or .bladeignore where a generated or unusual file should remain stable.
  8. Automate only after agreement. Add the chosen command to CI and document the editor setup. A check-only CI job can reject unformatted changes without rewriting a contributor’s branch.

Troubleshooting common failures

Blade directives remain unindented

Confirm that the file is being parsed as Blade rather than HTML or plain PHP. With Pint, check that --blade was supplied or that Pint/laravel_blade is enabled. With Prettier, verify that the local Blade plugin is installed and that the parser is set to blade.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

The command works locally but fails in CI

Compare Node.js versions, installed development dependencies, formatter versions, and the working directory. CI must install the same local plugins and read the same configuration committed to the repository. Do not rely on a globally installed editor extension.

Only some files change

Check path exclusions first. Pint documents skipped email-view directories; other tools may apply .bladeignore, ignore comments, or editor-specific glob patterns. Then verify that the files actually use the extension and parser the command targets.

Formatting changes a complex conditional unexpectedly

Inspect whether tags open in one branch and close in another. Refactor the markup so each branch contains a complete structure, split the view into components, or exclude the exceptional region with the formatter’s documented ignore mechanism. Always review the rendered result after a structural reformat.

Recommended policy for teams

Define one canonical command, one configuration file, and one owner for Blade formatting. Decide whether Tailwind class sorting is enabled, which PHP version templates target, which paths are excluded, and whether CI checks or rewrites files. Record the editor integration steps next to the command so new contributors do not accidentally use HTML-only formatting.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Most importantly, treat formatting as a reviewable code change. Blade-aware tools solve the central parsing problem, but no formatter can infer every unconventional relationship between directives and tags. Consistent configuration, simple template structure, and deliberate diff review provide the reliability that a formatter alone cannot guarantee.

Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.

BladeCode FormattingLaravelLaravel PintPHPPrettier

Leave a Reply

Your email address will not be published. Required fields are marked *

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Recommended PC Tool
Recommended PC Tool
PC Slower Than It Used to Be?Free scan - under a minute
Crashes, No Sound, or Screen Glitches?Free driver scan

Two free Windows tools

One Free Minute Could Fix That PC

Before you go - each of these free tools takes about a minute and tackles what quietly slows a Windows PC down.

Special offer. View Outbyte info, uninstall instructions, EULA, and Privacy Policy.