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

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

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