A Prettier plugin to format Laravel Blade templates
npm install prettier-plugin-bladenpm using the following command:
bash
npm install prettier-plugin-blade@^2
`
After installing, add the following to your .prettierrc file:
`json
{
"plugins": [
"prettier-plugin-blade"
],
"overrides": [
{
"files": [
"*.blade.php"
],
"options": {
"parser": "blade"
}
}
]
}
`
> Note: If you are looking to install for Prettier 2, make sure to use version 1 of prettier-plugin-blade.
Working with Other Plugins, such as the Prettier Plugin for Tailwind CSS
The Blade formatter does not ship with third-party plugins, like the Prettier Plugin for Tailwind CSS.
> Technically the formatter does ship with built-in JSON and PHP formatters, but these are to handle some internal formatting under special circumstances, and are not applied to your entire template.
You are free to install and configure whichever versions of these plugins you would like. However, if you are unable to get them to work in conjunction with the Blade formatter, you can update the .prettierrc file and include them in the plugins list.
$3
For example, if we had installed the prettier-plugin-tailwindcss plugin, we could update our .prettierrc file like so:
`json
{
"tailwindConfig": "path/to/tailwind.config.js",
"plugins": [
"prettier-plugin-blade",
"prettier-plugin-tailwindcs"
],
"overrides": [
{
"files": [
"*.blade.php"
],
"options": {
"parser": "blade"
}
}
]
}
`
$3
Suppose you are using the Prettier VS Code extension and are encountering an error stating something similar to "There are no formatters for Blade files." In that case, you may need to update your VS Code configuration and inform Prettier about the Blade file extension.
The simplest way to do this is to update your user JSON configuration file and ensure it has the following settings:
`json
{
"[blade]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"prettier.documentSelectors": [
"*/.blade.php"
]
}
`
> Important: You will still need to create and configure the .prettierrc file!
For more information about Prettier's document selectors, please consult their documentation here: https://github.com/prettier/prettier-vscode?tab=readme-ov-file#prettierdocumentselectors
$3
For example, if we had installed the prettier-plugin-tailwindcss plugin, we could update our .prettierrc file like so:
`json
{
"tailwindConfig": "path/to/tailwind.config.js",
"plugins": [
"./node_modules/prettier-plugin-blade/",
"./node_modules/prettier-plugin-tailwindcss/"
],
"overrides": [
{
"files": [
"*.blade.php"
],
"options": {
"parser": "blade"
}
}
]
}
`
> Note: If you are using VS Code you may have to restart the editor after installing/changing Prettier plugins for them to take effect.
$3
The Blade formatter will utilize Prettier's HTML parser when formatting your Blade document. Your Prettier plugin configuration is passed along to the Blade formatter and will be used when formatting your Blade document - you do not need to wait for it to be supported by the formatting library.
When the Blade formatter invokes Prettier's HTML formatter, the PHP and Blade code will be safely removed from the document to prevent the Blade and PHP content from being mangled by other front-end plugins with similar syntax. Once the layout of the template has been established by the HTML formatter using your project's configuration, the layout engine will start assembling the Blade and PHP content (utilizing the built-in PHP formatter or Laravel Pint, if configured).
Prettier 2 Configuration: Could Not Resolve Module
If you continuously receive errors like "could not resolve module prettier-plugin-blade", the following updates to a project's .prettierrc have proved successful:
`json
{
"plugins": [
"./node_modules/prettier-plugin-blade/"
],
"overrides": [
{
"files": "*.blade.php",
"vscodeLanguageIds": ["blade"],
"options": {
"parser": "blade"
}
}
]
}
`
Formatting Conditional Element Open/Close Tags
Because of the way formatter works internally, you will need to take a few steps if you need to format templates containing Blade code similar to the following:
`blade
@if ($someCondition)
@endif
@if ($someCondition)
@endif
`
The above template will result in a Prettier error stating it encountered an unexpected closing tag. This can be resolved by wrapping the fragmented open/close tags with ignore comments:
`blade
@if ($someCondition)
{{-- format-ignore-start --}}{{-- format-ignore-end --}}
@endif
@if ($someCondition)
{{-- format-ignore-start --}}{{-- format-ignore-end --}}
@endif
``