Prettier en Laravel
-
Oliver Servín
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.
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_modulesdist.env*vendor//vendorpublic/.git**/.gitpackage-lock.jsoncomposer.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.