Si trabajas en desarrollo de software, probablemente te hayas enfrentado a situaciones en las que el formato de tu código se vuelve inconsistente. Las diferencias en espacios, sangrías o comillas pueden generar problemas de legibilidad y dificultar la colaboración en equipo. Afortunadamente, existe Prettier esta herramienta que se ha vuelto esencial para mantener el código limpio y estandarizado sin esfuerzo.
En este artículo, vamos a explorar qué es Prettier, por qué deberías usarlo en tus proyectos y cómo integrarlo en tu flujo de trabajo de desarrollo.
¿Qué es Prettier?
Prettier es un formateador de código opinado que, independientemente del estilo que prefieras, asegura que tu código sea consistente y fácil de leer. Su propósito principal es eliminar la necesidad de que los desarrolladores discutan sobre estilo de código o dediquen tiempo a formatearlo manualmente. Prettier admite una amplia gama de lenguajes de programación y frameworks, entre ellos:
- JavaScript/TypeScript
- HTML/CSS
- Markdown
- GraphQL
- YAML
- JSON
Lo mejor de Prettier es que formatea tu código automáticamente siguiendo reglas predefinidas, pero también te permite realizar ajustes según tus preferencias.
¿Por qué usarlo?
1. Consistencia en el estilo de código
Uno de los mayores beneficios de usar Prettier es que asegura la consistencia en todo el código del proyecto, lo que mejora la legibilidad. No importa cuántos desarrolladores trabajen en el mismo repositorio, Prettier se encarga de formatear el código de manera uniforme, lo que evita discrepancias.
2. Menos discusiones sobre el estilo
En lugar de perder tiempo discutiendo si el código debe tener sangría de 2 o 4 espacios, o si se deben usar comillas simples o dobles, Prettier toma esas decisiones por ti. Esto permite a los equipos enfocarse en lo que realmente importa: el código y la lógica de negocio.
3. Automatización del formato
Prettier se puede integrar fácilmente en tus editores de texto, como Visual Studio Code, y configurarse para que al guardar un archivo, este se formatee automáticamente. También puedes integrarlo con herramientas como Git para que todo el código pase por un formateo antes de ser comiteado.
4. Mejora la colaboración en equipo
Trabajar en equipo implica diferentes estilos y hábitos de desarrollo, lo que puede resultar en código inconsistente. Prettier unifica el estilo del código, lo que hace que la colaboración sea más fluida, ya que todos estarán trabajando con las mismas reglas.
5. Soporte para múltiples lenguajes
Prettier es una herramienta muy versátil, ya que puede formatear una amplia variedad de lenguajes. Esto es particularmente útil en proyectos donde se usan múltiples tecnologías, ya que puedes mantener un estilo uniforme incluso en diferentes lenguajes y archivos.
Cómo usar Prettier en tu proyecto
1. Instalación
Puedes instalar Prettier fácilmente a través de npm o yarn en tu proyecto:
npm install --save-dev prettier
o
yarn add --dev prettier
2. Configuración
Prettier funciona bien sin configuración adicional, pero si deseas personalizar su comportamiento, puedes crear un archivo de configuración .prettierrc. Un ejemplo de configuración personalizada podría verse así:
{
"printWidth": 80,
"tabWidth": 2,
"useTabs": false,
"semi": true,
"singleQuote": true,
"trailingComma": "es5",
"bracketSpacing": true
}
3. Uso desde la línea de comandos
Para formatear archivos manualmente, puedes ejecutar Prettier desde la línea de comandos:
npx prettier --write .
Este comando buscará todos los archivos compatibles en tu proyecto y los formateará automáticamente.
4. Integración con editores de texto
Una de las características más convenientes de Prettier es su integración con los editores de código. Para Visual Studio Code, puedes instalar la extensión de Prettier directamente desde el Marketplace y configurarla para que formatee automáticamente el código cada vez que guardas un archivo.
- Abre tu settings.json y agrega lo siguiente:
"editor.formatOnSave": true
5. Integración con Git Hooks
Puedes asegurarte de que el código se formatee antes de cada commit usando herramientas como Husky y lint-staged:
- Instala las dependencias:
npm install --save-dev husky lint-staged
- Configura Husky y lint-staged en tu
package.json:
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.js": [
"prettier --write",
"git add"
]
}
Esto garantizará que formatee tus archivos antes de que se añadan al repositorio.
Personalización de reglas
Si bien se sigue reglas bastante estrictas para el formato, puedes ajustarlas según las necesidades de tu equipo. Algunos de los ajustes más comunes incluyen:
- Ancho de línea (printWidth): El ancho máximo de las líneas antes de que Prettier las divida.
- Comillas simples o dobles (singleQuote): Si prefieres usar comillas simples o dobles.
- Punto y coma (semi): Determina si deseas que se incluyan puntos y comas al final de las declaraciones.
- Sangría con espacios o tabs (useTabs): Define si usar espacios o tabulaciones para la sangría.
Prettier es una herramienta poderosa que, con una configuración mínima, puede cambiar por completo cómo manejas el estilo y la consistencia de tu código. Al automatizar el formateo, elimina errores comunes, mejora la legibilidad del código y facilita la colaboración en equipo. Sin importar si trabajas en un pequeño proyecto personal o en una gran base de código con muchos colaboradores, Prettier debería estar entre tus herramientas de desarrollo indispensables.
Referencia: https://prettier.io/
