Code formatting

Laravel Pint and Prettier are tools to ensure consistent code formatting.

Use of these tools is required for all new projects.

• Prerequisites
• Formatting PHP with Pint
  • Composer script
• Formatting Blade with Pint
• Formatting JS/TS/CSS/Vue with Prettier
  • Yarn script
• Formatting on save
  • PHPStorm
  • VS Code

Prerequisites

Install Prettier and the necessary plugins:

yarn add --dev prettier prettier-plugin-blade prettier-plugin-tailwindcss @trivago/prettier-plugin-sort-imports

Formatting PHP with Pint

Pint is installed by default in new Laravel projects. If needed, you can install it with Composer:

composer require --dev laravel/pint

Composer script

It is recommended to create a format Composer script by adding the following to the scripts section of composer.json:

{
    "scripts": {
        "format": "@php vendor/bin/pint --parallel"
    }
}

Run as follows:

composer format

TIP

--parallel requires Pint 1.24.0 or later. For older versions, omit this flag.

Formatting Blade with Pint

Pint now supports formatting Blade templates via Prettier, using prettier-plugin-blade and prettier-plugin-tailwindcss from the prerequisites above.

Create a pint.json file and enable the Pint/laravel_blade rule:

{
    "rules": {
        "Pint/laravel_blade": true
    }
}

WARNING

At the time of writing, Pint uses its own bundled Prettier config for this rule, ignoring any project-specific configuration files such as .prettierrc.

Formatting JS/TS/CSS/Vue with Prettier

Create a .prettierrc file with the following contents:

{
    "plugins": ["prettier-plugin-tailwindcss", "@trivago/prettier-plugin-sort-imports"],
    "printWidth": 120,
    "singleAttributePerLine": true,
    "singleQuote": true,
    "tabWidth": 4,
    "trailingComma": "all"
}

TIP

prettier-plugin-blade is deliberately omitted from plugins. Blade formatting is handled by Pint (see above), not by running Prettier directly.

Yarn script

It is recommended to add a format script to the scripts section of package.json:

{
    "scripts": {
        "format": "prettier --log-level warn --write resources/**/*"
    }
}

Run as follows:

yarn format

This can be appended to the composer format script as follows:

{
    "scripts": {
        "format": "@php vendor/bin/pint --parallel"
        "format": [ 
            "@php vendor/bin/pint --parallel", 
            "corepack yarn format"
        ] 
    }
}

Formatting on save

Running the format scripts manually is fine, but it's worth configuring your editor to format automatically as you work. Because Pint owns Blade files and Prettier owns JS/TS/CSS, make sure each tool is only wired up to run on the files it's actually responsible for.

PHPStorm

1. Pint — go to Settings | PHP | Quality Tools | Laravel Pint and set the path to vendor/bin/pint. Then go to Settings | Tools | Actions on Save and enable Run Laravel Pint.
2. Prettier — go to Settings | Languages & Frameworks | JavaScript | Prettier, set the Prettier package to the one installed in node_modules, and set Run for files to **/*.{css,js,ts,vue}. Enable On save.

VS Code

1. Pint — install the Laravel Pint extension, then add to .vscode/settings.json:

   {
       "editor.formatOnSave": true,
       "[php]": {
           "editor.defaultFormatter": "open-southeast-asia.laravel-pint"
       }
   }

2. Prettier — install the Prettier - Code formatter extension, then add:

   {
       "editor.formatOnSave": true,
       "[css][javascript][typescript][vue]": {
           "editor.defaultFormatter": "esbenp.prettier-vscode"
       }
   }