An opinionated blade template formatter for Laravel
npm install @intelrug/blade-formatter
!NPM
An opinionated blade template formatter for Laravel that respects readability
This project aims to provide formatter for blade template because there is no official blade template formatter.
- 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)
!blade-formatter-format-in-directive
- Automatic Tailwind CSS Class Sorting. see Options
`` @lang('users.index')blade`
@extends('frontend.layouts.app')
@section('title') foo
@endsection
@section('content')
@foreach($users as $user)
 }}){kind=icon}
{{ 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
` @lang('users.index')blade`
@extends('frontend.layouts.app')
@section('title') foo
@endsection
@section('content')
@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
`
$ npm install --save-dev blade-formatter
$ node_modules/.bin/blade-formatter -h
yarn
`bash`
$ yarn add --dev blade-formatter
global
`bash`
$ npm install -g blade-formatter
$ yarn global add blade-formatter
docker
`bash`
$ docker run -it -v $(pwd):/app -w /app shufo/blade-formatter resources/*/.blade.php
- Basic
`bash`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)
`bash
$ 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
`bash`
$ blade-formatter --write resources/*/.blade.php
- Show diffs
`bash`
$ blade-formatter -c -d resources/*/.blade.php
| 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 |--sort-tailwindcss-classes
| , --sort-classes | Sort Tailwindcss classes automatically. This option respects tailwind.config.js and sort classes according to settings. | false |--end-with-newline
| , -e | End output with newline | true |--stdin
| | format code provided on | false |--help
| , -h | Show help | |--version
| , -v | Show version | |
To configuring project wide settings, put .bladeformatterrc.json or .bladeformatterrc to your repository root will blade-formatter treat it as setting files.
e.g.
`json`
{
"indentSize": 4,
"wrapAttributes": "auto",
"wrapLineLength": 120,
"endWithNewLine": true,
"useTabs": false,
"sortTailwindcssClasses": true
}
blade-formatter will searches up the directory structure until reaching root directory.
To ignore specific file, put .bladeignore to your repository root will blade-formatter treat it as ignored files.
e.g.
`gitignore`
resources/views/users/index.blade.php
resources/views/products/*
resources/views/books/*/
To disable formatting in your file, you can use blade comments in the following format:
`blade`
{{-- blade-formatter-disable --}}
{{ $foo }}
{{ $bar }}
{{-- blade-formatter-enable --}}
To disable format on a specific line, you can use comment in the following format:
`blade`
{{-- blade-formatter-disable-next-line --}}
{{ $foo }}
To disable format in an entire file, put a {{-- blade-formatter-disable --}} comment at the top of the file:
`blade
{{-- blade-formatter-disable --}}
{{ $foo }}
`
You can use blade formatter by API as well.
`js
const { BladeFormatter } = require('blade-formatter');
const input =
foo
;const options = {
indentSize: 4,
wrapAttributes: "auto",
wrapLineLength: 120,
endWithNewLine: true,
useTabs: false,
sortTailwindcssClasses: true,
};
new BladeFormatter(options).format(input).then((formatted) => {
console.log(formatted);
});
`$3
js
import BladeFormatter from "blade-formatter";
const { Formatter } = BladeFormatter;const input =
foo
;const options = {
indentSize: 2,
};
new Formatter(options).formatContent(input).then((formatted) => {
console.log(formatted);
});
`Extensions
- vscode-blade-formatter - VSCode Extension
- coc-blade - coc.nvim Extension by @yaegassy
- prettier-plugin-blade - Prettier plugin for Blade
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
- [x]
directive support
- [x] ignore formatting in blade comment
- [x] automatically add new line after directiveDevelopment
`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`) Shuhei Hayashibara |  SlovenianGooner |  Yaegassy |  Dian Fishekqi |  Schelmo |  Jumpei Tanaka |
MIT