Format your blade template using Prettier
- Automatically Indents markup inside directives
- Automatically add spacing to blade templating 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$ ./node_modules/.bin/prettier --write resources/**/*.blade.phpIf you get something error like can not find plugins, update your .prettierrc.json file to specify parser:
{
"overrides": [
{
"files": ["*.blade.php"],
"options": {
"tabWidth": 4,
"parser": "blade"
}
}
]
}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')
@stopYou 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 |
--end-with-new-line |
End output with newline. default: true |
--sort-tailwindcss-classes |
Sort Tailwind CSS classes. It will automatically lookup and respects tailwind.config.js if exists. default: false |
--tailwindcss-config-path |
Path to custom Tailwind config. This option is available only when --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 |
{
"printWidth": 120,
"tabWidth": 4,
"wrapAttributes": "auto",
"sortTailwindcssClasses": true,
"sortHtmlAttributes": "none",
"noPhpSyntaxCheck": false
}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 format on a specific line, you can use comment in the following format:
{{-- prettier-ignore --}}
{{ $foo }}
or
<!-- prettier-ignore -->
{{ $foo }}Below editors are confirmed working with this plugin.
You can use Prettier extension for VSCode to format blade within VSCode. You must install this plugin as local dependencies. see https://github.com/prettier/prettier-vscode#prettier-resolution
If you want to use formatter without Prettier, please consider to using vscode-blade-formatter
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 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 error: 'Prettier: File *.php has unsupported type'
This plugin is based on blade-formatter that does not generate ASTs with lexer, so it might be 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>
@endifPlease make blade template as simple as possible for better formatting.
You can format blade text programmatically using prettier
const prettier = require("prettier");
const input = `
<div>
@if ($user)
{{ $foo }}
@else
{{ $bar }}
@endif
</div>
`;
const res = prettier.format(input, { parser: "blade" });
console.log(res);
// =>
//<div>
// @if ($user)
// {{ $foo }}
// @else
// {{ $bar }}
// @endif
//</div>$ yarn install
$ yarn run watch # watch changes$ yarn install
$ yarn 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
Shuhei Hayashibara |
Beej |
Ian Jamieson |
MIT