{"id":14984145,"url":"https://github.com/shufo/prettier-plugin-blade","last_synced_at":"2025-04-13T18:38:08.419Z","repository":{"id":37015366,"uuid":"452482858","full_name":"shufo/prettier-plugin-blade","owner":"shufo","description":"Format your blade template using Prettier","archived":false,"fork":false,"pushed_at":"2025-03-03T01:32:25.000Z","size":1158,"stargazers_count":351,"open_issues_count":8,"forks_count":8,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-04-06T16:07:02.486Z","etag":null,"topics":["blade","formatter","laravel","prettier","tailwind"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@shufo/prettier-plugin-blade","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/shufo.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"shufo","patreon":"shufo","open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"lfx_crowdfunding":null,"custom":null}},"created_at":"2022-01-27T00:08:23.000Z","updated_at":"2025-04-05T21:23:08.000Z","dependencies_parsed_at":"2024-01-17T07:46:28.724Z","dependency_job_id":"b562a701-075a-455d-b535-e9c5516279eb","html_url":"https://github.com/shufo/prettier-plugin-blade","commit_stats":{"total_commits":511,"total_committers":11,"mean_commits":46.45454545454545,"dds":0.3522504892367906,"last_synced_commit":"b659ffefcadab5fdf30b62fcc2afe95a88b36452"},"previous_names":[],"tags_count":113,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shufo%2Fprettier-plugin-blade","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shufo%2Fprettier-plugin-blade/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shufo%2Fprettier-plugin-blade/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shufo%2Fprettier-plugin-blade/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shufo","download_url":"https://codeload.github.com/shufo/prettier-plugin-blade/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248762667,"owners_count":21157767,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["blade","formatter","laravel","prettier","tailwind"],"created_at":"2024-09-24T14:08:32.704Z","updated_at":"2025-04-13T18:38:08.396Z","avatar_url":"https://github.com/shufo.png","language":"TypeScript","funding_links":["https://github.com/sponsors/shufo","https://patreon.com/shufo"],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\u003cimg alt=\"Prettier\"\n  src=\"https://raw.githubusercontent.com/prettier/prettier-logo/master/images/prettier-icon-light.png\"\u003e\n\u003cimg alt=\"PHP\" height=\"180\" hspace=\"25\" vspace=\"15\"\n  src=\"https://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Laravel.svg/500px-Laravel.svg.png\"\u003e\n\u003c/div\u003e\n\n\u003ch2 align=\"center\"\u003ePrettier Blade Plugin\u003c/h2\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/shufo/prettier-plugin-blade/actions\"\u003e\n    \u003cimg alt=\"GitHub Workflow Status\" src=\"https://img.shields.io/github/actions/workflow/status/shufo/prettier-plugin-blade/node.yml?style=flat-square\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/@prettier/plugin-php\"\u003e\n    \u003cimg alt=\"npm version\" src=\"https://img.shields.io/npm/v/@shufo/prettier-plugin-blade.svg?style=flat-square\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\nFormat your blade template using Prettier\n\n## Features\n\n- Automatically indent markup inside directives\n- Automatically add spacing to blade template markers\n- PHP 8 syntax support (null safe operator, named arguments)\n- Compliant to PSR-2 coding standard (PHP code inside directives)\n- Automatically sort Tailwind CSS classes with respect of `tailwind.config.js`\n\n## Installation\n\n```bash\n$ npm install --save-dev @shufo/prettier-plugin-blade prettier\n\n# yarn\n$ yarn add -D @shufo/prettier-plugin-blade prettier\n\n# pnpm\n$ pnpm add -D @shufo/prettier-plugin-blade prettier\n```\n\nthen, add in your [Prettier configuration](https://prettier.io/docs/en/configuration.html):\n\n```json\n{\n  \"plugins\": [\"@shufo/prettier-plugin-blade\"],\n  \"overrides\": [\n    {\n      \"files\": [\"*.blade.php\"],\n      \"options\": {\n        \"parser\": \"blade\",\n        \"tabWidth\": 4\n      }\n    }\n  ]\n}\n```\n\n## Prettier version Compatibilitiy\n\n| Prettier | Package |\n| -------: | ------: |\n|      3.x |  ^1.9.x |\n|      2.x |   1.8.x |\n\n## Usage (CLI)\n\n```bash\n$ ./node_modules/.bin/prettier --write resources/**/*.blade.php\n```\n\nhttps://user-images.githubusercontent.com/1641039/151354641-6305805e-8e0c-4226-8331-64195f85160e.mp4\n\n## Example\n\n### Input\n\n```blade\n@extends('frontend.layouts.app')\n@section('title') foo\n@endsection\n@section('content')\n\u003csection id=\"content\"\u003e\n\u003cdiv class=\"container mod-users-pd-h\"\u003e\n    \u003cdiv class=\"pf-user-header\"\u003e\n    \u003cdiv\u003e\u003c/div\u003e\n    \u003cp\u003e@lang('users.index')\u003c/p\u003e\n    \u003c/div\u003e\n        \u003cdiv class=\"pf-users-branch\"\u003e\n            \u003cul class=\"pf-users-branch__list\"\u003e\n                @foreach($users as $user)\n        \u003cli\u003e\n            \u003cimg src=\"{{ asset('img/frontend/icon/branch-arrow.svg') }}\" alt=\"branch_arrow\"\u003e\n            {{ link_to_route(\"frontend.users.user.show\",$users[\"name\"],$users['_id']) }}\n        \u003c/li\u003e\n        @endforeach\n      \u003c/ul\u003e\n      \u003cdiv class=\"pf-users-branch__btn\"\u003e\n      @can('create', App\\Models\\User::class)\n            {!! link_to_route(\"frontend.users.user.create\",__('users.create'),[1,2,3],['class' =\u003e 'btn']) !!}\n            @endcan\n        \u003c/div\u003e\n  \u003c/div\u003e\n    \u003c/div\u003e\n\u003c/section\u003e\n@endsection\n@section('footer')\n@stop\n```\n\n### Output\n\n```blade\n@extends('frontend.layouts.app')\n@section('title') foo\n@endsection\n@section('content')\n    \u003csection id=\"content\"\u003e\n        \u003cdiv class=\"container mod-users-pd-h\"\u003e\n            \u003cdiv class=\"pf-user-header\"\u003e\n                \u003cdiv\u003e\u003c/div\u003e\n                \u003cp\u003e@lang('users.index')\u003c/p\u003e\n            \u003c/div\u003e\n            \u003cdiv class=\"pf-users-branch\"\u003e\n                \u003cul class=\"pf-users-branch__list\"\u003e\n                    @foreach ($users as $user)\n                        \u003cli\u003e\n                            \u003cimg src=\"{{ asset('img/frontend/icon/branch-arrow.svg') }}\" alt=\"branch_arrow\"\u003e\n                            {{ link_to_route('frontend.users.user.show', $users['name'], $users['_id']) }}\n                        \u003c/li\u003e\n                    @endforeach\n                \u003c/ul\u003e\n                \u003cdiv class=\"pf-users-branch__btn\"\u003e\n                    @can('create', App\\Models\\User::class)\n                        {!! link_to_route('frontend.users.user.create', __('users.create'), [1, 2, 3], ['class' =\u003e 'btn']) !!}\n                    @endcan\n                \u003c/div\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n    \u003c/section\u003e\n@endsection\n@section('footer')\n@stop\n```\n\n## Options\n\nYou can use these options for prettier blade plugin in prettier CLI.\n\n|                           key | description                                                                                                                                                                                                                                                                     |\n| ----------------------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n|                 `--tab-width` | Number of spaces per indentation level. default: `4`                                                                                                                                                                                                                            |\n|               `--print-width` | The line length where Prettier will try wrap. default: `120`                                                                                                                                                                                                                    |\n|           `--wrap-attributes` | The way to wrap attributes. [`auto`\\|`force`\\|`force-aligned`\\|`force-expand-multiline`\\|`aligned-multiple`\\|`preserve`\\|`preserve-aligned`]. default: `auto`                                                                                                                   |\n| `--wrap-attributes-min-attrs` | Minimum number of html tag attributes for force wrap attribute options. Wrap the first attribute only if 'force-expand-multiline' is specified in wrap attributes. default: `2`.                                                                                                |\n|         `--end-with-new-line` | End output with newline. default: `true`                                                                                                                                                                                                                                        |\n|  `--sort-tailwindcss-classes` | Sort Tailwind CSS classes. It will automatically look for and respect `tailwind.config.js` if it exists. default: `false`                                                                                                                                                       |\n|   `--tailwindcss-config-path` | Path to your custom Tailwind configuration file. This option is only available if `--sort-tailwindcss-classes` is present. default: `''`                                                                                                                                        |\n|      `--sort-html-attributes` | Sort HTML Attributes in the specified order. [`none` \\| `alphabetical` \\| [`code-guide`](https://codeguide.co/) \\| [`idiomatic`](https://github.com/necolas/idiomatic-html#attribute-order) \\| [`vuejs`](https://eslint.vuejs.org/rules/attributes-order.html)] default: `none` |\n|       `--no-php-syntax-check` | Disable PHP syntax checking. default: `false`                                                                                                                                                                                                                                   |\n|              `--extra-liners` | Comma separated list of tags that should have an extra newline before them. default: `head,body,/html`                                                                                                                                                                          |\n|        `--trailing-comma-php` | If set to false, no trailing commas are printed for php expression. default: `true`                                                                                                                                                                                             |\n|          `--component-prefix` | Comma separated list of component prefix use to preserve style in html attributes. default: `x-,livewire:`                                                                                                                                                                      |\n\n### `.prettierrc` example\n\n```json\n{\n  \"printWidth\": 120,\n  \"tabWidth\": 4,\n  \"wrapAttributes\": \"auto\",\n  \"wrapAttributesMinAttrs\": 2,\n  \"sortTailwindcssClasses\": true,\n  \"sortHtmlAttributes\": \"none\",\n  \"noPhpSyntaxCheck\": false,\n  \"indentInnerHtml\": true,\n  \"extraLiners\": \"\",\n  \"trailingCommaPHP\": true,\n  \"componentPrefix\": \"x-,livewire:\"\n}\n```\n\n## Disabling format in file\n\nTo disable formatting in your file, you can use blade/html comments in the following format:\n\n```blade\n{{-- prettier-ignore-start --}}\n    {{ $foo }}\n    {{ $bar }}\n{{-- prettier-ignore-end --}}\n\nor\n\n\u003c!-- prettier-ignore-start --\u003e\n    {{ $foo }}\n    {{ $bar }}\n\u003c!-- prettier-ignore-end --\u003e\n```\n\nTo disable formatting on a specific line, you can use comment in the following format:\n\n```blade\n{{-- prettier-ignore --}}\n    {{ $foo }}\n\nor\n\n\u003c!-- prettier-ignore --\u003e\n    {{ $foo }}\n```\n\n## Editor Integration\n\nThe editors below are confirmed to work with this plugin.\n\n### VSCode\n\nYou can use [Prettier extension for VSCode](https://github.com/prettier/prettier-vscode) to format blade in VSCode. You need to install this plugin as a local dependency. see https://github.com/prettier/prettier-vscode#prettier-resolution\n\nIf you want to use a formatter without Prettier, please consider to use the [vscode-blade-formatter](https://github.com/shufo/vscode-blade-formatter) instead.\n\n### Vim\n\nYou can use [coc-prettier](https://github.com/neoclide/coc-prettier) plugin on [coc.nvim](https://github.com/neoclide/coc.nvim)\n\nIf you want to use formater without Prettier, please consider to using [coc-blade](https://github.com/yaegassy/coc-blade)\n\n### JetBrains WebStorm, PHPStorm, PyCharm...\n\nYou can use the [Prettier Plugin](https://plugins.jetbrains.com/plugin/10456-prettier) for JetBrains IDE.\n\nAdd extension setting `blade.php` to `File | Settings | Languages \u0026 Frameworks | JavaScript | Prettier | Run for files`:\n\ne.g.\n\n`{**/*,*}.{js,ts,jsx,tsx,blade.php}`\n\nand turn on checkbox `On 'Reformat Code' action`\n\nRestart your IDE if you get the error: 'Prettier: File \\*.php has unsupported type'\n\n## Limitation\n\nThis plugin is based on [blade-formatter](https://github.com/shufo/blade-formatter) which does not generate ASTs with lexer, so it might break indentation on complex blade.\n\nLike:\n\n- The mix of open/closed HTML tag and directives\n\n❌ Example of **unexpected** code\n\n```blade\n@if ($user)\n    \u003cdiv\u003e\n    @else\n    \u003c/div\u003e\n@endif\n```\n\n⭕ Example of **expected** code\n\n```blade\n@if ($user)\n    \u003cdiv\u003efoo\u003c/div\u003e\n@else\n    \u003cdiv\u003ebar\u003c/div\u003e\n@endif\n```\n\nPlease keep the blade template as simple as possible for better formatting.\n\n## API\n\nYou can format the blade file programmatically using Prettier's API\n\n```js\n// CommonJS\nconst prettier = require(\"prettier\");\n\nconst input = `\n\u003cdiv\u003e\n  @if ($user)\n  {{ $foo }}\n  @else\n  {{ $bar }}\n  @endif\n\u003c/div\u003e\n`;\n\nconst res = await prettier.format(input, { parser: \"blade\" });\nconsole.log(res);\n// =\u003e\n//\u003cdiv\u003e\n//    @if ($user)\n//        {{ $foo }}\n//    @else\n//        {{ $bar }}\n//    @endif\n//\u003c/div\u003e\n\n// ES Module\nimport * as prettier from \"prettier\";\n\nconst input = `\n\u003cdiv\u003e\n  @if ($user)\n  {{ $foo }}\n  @else\n  {{ $bar }}\n  @endif\n\u003c/div\u003e\n`;\nconst res = await prettier.format(input, { parser: \"blade\" });\nconsole.log(res);\n```\n\n## Development\n\n```bash\n$ yarn install\n$ yarn run watch # watch changes\n```\n\n## Testing\n\n```bash\n$ yarn install\n$ yarn run test\n```\n\n## Contributing\n\n1.  Fork it\n2.  Create your feature branch (`git checkout -b my-new-feature`)\n3.  Commit your changes (`git commit -am 'Add some feature'`)\n4.  Push to the branch (`git push origin my-new-feature`)\n5.  Create new Pull Request\n\n## Contributors\n\n\u003c!-- readme: collaborators,contributors -start --\u003e\n\u003ctable\u003e\n\u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\n        \u003ca href=\"https://github.com/shufo\"\u003e\n            \u003cimg src=\"https://avatars.githubusercontent.com/u/1641039?v=4\" width=\"100;\" alt=\"shufo\"/\u003e\n            \u003cbr /\u003e\n            \u003csub\u003e\u003cb\u003eShuhei Hayashibara\u003c/b\u003e\u003c/sub\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n        \u003ca href=\"https://github.com/howdu\"\u003e\n            \u003cimg src=\"https://avatars.githubusercontent.com/u/533658?v=4\" width=\"100;\" alt=\"howdu\"/\u003e\n            \u003cbr /\u003e\n            \u003csub\u003e\u003cb\u003eBeej\u003c/b\u003e\u003c/sub\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n        \u003ca href=\"https://github.com/ianjamieson\"\u003e\n            \u003cimg src=\"https://avatars.githubusercontent.com/u/2786904?v=4\" width=\"100;\" alt=\"ianjamieson\"/\u003e\n            \u003cbr /\u003e\n            \u003csub\u003e\u003cb\u003eIan Jamieson\u003c/b\u003e\u003c/sub\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n        \u003ca href=\"https://github.com/mortenscheel\"\u003e\n            \u003cimg src=\"https://avatars.githubusercontent.com/u/6514342?v=4\" width=\"100;\" alt=\"mortenscheel\"/\u003e\n            \u003cbr /\u003e\n            \u003csub\u003e\u003cb\u003eMorten Scheel\u003c/b\u003e\u003c/sub\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n        \u003ca href=\"https://github.com/nessimabadi\"\u003e\n            \u003cimg src=\"https://avatars.githubusercontent.com/u/11637110?v=4\" width=\"100;\" alt=\"nessimabadi\"/\u003e\n            \u003cbr /\u003e\n            \u003csub\u003e\u003cb\u003eNessim Abadi\u003c/b\u003e\u003c/sub\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n        \u003ca href=\"https://github.com/vuolter\"\u003e\n            \u003cimg src=\"https://avatars.githubusercontent.com/u/1221092?v=4\" width=\"100;\" alt=\"vuolter\"/\u003e\n            \u003cbr /\u003e\n            \u003csub\u003e\u003cb\u003eWalter Purcaro\u003c/b\u003e\u003c/sub\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\u003c/tr\u003e\n\u003c/table\u003e\n\u003c!-- readme: collaborators,contributors -end --\u003e\n\n## LICENSE\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshufo%2Fprettier-plugin-blade","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshufo%2Fprettier-plugin-blade","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshufo%2Fprettier-plugin-blade/lists"}