Format Antlers, Blade, Vue, Tailwind and PHP with Prettier in PhpStorm

Format Antlers, Blade, Vue, Tailwind and PHP with Prettier in PhpStorm.md

Install dependencies

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

Configure prettier

Create a .prettierrc file with the following content

{
  "singleQuote": true,
  "trailingComma": "all",
  "printWidth": 140,
  "tabWidth": 2,
  "endOfLine": "lf",
  "plugins": [
    "prettier-plugin-antlers", 
    "prettier-plugin-blade", 
    "@prettier/plugin-php",
    "prettier-plugin-tailwindcss"
  ],
  "overrides": [
    {
      "files": "*.antlers.html",
      "options": {
        "parser": "antlers",
        "singleQuote": false
      }
    },
    {
      "files": ["**/*.php", "**/!*.blade.php"],
      "options": {
        "parser": "php",
        "singleQuote": false,
        "phpVersion": "8.2"
      }
    },
    {
      "files": "*.blade.php",
      "options": {
        "parser": "blade",
        "singleQuote": false
      }
    },
    {
      "files": ["**/*.css", "**/*.html"],
      "options": {
        "singleQuote": false
      }
    }
  ]
}

Register Prettier as formatter

Under Settings > Languages & Frameworks > JavaScript > Prettier register the following pattern for Run for Files:

{**/*,*}.{js,ts,jsx,tsx,html,vue,php,css}

Troubleshooting

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