Prácticamente en todos mis proyectos Laravel, instalo Prettier para asegurar la consistencia del formato en los archivos Blade. Además, como utilizo Tailwind CSS, Prettier también me permite mantener un orden consistente en las clases de estilo que uso.

<video src="/assets/video/CleanShot 2025-01-02 at 21.46.26.mp4" type="video/mp4" class="rounded-md" controls autoplay muted loop> <p>El usuario abre la paleta de comando para dar formato a un archivo Blade.</p> </video>

Por eso he creado esta guía rápida como referencia para instalar Prettier en cualquier proyecto Laravel.

Instalando las dependencias

Para instalar Prettier, es necesario instalar las dependencias de Prettier a través de NPM, junto con el plugin de Blade para Prettier y el plugin de Tailwind CSS también para Prettier.

npm install --save-dev prettier-plugin-blade@^2 prettier prettier-plugin-tailwindcss

Archivos de configuración

Ahora, es necesario crear un archivo de configuración .prettierrc.

{
    "printWidth": 120,
    "semi": true,
    "singleQuote": true,
    "tabWidth": 4,
    "trailingComma": "all",
    "plugins": ["prettier-plugin-blade", "prettier-plugin-tailwindcss"],
    "overrides": [
        {
            "files": [
                "*.blade.php"
            ],
            "options": {
                "parser": "blade"
            }
        }
    ]
}

Principalmente, habilita los plugins de Blade y Tailwind CSS para Prettier y configura el número de espacios para la indentación en 4, entre otras opciones. Puedes consultar una guía completa de las configuraciones disponibles en la documentación de Prettier.

También se debe crear un archivo .prettierignore para especificar qué archivos o ubicaciones debe ignorar Prettier:

node_modules
dist
.env*
vendor/
/vendor
public/
.git
**/.git
package-lock.json
composer.lock

Básicamente, es una lista sencilla para ignorar las dependencias de Node, Composer y los assets generados. Puedes tomarla como base y añadir más ubicaciones ignoradas según tu proyecto.

Para configurar el formato de los archivos Blade, se debe ajustar el plugin de Prettier para Blade, utilizando Laravel Pint para el formato, con el archivo de configuración .blade.format.json.

{
    "useLaravelPint": true
}

Prettier en VS Code

Por último, asegúrate de que VS Code esté configurado para dar formato a los archivos Blade.

{
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "[blade]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.formatOnSave": true
    },
    "prettier.documentSelectors": [
        "**/*.blade.php"
    ]
}

Con esto tendrás VS Code configurado para dar formato automáticamente a tus archivos Blade al momento de guardarlos.