Vscode Blade Formatter

An opinionated Blade file formatter for VSCode
Alternatives To Vscode Blade Formatter
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Vscode Blade Formatter3,327
3 days ago26mitTypeScript
An opinionated Blade file formatter for VSCode
Vscode Laravel Extra Intellisense2,667
a month ago18mitTypeScript
This extension adds extra autocompletion for laravel projects to VSCode.
Blade Formatter37523 days ago134July 12, 202220mitTypeScript
An opinionated blade template formatter for Laravel that respects readability
Laravel Blade Snippets Vscode11626 months ago1October 13, 202061mitTypeScript
Laravel blade snippets and syntax highlight support for Visual Studio Code
Laravel Extension Pack Vscode26
3 months ago1mit
A collection of extensions for Laravel development in Visual Studio Code
Rainbow Color Theme9
8 months agomit
Rainbow color theme for Visual Studio Code
Bannerlord Module Template8
a month agomitPowerShell
Template of a module for Mount & Blade II Bannerlord.
Laravel Vue Cli7
5 years agoNovember 30, 2020mitPHP
Laravel Preset for Vue Cli
Vscode Blade Spacer5
2 years ago1TypeScript
Laravel Blade Spacer plugin for VSCode
Laravel Blade Vscode2
a year ago7mitTypeScript
Laravel Blade Snippets & Highlighter support Visual Studio Code
Alternatives To Vscode Blade Formatter
Select To Compare

Alternative Project Comparisons

CI Visual Studio Marketplace Installs Visual Studio Marketplace Downloads Visual Studio Marketplace Version Visual Studio Marketplace Rating


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

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


  • Automatically indent markup inside directives
  • Automatically add spacing to blade template 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



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 Sort Tailwind Css Classes Sort Tailwind CSS classes automatically false
Blade Formatter: format Sort HTML Attributes Sort HTML Attributes in the specified order. [none | alphabetical | code-guide | idiomatic | vuejs] none
Blade Formatter: format Indent Inner Html Indent <head> and <body> sections in html. false
Blade Formatter: format use Tabs Use tab as indentation character false
Blade Formatter: format Custom Html Attributes Order Comma separated custom HTML attributes order. e.g. id, data-.+, class, name. To enable this you must specify sort html attributes option as custom. You can use regex for attribute names. none
Blade Formatter: format No Multiple Empty Lines Collapses multiple blank lines into a single blank line. false
Blade Formatter: format No PHP Syntax Check Disable PHP Syntax check. Enabling this will suppress syntax error reporing. ""
Blade Formatter: format No Single Quote Use double quotes instead of single quotes for php expression. 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,
    "noMultipleEmptyLines": false,
    "useTabs": false,
    "sortTailwindcssClasses": true,
    "sortHtmlAttributes": "none",
    "noPhpSyntaxCheck": false,
    "noSingleQuote": false

Ignoring Files: .bladeignore

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

# Ignore email templates

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 formatting on a specific line, you can use comment in the following format:

{{-- blade-formatter-disable-next-line --}}
    {{ $foo }}

To disable formatting for an entire file, put a {{-- blade-formatter-disable --}} comment at the beginning of the file:

{{-- blade-formatter-disable --}}

{{ $foo }}


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

Release Notes


Related Projects


  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


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


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



Shuhei Hayashibara
Isaac Emmanuel
Julio J. Foulquie



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.

Popular Vscode Projects
Popular Blade Projects
Popular Integrated Development Environments Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
Vscode Extension