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)
$ 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.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 |
--end-with-new-line |
End output with newline. default: true |
{
"printWidth": 120,
"tabWidth": 4,
"wrapAttributes": "auto"
}
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
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>
@endif
- Multiline expression
blade-formatter is line based formatter so multiline expression often causes unexpected behaviour.
❌ Example of unexpected code
<div>
@php
$myvar = "lorem
ipsum";
@endphp
</div>
⭕ Example of expected code
<div>
@php
$myvar = "lorem\nipsum";
@endphp
</div>
Please 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>
- 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
MIT