DEV Community

Cover image for Como configurar Prettier y no morir en el intento, extensiones de VSCode que te ayudar谩n 馃く
Geovany
Geovany

Posted on

Como configurar Prettier y no morir en el intento, extensiones de VSCode que te ayudar谩n 馃く

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.

prettier is cool


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
Enter fullscreen mode Exit fullscreen mode

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"
}
Enter fullscreen mode Exit fullscreen mode

鈿狅笍馃毃 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 馃憤

ok VSCode


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:

prettier extension

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

ESLint extension

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

formatting with prettier


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 鉂:

bad code

A esto 鉁:

good code

Ahora s铆 podr谩s dormir feliz por las noches al ver que tu c贸digo se formatea solo.

coding chill


馃毃馃毃 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.

second step

third step

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

VSCode configuration

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.
VSCode config javascript

Si quieres detalles m谩s claros, la extensi贸n de Prettier tiene una configuraci贸n m谩s detallada tambi茅n.

prettier configuration

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.

error lens


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

Top comments (0)