vscode-blade-formatter

An opinionated Blade file formatter for VSCode. Marketplace page is here.

You can also format by same syntax programmatically with blade-formatter that this extension relies on.

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)
• Automatically sort Tailwind CSS classes with respect of tailwind.config.js

Screencast

Extension Settings

setting	description	default
Blade Formatter: format Enabled	Whether it enables or not	true
Blade Formatter: format Indent Size	An indent size	4
Blade Formatter: format Wrap Line Length	The length of line wrap size	120
Blade Formatter: format Wrap Attributes	The way to wrap attributes. [auto|force|force-aligned|force-expand-multiline|aligned-multiple|preserve|preserve-aligned]	auto
Blade Formatter: format use Tabs	Use tab as indentation character	false
Blade Formatter: format Sort Tailwind Css Classes	Sort Tailwind CSS classes automatically	false
Blade Formatter: Dont Show New Version Message	If set to 'true', the new version message won't be shown anymore.	false

Configuration file: .bladeformatterrc.json or .bladeformatterrc

To configure settings per project, put .bladeformatterrc.json or .bladeformatterrc to your project root will vscode-blade-formatter treat it as setting files.

Configuration file will like below:

{
    "indentSize": 4,
    "wrapAttributes": "auto",
    "wrapLineLength": 120,
    "endWithNewLine": true,
    "useTabs": false,
    "sortTailwindcssClasses": true
}

Ignoring Files: .bladeignore

To exclude files from formatting, create .bladeignore file in the root of your project .bladeignore uses gitignore syntax

# Ignore email templates
resources/views/email/**

Disabling format in file

To disable formatting in your file, you can use blade comments in the following format:

{{-- blade-formatter-disable --}}
    {{ $foo }}
    {{ $bar }}
{{-- blade-formatter-enable --}}

To disable format on a specific line, you can use comment in the following format:

{{-- 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-formatter-disable --}}

{{ $foo }}

TODO

• Add more option for HTML formatting rules
• Add option for PHP formatting rules
• Automate package publishing flow
• Integration test

Release Notes

see CHANGELOG.md

Related Projects

• blade-formatter - CLI blade formatter this extension relies on
• prettier-plugin-blade - Prettier plugin for Blade
• coc-blade - coc.nvim Extension by @yaegassy

Contributing

1. Fork it
2. Create your feature branch (git checkout -b my-new-feature)
3. Commit your changes (git commit -am 'Add some feature')
4. Push to the branch (git push origin my-new-feature)
5. Create new Pull Request

Development

$ yarn install
$ cp .env.example .env # set your app insight key
$ yarn run watch # watch changes

Testing

$ yarn install
$ cp .env.example .env # set your app insight key
$ yarn run compile
$ yarn run test

Contributors

Shuhei Hayashibara

SlovenianGooner

Yaegassy

Dian Fishekqi

Julio J. Foulquie

LICENSE

MIT

Data and telemetry

This extension collects usage data and sends it to Azure Application Insight to improve extension. This extension respects the telemetry.enableTelemetry setting.

To opt out, please set the telemetry.enableTelemetry setting to false. Learn more in FAQ.