Home

Awesome

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

vscode-blade-formatter

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.

Features

Screencast

Screencast

Extension Settings

settingdescriptiondefault
Blade Formatter: format EnabledWhether it enables or nottrue
Blade Formatter: format Indent SizeAn indent size4
Blade Formatter: format Wrap Line LengthThe length of line wrap size120
Blade Formatter: format Wrap AttributesThe way to wrap attributes. [auto|force|force-aligned|force-expand-multiline|aligned-multiple|preserve|preserve-aligned]auto
Blade Formatter: format Wrap Attributes Min AttrsMinimum number of html tag attributes for force wrap attribute options. Wrap the first attribute only if force-expand-multiline is specified in wrap attributes2
Blade Formatter: format Sort Tailwind Css ClassesSort Tailwind CSS classes automaticallyfalse
Blade Formatter: format Sort HTML AttributesSort HTML Attributes in the specified order. [none | alphabetical | code-guide | idiomatic | vuejs]none
Blade Formatter: format Indent Inner HtmlIndent <head> and <body> sections in html.false
Blade Formatter: format use TabsUse tab as indentation characterfalse
Blade Formatter: format Custom Html Attributes OrderComma 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 LinesCollapses multiple blank lines into a single blank line.false
Blade Formatter: format No PHP Syntax CheckDisable PHP Syntax check. Enabling this will suppress syntax error reporing.""
Blade Formatter: format No Single QuoteUse double quotes instead of single quotes for php expression.false
Blade Formatter: Dont Show New Version MessageIf 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",
    "wrapAttributesMinAttrs": 2,
    "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
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 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 }}

TODO

Release Notes

see CHANGELOG.md

Related Projects

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

Sponsors

Contributors

<!-- readme: collaborators,contributors -start --> <table> <tr> <td align="center"> <a href="https://github.com/shufo"> <img src="https://avatars.githubusercontent.com/u/1641039?v=4" width="100;" alt="shufo"/> <br /> <sub><b>Shuhei Hayashibara</b></sub> </a> </td> <td align="center"> <a href="https://github.com/slovenianGooner"> <img src="https://avatars.githubusercontent.com/u/1257629?v=4" width="100;" alt="slovenianGooner"/> <br /> <sub><b>SlovenianGooner</b></sub> </a> </td> <td align="center"> <a href="https://github.com/yaegassy"> <img src="https://avatars.githubusercontent.com/u/188642?v=4" width="100;" alt="yaegassy"/> <br /> <sub><b>Yaegassy</b></sub> </a> </td> <td align="center"> <a href="https://github.com/notdian"> <img src="https://avatars.githubusercontent.com/u/4225509?v=4" width="100;" alt="notdian"/> <br /> <sub><b>Null</b></sub> </a> </td> <td align="center"> <a href="https://github.com/1cbyc"> <img src="https://avatars.githubusercontent.com/u/35623334?v=4" width="100;" alt="1cbyc"/> <br /> <sub><b>Isaac Emmanuel</b></sub> </a> </td> <td align="center"> <a href="https://github.com/j3j5"> <img src="https://avatars.githubusercontent.com/u/1239921?v=4" width="100;" alt="j3j5"/> <br /> <sub><b>Julio J. Foulquie</b></sub> </a> </td></tr> </table> <!-- readme: collaborators,contributors -end -->

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.