Si todavía formateas código manualmente o discutes con tu equipo sobre tabs vs espacios, es momento de conocer Prettier. Es la herramienta que terminó las guerras de estilo en JavaScript.
¿Qué es Prettier?
Prettier es un formateador de código "opinionated" (con opiniones fuertes). Lo instalas, lo configuras una vez, y nunca más piensas en formateo.
¿Por qué usarlo?
1. Termina las discusiones
Sin Prettier:
"¿Usamos tabs o espacios?" "¿Punto y coma o no?" "¿Comillas simples o dobles?"
Con Prettier:
"Prettier decide. Siguiente tema."
2. Formateo automático
🎬 ¿Te está gustando este contenido? Tenemos más tutoriales en video en nuestro canal de YouTube.
Configuración mínima
Crea un archivo .prettierrc:
Integración con VS Code
- Instala la extensión "Prettier - Code formatter"
- En settings.json:
Listo. Cada vez que guardes, tu código se formatea automáticamente.
Con ESLint
Prettier y ESLint pueden chocar. La solución:
En tu .eslintrc:
Esto desactiva las reglas de ESLint que Prettier ya maneja.
Scripts útiles
En tu package.json:
npm run format: Formatea todo el proyectonpm run format:check: Verifica sin modificar (útil en CI)
Ignorar archivos
Crea .prettierignore:
Pre-commit hooks
Formatea solo los archivos que van en el commit:
En package.json:
Lenguajes soportados
Prettier no solo es para JavaScript:
- JavaScript / TypeScript
- JSX / TSX
- JSON
- CSS / SCSS / Less
- HTML
- Markdown
- YAML
- GraphQL
Conclusión
Prettier es de esas herramientas que instalas una vez y te olvidas. Ya no hay excusa para código mal formateado.
| Sin Prettier | Con Prettier |
|---|---|
| Discusiones de estilo | Configuración única |
| Formateo manual | Automático al guardar |
| PRs con cambios de estilo | PRs limpios |
| Código inconsistente | Código uniforme |
Instálalo hoy y tu yo del futuro te lo agradecerá.
Abrazo. bliss.
Por qué los frameworks tradicionales están condenados en la era de la IA generativa
Checa este otro Post
