blade-formatter
An opinionated blade template formatter for Laravel that respects readability
Features
-
Automatically Indents markup inside directives
-
Automatically add spacing to blade templating markers
-
PHP 8 support (null safe operator, named arguments)
🐘 
-
PSR-2 support (format inside directives)
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
Installation
$ npm install --save-dev blade-formatter
$ node_modules/.bin/blade-formatter -h
yarn
$ yarn add --dev blade-formatter
global
$ npm install -g blade-formatter
$ yarn global add blade-formatter
docker
$ docker run -it -v $(pwd):/app -w /app shufo/blade-formatter resources/**/*.blade.php
Usage
- Basic
# This outputs formatted result to stdout
$ blade-formatter resources/**/*.blade.php
$ blade-formatter resources/layouts/app.blade.php
- Check if template is formatted or not (makes no change)
$ blade-formatter app/** -d -c
Check formatting...
app/index.blade.php
Above file(s) are formattable. Forgot to run formatter? Use --write option to overwrite.
$ echo $?
1
- Format files and overwrite
$ blade-formatter --write resources/**/*.blade.php
- Show diffs
$ blade-formatter -c -d resources/**/*.blade.php
Options
| option | description | default |
|---|---|---|
--check-formatted, -c |
Only check files are formatted or not. Exit with exit code 1 if files are not formatted | false |
--write, --w |
Write to file | false |
--diff, -d |
Show differences | false |
--indent-size, -i |
Indentation size | 4 |
--wrap-line-length, --wrap |
The length of line wrap size | 120 |
--wrap-attributes, --wrap-atts |
The way to wrap attributes. [auto|force|force-aligned|force-expand-multiline|aligned-multiple|preserve|preserve-aligned] |
auto |
--end-with-newline, -e |
End output with newline | true |
--stdin |
format code provided on <STDIN> |
false |
--help, -h |
Show help | |
--version, -v |
Show version |
Ignore Files
To ignore specific file, put .bladeignore to your repository root will blade-formatter treat it as ignored files.
e.g.
resources/views/users/index.blade.php
resources/views/products/*
resources/views/books/**/*
API
You can use blade formatter by API as well.
require = require('esm')(module);
const { BladeFormatter } = require('blade-formatter');
const input = `
<html>
<body>
<p>foo</p>
</body>
</html>
`;
const options = {
indentSize: 2,
};
new BladeFormatter(options).format(input).then((formatted) => {
console.log(formatted);
});
Extensions
- vscode-blade-formatter - VSCode Extension
- coc-blade - coc.nvim Extension by @yaegassy
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
LICENSE
MIT
Troubleshoot
- If you encounter the error until installation like below
$ npm install -g blade-formatter
~~
current user ("nobody") does not have permission to access the dev dir
~~
Try set global user as root
$ npm -g config set user root
TODO
- Editable custom directives
-
@fordirective support - ignore formatting in blade comment
Contributors
 Shuhei Hayashibara |
 SlovenianGooner |
 Schelmo |
 Yaegassy |
 Dian Fishekqi |
 Jumpei Tanaka |
![[Feature Request] Format classes in the @class directive](https://avatars.githubusercontent.com/u/36386967?v=4)
18 Dec 4, 2022
17 Oct 5, 2022
12 Dec 5, 2022
1.2k Jan 5, 2023
5 Oct 15, 2021
59 Dec 5, 2022
97 Oct 1, 2022
113 Jan 3, 2023
13 May 16, 2022
16 Nov 30, 2022
3 Apr 14, 2021
157 Nov 24, 2022
16 Jul 17, 2022
1.1k Jan 4, 2023
19 Jul 5, 2021
17 Aug 25, 2022
12 Jan 17, 2022
7 Nov 23, 2022