Prettier: Formatea tu código y olvida los debates de estilo

¿Cansado de discusiones interminables sobre espacios, sangrías y la ubicación de las llaves? ¡Prettier está aquí para ayudarte! Es una herramienta que formatea automáticamente tu código, eliminando la necesidad de debates sobre estilos y asegurando la consistencia en tu proyecto.

Prettier se encarga de definir las reglas de estilo para diversos lenguajes de programación y marcado, como JavaScript, JSX, Angular, Vue, TypeScript, CSS, HTML, JSON, GraphQL, Markdown y YAML. En lugar de luchar con las preferencias de cada desarrollador, Prettier toma tu código y lo re-formatea de acuerdo a las configuraciones predefinidas, mejorando la legibilidad y manteniendo un estilo consistente a lo largo de todo tu proyecto.

Beneficios de usar Prettier

Usar Prettier ofrece una serie de beneficios tanto para desarrolladores individuales como para equipos de desarrollo:

1. Elimina conflictos de estilo: Prettier establece un estándar único de escritura de código, eliminando la necesidad de debates y discusiones sobre estilos. Imagina un mundo donde todos los desarrolladores escriben el código con la misma sangría y ubicación de llaves, ¡un sueño hecho realidad!

2. Facilita la integración de nuevos desarrolladores: Con Prettier, los nuevos miembros del equipo no necesitan aprender las reglas de estilo existentes, ya que la herramienta se encarga de formatear el código de manera consistente. Esto acelera la integración y permite que los nuevos desarrolladores se concentren en el código, en lugar de perder tiempo tratando de entender los estilos del proyecto.

3. Aumenta la productividad: Al automatizar el formateo, Prettier libera a los desarrolladores de la tarea de formatear el código manualmente, permitiéndoles centrarse en la lógica del código y mejorar su productividad. ¡Más tiempo para crear y menos tiempo corrigiendo estilos!

4. Mejora la legibilidad: El código formateado de forma consistente es más fácil de leer y entender, lo que facilita la depuración y el mantenimiento del código.

5. Reduce los errores: Prettier ayuda a detectar errores comunes de estilo, como la falta de sangría o la colocación incorrecta de las llaves, lo que puede contribuir a evitar errores y mejorar la calidad del código.

Prettier vs. Linter: ¿Cuál es la diferencia?

Prettier y los linters como ESLint son herramientas útiles para mejorar la calidad del código, pero tienen diferentes funciones:

• Prettier se enfoca en el formateo del código: Prettier formatea el código de acuerdo a sus reglas de estilo, sin importar el estilo original del código.
• ESLint se enfoca en la detección de errores y la mejora de la calidad del código: ESLint busca errores potenciales en el código, como variables no definidas, funciones no utilizadas y posibles errores de sintaxis.

Instalación de Prettier

Para instalar Prettier en tu proyecto, puedes utilizar el administrador de paquetes npm:

bash
npm install --save-dev prettier


Configurando Prettier

Una vez instalado Prettier, puedes configurar sus opciones a través del archivo .prettierrc.json:

json
{
"semi": false,
"singleQuote": true,
"trailingComma": "es5",
"printWidth": 80,
"tabWidth": 2
}


Opciones de configuración:

• semi: Define si se deben usar punto y coma al final de las instrucciones.
• singleQuote: Define si se deben usar comillas simples o dobles para las cadenas.
• trailingComma: Define la política de coma al final de las líneas.
• printWidth: Define la longitud máxima de una línea de código.
• tabWidth: Define la cantidad de espacios que representan una tabulación.

El archivo .prettierignore

El archivo .prettierignore te permite especificar los archivos o directorios que no quieres que Prettier formatee. Por ejemplo, puedes ignorar los archivos de configuración o las carpetas de compilación.


node_modules
dist
.git


Integrando Prettier con ESLint

Si estás usando ESLint, puedes integrar Prettier para que trabajen en armonía. Para evitar conflictos entre ambas herramientas, puedes usar la regla eslint-config-prettier de ESLint.

bash
npm install --save-dev eslint-config-prettier


Luego, debes actualizar el archivo .eslintrc.json para incluir la regla eslint-config-prettier y deshabilitar todas las reglas de estilo de ESLint que se superponen con Prettier:

json
{
"extends": ["eslint:recommended", "plugin:prettier/recommended"],
"rules": {
// Deshabilita todas las reglas de estilo de ESLint que se superponen con Prettier
"prettier/prettier": "warn"
}
}


Integrando Prettier con Git

Para asegurar que el código se formatee antes de realizar un commit, puedes configurar un hook de Git pre-commit que ejecute Prettier en tu código. Puedes usar herramientas como husky y lint-staged para lograrlo.

bash
npm install --save-dev husky lint-staged


Luego, debes configurar el archivo package.json para ejecutar Prettier en los archivos modificados antes de cada commit:

json
{
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.{js,jsx,ts,tsx,vue,css,scss,html,json,graphql,md,yaml}": [
"prettier --write",
"git add"
]
}
}


Conclusión

Prettier es una herramienta poderosa que puede ayudarte a mejorar la calidad de tu código y a mantener la consistencia en tu proyecto. Con su fácil instalación, configuración flexible e integración con otras herramientas populares, Prettier puede hacer que la vida de un desarrollador sea más fácil y agradable. ¡Dile adiós a los debates sobre estilos y dale la bienvenida a un código limpio y consistente con Prettier!