Format your blade template using Prettier
- Automatically indent markup inside directives
- Automatically add spacing to blade template markers
- PHP 8 syntax support (null safe operator, named arguments)
- Compliant to PSR-2 coding standard (PHP code inside directives)
- Automatically sort Tailwind CSS classes with respect of
tailwind.config.js
$ npm install --save-dev @shufo/prettier-plugin-blade prettier # yarn $ yarn add -D @shufo/prettier-plugin-blade prettier # pnpm $ pnpm add -D @shufo/prettier-plugin-blade prettier
then, add in your Prettier configuration:
{
"plugins": ["@shufo/prettier-plugin-blade"],
"overrides": [
{
"files": ["*.blade.php"],
"options": {
"parser": "blade",
"tabWidth": 4
}
}
]
}| Prettier | Package |
|---|---|
| 3.x | ^1.9.x |
| 2.x | 1.8.x |
$ ./node_modules/.bin/prettier --write resources/**/*.blade.php
Screen.record.from.2022-01-27.20.53.05@2x_0.5.mp4
@extends('frontend.layouts.app') @section('title') foo @endsection @section('content') <section id="content"> <div class="container mod-users-pd-h"> <div class="pf-user-header"> <div></div> <p>@lang('users.index')</p> </div> <div class="pf-users-branch"> <ul class="pf-users-branch__list"> @foreach($users as $user) <li> <img src="{{ asset('img/frontend/icon/branch-arrow.svg') }}" alt="branch_arrow"> {{ link_to_route("frontend.users.user.show",$users["name"],$users['_id']) }} </li> @endforeach </ul> <div class="pf-users-branch__btn"> @can('create', App\Models\User::class) {!! link_to_route("frontend.users.user.create",__('users.create'),[1,2,3],['class' => 'btn']) !!} @endcan </div> </div> </div> </section> @endsection @section('footer') @stop
@extends('frontend.layouts.app') @section('title') foo @endsection @section('content') <section id="content"> <div class="container mod-users-pd-h"> <div class="pf-user-header"> <div></div> <p>@lang('users.index')</p> </div> <div class="pf-users-branch"> <ul class="pf-users-branch__list"> @foreach ($users as $user) <li> <img src="{{ asset('img/frontend/icon/branch-arrow.svg') }}" alt="branch_arrow"> {{ link_to_route('frontend.users.user.show', $users['name'], $users['_id']) }} </li> @endforeach </ul> <div class="pf-users-branch__btn"> @can('create', App\Models\User::class) {!! link_to_route('frontend.users.user.create', __('users.create'), [1, 2, 3], ['class' => 'btn']) !!} @endcan </div> </div> </div> </section> @endsection @section('footer') @stop
You can use these options for prettier blade plugin in prettier CLI.
| key | description |
|---|---|
--tab-width |
Number of spaces per indentation level. default: 4 |
--print-width |
The line length where Prettier will try wrap. default: 120 |
--wrap-attributes |
The way to wrap attributes. [auto|force|force-aligned|force-expand-multiline|aligned-multiple|preserve|preserve-aligned]. default: auto |
--wrap-attributes-min-attrs |
Minimum number of html tag attributes for force wrap attribute options. Wrap the first attribute only if 'force-expand-multiline' is specified in wrap attributes. default: 2. |
--end-with-new-line |
End output with newline. default: true |
--sort-tailwindcss-classes |
Sort Tailwind CSS classes. It will automatically look for and respect tailwind.config.js if it exists. default: false |
--tailwindcss-config-path |
Path to your custom Tailwind configuration file. This option is only available if --sort-tailwindcss-classes is present. default: '' |
--sort-html-attributes |
Sort HTML Attributes in the specified order. [none | alphabetical | code-guide | idiomatic | vuejs] default: none |
--no-php-syntax-check |
Disable PHP syntax checking. default: false |
--extra-liners |
Comma separated list of tags that should have an extra newline before them. default: head,body,/html |
--trailing-comma-php |
If set to false, no trailing commas are printed for php expression. default: true |
--component-prefix |
Comma separated list of component prefix use to preserve style in html attributes. default: x-,livewire: |
--php-version |
The version of PHP to use for formatting. default: 8.4 |
{
"printWidth": 120,
"tabWidth": 4,
"wrapAttributes": "auto",
"wrapAttributesMinAttrs": 2,
"sortTailwindcssClasses": true,
"sortHtmlAttributes": "none",
"noPhpSyntaxCheck": false,
"indentInnerHtml": true,
"extraLiners": "",
"trailingCommaPHP": true,
"componentPrefix": "x-,livewire:",
"phpVersion": "8.4"
}To disable formatting in your file, you can use blade/html comments in the following format:
{{-- prettier-ignore-start --}} {{ $foo }} {{ $bar }} {{-- prettier-ignore-end --}} or <!-- prettier-ignore-start --> {{ $foo }} {{ $bar }} <!-- prettier-ignore-end -->
To disable formatting on a specific line, you can use comment in the following format:
{{-- prettier-ignore --}} {{ $foo }} or <!-- prettier-ignore --> {{ $foo }}
The editors below are confirmed to work with this plugin.
You can use Prettier extension for VSCode to format blade in VSCode. You need to install this plugin as a local dependency. see https://github.com/prettier/prettier-vscode#prettier-resolution
If you want to use a formatter without Prettier, please consider to use the vscode-blade-formatter instead.
You can use coc-prettier plugin on coc.nvim
If you want to use formater without Prettier, please consider to using coc-blade
You can use the Prettier Plugin for JetBrains IDE.
Add extension setting blade.php to File | Settings | Languages & Frameworks | JavaScript | Prettier | Run for files:
e.g.
{**/*,*}.{js,ts,jsx,tsx,blade.php}
and turn on checkbox On 'Reformat Code' action
Restart your IDE if you get the error: 'Prettier: File *.php has unsupported type'
The Prettier⁺ Extension has built-in support for plugin-blade.
This plugin is based on blade-formatter which does not generate ASTs with lexer, so it might break indentation on complex blade.
Like:
- The mix of open/closed HTML tag and directives
❌ Example of unexpected code
@if ($user) <div> @else </div> @endif
⭕ Example of expected code
@if ($user) <div>foo</div> @else <div>bar</div> @endif
Please keep the blade template as simple as possible for better formatting.
You can format the blade file programmatically using Prettier's API
// CommonJS const prettier = require("prettier"); const input = ` <div> @if ($user) {{ $foo }} @else {{ $bar }} @endif </div> `; const res = await prettier.format(input, { parser: "blade" }); console.log(res); // => //<div> // @if ($user) // {{ $foo }} // @else // {{ $bar }} // @endif //</div> // ES Module import * as prettier from "prettier"; const input = ` <div> @if ($user) {{ $foo }} @else {{ $bar }} @endif </div> `; const res = await prettier.format(input, { parser: "blade" }); console.log(res);
$ npm install
$ npm run watch # watch changes$ npm install
$ npm run test- Fork it
- Create your feature branch (
git checkout -b my-new-feature) - Commit your changes (
git commit -am 'Add some feature') - Push to the branch (
git push origin my-new-feature) - Create new Pull Request
|
Fisker Cheung |
Shuhei Hayashibara |
Beej |
Ian Jamieson |
Morten Scheel |
Nessim Abadi |
|
Toni Förster |
Walter Purcaro |
MIT