shufo
Prettier Blade Plugin
Format your blade template using Prettier
Features
- 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
Installation
$ 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 version Compatibilitiy
| Prettier | Package |
|---|---|
| 3.x | ^1.9.x |
| 2.x | 1.8.x |
Usage (CLI)
$ ./node_modules/.bin/prettier --write resources/**/*.blade.php
https://user-images.githubusercontent.com/1641039/151354641-6305805e-8e0c-4226-8331-64195f85160e.mp4
Example
Input
@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
Output
@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
Options
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: |
.prettierrc example
{
"printWidth": 120,
"tabWidth": 4,
"wrapAttributes": "auto",
"wrapAttributesMinAttrs": 2,
"sortTailwindcssClasses": true,
"sortHtmlAttributes": "none",
"noPhpSyntaxCheck": false,
"indentInnerHtml": true,
"extraLiners": "",
"trailingCommaPHP": true,
"componentPrefix": "x-,livewire:"
}
Disabling format in file
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 }}
Editor Integration
The editors below are confirmed to work with this plugin.
VSCode
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.
Vim
You can use coc-prettier plugin on coc.nvim
If you want to use formater without Prettier, please consider to using coc-blade
JetBrains WebStorm, PHPStorm, PyCharm...
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'
Limitation
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.
API
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);
Development
$ yarn install
$ yarn run watch # watch changes
Testing
$ yarn install
$ yarn run test
Contributing
- 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
Contributors
Shuhei Hayashibara |
Beej |
Ian Jamieson |
Morten Scheel |
Nessim Abadi |
Walter Purcaro |
LICENSE
MIT