Setup PhpStorm to use Prettier and Laravel Pint (Antlers, Blade, PHP, Tailwind, Statamic)

Install dependencies

Run npm install -D prettier prettier-plugin-antlers prettier-plugin-blade prettier-plugin-tailwindcss in your terminal

Prettier

Configure prettier

Create a .prettierrc file with the following content

{
    "singleQuote": true,
    "printWidth": 140,
    "tabWidth": 4,
    "plugins": [
        "prettier-plugin-antlers",
        "prettier-plugin-blade",
        "prettier-plugin-tailwindcss"
    ],
    "tailwindStylesheet": "./resources/css/site.css",
    "overrides": [
        {
            "files": "*.antlers.html",
            "options": {
                "parser": "antlers",
                "singleQuote": false
            }
        },
        {
            "files": "*.blade.php",
            "options": {
                "parser": "blade",
                "singleQuote": false
            }
        },
        {
            "files": [
                "**/*.css",
                "**/*.html"
            ],
            "options": {
                "singleQuote": false
            }
        },
        {
            "files": [
                "**/*.yaml",
                "**/*.yml"
            ],
            "options": {
                "singleQuote": false,
                "tabWidth": 2
            }
        }
    ]
}

Disable prettier for yaml and md

Create a .prettierignore file with the following content

**/*.md
**/*.yaml

Register Prettier as formatter

Under Settings | Languages & Frameworks | JavaScript | Prettier

Choose Automatic Prettier configuration
Add the this pattern for Run for Files: **/*.{js,ts,jsx,tsx,cjs,cts,mjs,mts,vue,blade.php,antlers.html,css}
Tick the boxes for
- Run on save
- Prefer Prettier configuration to IDE code style

Pint

Configure Pint

Under Settings | PHP | Quality Tools, enable Laravel Pint as External Formatter
Under Settings | PHP | Quality Tools | Laravel Pint, enable Pint
Under Settings | Tools | Actions on Save
- Enable Reformat code
- Exclude the file types Antlers, Blade, Markdown, and Yaml

Troubleshooting

Make sure a Node interpreter is selected under Settings > Language & Frameworks > Node.js

lunitrixx/Setup PhpStorm to use Prettier and Laravel Pint (Antlers, Blade, PHP, Tailwind, Statamic).md