Prettier

Prettier is an opinionated code formatter that enforces consistent code style across projects.

• Configuration
  • Laravel Livewire projects
  • Vue/Inertia projects

Configuration

The configuration may vary slightly from project to project, however the following guidelines should be applied whenever possible:

• Use a printWidth of 120 characters
• Prefer single quotes
• Use a tab width of 4 spaces
• JavaScript/TypeScript imports should be consistently sorted
• Tailwind classes should be consistently sorted

The following are standard configurations for new projects.

Laravel Livewire projects

This configuration enables Prettier formatting for Blade templates.

Install Prettier and the necessary plugins:

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

Create a .prettierrc file with the following contents:

{
    "plugins": ["prettier-plugin-blade", "prettier-plugin-tailwindcss", "@trivago/prettier-plugin-sort-imports"],
    "printWidth": 120,
    "singleQuote": true,
    "tabWidth": 4,
    "overrides": [
        {
            "files": ["*.blade.php"],
            "options": {
                "parser": "blade"
            }
        }
    ]
}

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

"format": "prettier --log-level warn --write *.js resources/**/*.{blade.php,css}"

Vue/Inertia projects

This configuration sets an opnionated default for Vue projects.

Install Prettier and the necessary plugins:

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

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
}

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

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