- 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 Tailw
npm install @shufo/prettier-plugin-blade
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
``bash
$ npm install --save-dev @shufo/prettier-plugin-blade prettier
then, add in your Prettier configuration:
json
{
"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)
bash
$ ./node_modules/.bin/prettier --write resources/*/.blade.php
`https://user-images.githubusercontent.com/1641039/151354641-6305805e-8e0c-4226-8331-64195f85160e.mp4
Example
$3
blade
@extends('frontend.layouts.app')
@section('title') foo
@endsection
@section('content')
@lang('users.index')
@foreach($users as $user)
 }})
{{ link_to_route("frontend.users.user.show",$users["name"],$users['_id']) }}
@endforeach
@can('create', App\Models\User::class)
{!! link_to_route("frontend.users.user.create",__('users.create'),[1,2,3],['class' => 'btn']) !!}
@endcan
@endsection
@section('footer')
@stop
`$3
blade
@extends('frontend.layouts.app')
@section('title') foo
@endsection
@section('content')
@lang('users.index')
@foreach ($users as $user)
{{ link_to_route('frontend.users.user.show', $users['name'], $users['_id']) }}
@endforeach
@can('create', App\Models\User::class)
{!! link_to_route('frontend.users.user.create', __('users.create'), [1, 2, 3], ['class' => 'btn']) !!}
@endcan
@endsection
@section('footer')
@stop
`Options
You can use these options for prettier blade plugin in prettier CLI.
| key | description |
| ----------------------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
| 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 |$3
`json
{
"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"
}
`Disabling format in file
To disable formatting in your file, you can use blade/html comments in the following format:
blade
{{-- prettier-ignore-start --}}
{{ $foo }}
{{ $bar }}
{{-- prettier-ignore-end --}}or
{{ $foo }}
{{ $bar }}
`To disable formatting on a specific line, you can use comment in the following format:
blade
{{-- prettier-ignore --}}
{{ $foo }}or
{{ $foo }}
`Editor Integration
The editors below are confirmed to work with this plugin.
$3
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.
$3
You can use coc-prettier plugin on coc.nvim
If you want to use formater without Prettier, please consider to using coc-blade
$3
You can use the Prettier Plugin for JetBrains IDE.
Add extension setting
to File | Settings | Languages & Frameworks | JavaScript | Prettier | Run for files:e.g.
{*/,*}.{js,ts,jsx,tsx,blade.php}and turn on checkbox
Restart your IDE if you get the error: 'Prettier: File \*.php has unsupported type'
$3
The Prettier⁺ Extension has built-in support for plugin-blade.
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
blade
@if ($user)
@else
@endif
`⭕ Example of expected code
blade
@if ($user)
foo
@else
bar
@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
js
// CommonJS
const prettier = require("prettier");const input =
;const res = await prettier.format(input, { parser: "blade" });
console.log(res);
// =>
//
// @if ($user)
// {{ $foo }}
// @else
// {{ $bar }}
// @endif
//// ES Module
import * as prettier from "prettier";
const input =
;
const res = await prettier.format(input, { parser: "blade" });
console.log(res);
`Development
bash
$ yarn install
$ yarn run watch # watch changes
`Testing
bash
$ yarn install
$ yarn run test
`Contributing
1. Fork it
2. Create your feature branch (
)
3. Commit your changes (git commit -am 'Add some feature')
4. Push to the branch (git push origin my-new-feature`) Fisker Cheung |  Shuhei Hayashibara |  Beej |  Ian Jamieson |  Morten Scheel |  Nessim Abadi |
 Toni Förster |  Walter Purcaro |
MIT