Hola 👋, imagina el siguiente escenario: tienes un equipo de trabajo centrado en crear código limpio y mantenible, pero lo más importante es que este código debe ir a producción lo antes posible y sin errores.

Ahora bien, cualquiera podría sugerir comenzar con pruebas unitarias, pruebas de integración, pruebas end-to-end, y demás.

Sin embargo, a menudo olvidamos algo fundamental: la estructura del código. Para asegurarnos de que nuestras pruebas funcionen correctamente y de que nuestros componentes estén bien escritos, es crucial mantener una estructura coherente durante todo el desarrollo.

Afortunadamente, existen herramientas que nos ayudan a mantener consistencia y seguir estándares durante el desarrollo.

Entre estas herramientas destacan ✨ ESLint ✨ y ✨ Prettier ✨. Aunque la comunidad de desarrolladores debate sobre qué reglas deben usarse y cuáles no, podemos confiar en estas herramientas para mantener una armonía entre los desarrolladores de nuestro código.

A continuación, te presento una guía básica sobre la instalación, configuración de archivos Prettier y configuración del formateo en tu editor. En este caso, usaremos VSCode para que el formateo se realice automáticamente. Además, como bonificación ✅, te recomendaré algunas extensiones de VSCode que me han sido de gran ayuda.

Empecemos definiendo ¿Qué es Prettier y por qué es tan genial? 😎

Prettier es una herramienta que formatea automáticamente tu código para cumplir con un conjunto predefinido de reglas de estilo

¡Y lo hace de manera consistente! Imagina nunca tener que preocuparte por la indentación, los puntos y comas, o la longitud máxima de línea nuevamente. Prettier se encarga de todo esto para que no tengas que complicarte la vida.

Ahora que hemos establecido una definición básica, ¡vamos a comenzar!

Paso 1: Instalación

Primero, necesitas instalar Prettier en tu proyecto. Puedes hacerlo fácilmente usando npm:

npm install --save-dev prettier

Paso 2: Configuración básica

Ahora que Prettier está en tu proyecto, necesitas configurarlo. Prettier es conocido por su configuración "sin configuración". Es confuso pero basicamente esto significa que viene con un conjunto de reglas predeterminadas que son ampliamente aceptadas por la comunidad. Pero, si deseas personalizar algunas cosas, puedes crear un archivo .prettierrc en la raíz de tu proyecto y agregar tus preferencias allí.

Si te sirve esta es la configuracion que suelo usar:

{
  "semi": false,
  "trailingComma": "none",
  "tabWidth": 2,
  "singleQuote": false,
  "jsxSingleQuote": false,
  "bracketSameLine": true,
  "bracketSpacing": true,
  "printWidth": 130,
  "arrowParens": "always"
}

⚠️🚨 Nota Importante ⚠️🚨: Si ya estás trabajando en un equipo, es muy probable que estas reglas ya estén definidas por los desarrolladores. Por lo tanto, cualquier cambio que desees proponer a estas reglas deberías consultarlo primero con tu equipo. De lo contrario, podrías causar conflictos innecesarios. En caso de que estes desarrollando tu proyecto por tu cuenta dale viaje 👍

Paso 3: Integración con tu editor de código

Aquí viene lo masiso. Para sacar el máximo provecho de Prettier, es crucial integrarlo con tu editor de código favorito. Afortunadamente, Prettier ofrece extensiones para una amplia gama de editores, desde Visual Studio Code hasta Sublime Text y más allá.

Aqui las mas recomendadas:

En caso de que estés integrándolo con ESLint, es necesario instalarlo también para que nos alerte sobre posibles errores.

Por ahora, esas serían todas las extensiones que necesitaríamos.

Paso 4: Formatea tu código

Ahora viene la parte más gratificante: ¡formatear tu código con solo usar Command + S! Simplemente abre tu archivo en el editor y guarda el documento. Verás cómo tu código se transforma mágicamente en una obra maestra de legibilidad y coherencia.

Pasaras de esto ❌:

A esto ✅:

Ahora sí podrás dormir feliz por las noches al ver que tu código se formatea solo.

🚨🚨 Recomendaciones finales 🚨🚨

Quizás llegaste hasta aquí y te diste cuenta de que guardar el documento no hizo lo que esperabas. Sin embargo, no te preocupes, tengo más soluciones para evitar que te vuelvas loco por esto. Ten en cuenta los siguientes consejos:

Agrega Prettier como tu formateador por defecto

Esto lo puedes hacer de la siguiente manera:

1. Haz clic derecho sobre tu código.
2. Luego, haz clic en Format Document with...
3. Selecciona Prettier como tu formateador por defecto.

Ahora si, intenta salvar tu archivo y este debería de formatearse automáticamente.

Revisa tu configuración de VSCode

1. command + shift + p (mac os) | windows + shift + p (windows)
2. Abre tu configuración JSON

Ahora, si estás intentando usar Prettier en JavaScript, busca tu configuración para JavaScript y asegúrate de tener defaultFormatter configurado como el formateador de Prettier, y también formatOnSave configurado como true para que pueda formatearse al guardar.

Si quieres detalles más claros, la extensión de Prettier tiene una configuración más detallada también.

En caso de que desees otra configuración para otro lenguaje o alguna configuración extra, la puedes encontrar en su documentación.

Extension que te puede salvar de enviar código mal formateado a tus PRs

Te recomiendo encarecidamente la extensión Error Lens. Con esta extensión, tendrás una visualización de los errores directamente en tu editor, lo que te permitirá solucionarlos antes de enviar tus commits. Es una forma más fácil de identificar qué puede estar causando los errores y abordarlos de manera proactiva.

En Conclusión: Vive Feliz, Codifica Feliz

Y así, descubrimos lo cool que puede llegar a ser Prettier para poner fin a los interminables disputas sobre el formato del código. Ahora nos podemos enfocar en lo que realmente importa: crear software increíble sin perder tiempo en detalles tediosos.

Entonces, la próxima vez que te encuentres en medio de debates sobre la indentación y los puntos y comas, recuerda que existe Prettier. Tu mente (y tus colaboradores) te lo agradecerán. 😊

En caso que quieras integrarlo con ESLint te dejo un video excelente donde se explica la integración paso a paso:

https://www.youtube.com/live/EEDRcolSHms?si=Aw48p9sJ_A8bHRkn