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 prettierthen, 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.phpScreen.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 |
--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 |
{
"printWidth": 120,
"tabWidth": 4,
"wrapAttributes": "auto",
"wrapAttributesMinAttrs": 2,
"sortTailwindcssClasses": true,
"sortHtmlAttributes": "none",
"noPhpSyntaxCheck": false,
"indentInnerHtml": true,
"extraLiners": "",
"trailingCommaPHP": true
}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'
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>
@endifPlease 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);$ 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 |
Morten Scheel |
Nessim Abadi |
Walter Purcaro |
MIT
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "github-actions[bot]")
![renovate[bot] avatar](https://avatars.githubusercontent.com/in/2740?v=4 "renovate[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent