Prettier Plugin Installation

A Blade formatter is available for both Prettier 2 and Prettier 3.

#Prettier 3

If you are using Prettier 3, you need version 2 of the prettier-plugin-blade package:

1npm install prettier-plugin-blade@^2

After adding prettier-plugin-blade to your project, you may add the following to your projects .prettierrc file:

 1{
 2  "plugins": [
 3    "prettier-plugin-blade"
 4  ],
 5  "overrides": [
 6    {
 7      "files": [
 8        "*.blade.php"
 9      ],
10      "options": {
11        "parser": "blade"
12      }
13    }
14  ]
15}

#Prettier 2

If you are using Prettier 2, you must use version 1 of prettier-plugin-blade:

1npm install prettier-plugin-blade@^1

After installing prettier-plugin-blade in your project, you can add the following to your project's .prettierrc file:

 1{
 2    "plugins": [
 3        "./node_modules/prettier-plugin-blade/"
 4    ],
 5    "overrides": [
 6        {
 7            "files": [
 8                "*.blade.php"
 9            ],
10            "options": {
11                "parser": "blade"
12            }
13        }
14    ]
15}

#VS Code Prettier Troubleshooting

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:

1{
2  "[blade]": {
3    "editor.defaultFormatter": "esbenp.prettier-vscode"
4  },
5  "prettier.documentSelectors": [
6      "**/*.blade.php"
7  ]
8}

For more information about Prettier's document selectors, please consult their documentation here: https://github.com/prettier/prettier-vscode?tab=readme-ov-file#prettierdocumentselectors