Prettier es un formateador de código muy “opinionated”.

Opinionated quiere decir que esta biblioteca toma desiciones por ti sin preguntar, una colección de reglas previamente acordadas que aplica automáticamente, todas basadas en buenas prácticas. ✅

En palabras simples, Prettier corrige el estilo de tu código por ti, es decir que al programar ya no tienes que preocuparte por si dejas el corchete antes del salto de linea o después, tampoco debes preocuparte por errores de sintaxis invisibles, Prettier se encarga de todo. ¿Genial no? 🤤

¿Yo debería usarlo?

Prettier evita los debates.

Entender por qué yo debería usar Prettier, es llegar a un plano de conciencia donde te das cuenta que los seres humanos somos muy diversos, que a todos nos gustan cosas diferentes y que eso está bien y es hermoso, es mejor ser diferentes pero estar juntos.

Prettier define una guía de estilo que permite colaborar con otros programadores usando un solo estilo en el código; lo que también, lo vuelve más fácil de leer y de mantener.

Además Prettier convierte tu proyecto en amigable para el principiante o jr. developer, facilitando la colaboración. Yo suelo recomendarlo a mis estudiantes pues como principiante se comenten muchos errores de sintaxis y Prettier viene muy bien.

También puedes mejorar el código legacy de tu proyecto.

Así que sí, yo creo que hay muchos beneficios en usarlo.

¿Qué tiene de especial la guía de Prettier?

El equipo de Prettier, es el mismo equipo de React, ellos, usan una metáfora: dicen que el propósito de Prettier es liberar nuestros hilos mentales (mental threads) poniendo fin a la discusión sobre estilos.

Me gusta esta metáfora porque hay momentos para la discusión, sobre todo cuando los temas son nuevos, pero si eres un programador pragmático, seguro prefieres ocupar tu mente en cosas más interesantes que discutir. 🧠 😎

😱 ¿Por qué se dice que Prettier es como Steve Jobs?

Steve Jobs era conocido por utilizar la misma ropa cada día pues él decía que tenía un millón de decisiones que tomar, así que no quería molestarse en tomar decisiones triviales como, seleccionar ropa que ponerse. Mark Zuckerberg también es conocido por hacer lo mismo. ¿Esto parece exagerado verdad?

Yo creo que no. 🧐

Como programadores o expertos web, nuestro trabajo es intelectual, y se nutre de nuestra práctica, exploración y experiencia.

Mientras más enfocamos nuestros recursos mentales o mental threads, como dice el equipo de Prettier, en actividades en las que de verdad queremos destacar, nos volvemos más competentes y encontramos más oportunidades, se puede decir que creamos oportunidades conforme nos volvemos más hábiles y más inteligentes. 🤓

Recuerda que nuestro cerebro se empapa de lo que consumes, consume educación.

¿Cómo se instala en Node?

Podemos instalar Prettier directamente en la terminal con npm.

npm install --save-dev prettier

Y en caso de necesitar decirle a Prettier que no formate ciertos archivos o que use cuatro espacios en lugar de dos, siempre puedes crear un archivo prettierrc.json, donde podrás cambiar cualquier regla.

Ahora podemos ejecutar el comando para formatear nuestros archivos.

npx prettier . --write

Perfecto, esto podría ser parte de un comando en tu package.json, aunque existe una mejor forma de usarlo sin tener que escribir comandos.

Esta es la forma más popular de usar Prettier

Usando una extensión de VSCode o un plugin en el editor de tu preferencia.

Ejecutar Prettier automáticamente desde nuestro editor es, tal vez, la mejor forma de aprovechar esta genial herramienta, pues se ejecutará con una combinación de teclas o mejor aún, cada que guardas tu archivo en VSCode.

Cuando una linea de código se vuelve tan larga que ya no cabe en la pantalla, puedes guardar el archivo y mágicamente se convertirá en multiples lineas, o cuando pegas algún código y la indentación se destruye, Prettier se encargará, sin necesidad de salir del editor. 🤩

Encontraremos la extensión en VSCode buscando con Prettier - Code formatter y la instalamos*.*

👀 También puedes instalarla con el launcher (Ctrl+P), y este comando: ext install esbenp.prettier-vscode

Detalles de la instalación

Dentro de settings, en el objeto de configuración de VSCode.

Podemos asegurarnos de que la extensión se utilizará para los lenguajes que necesitas.

{
  "workbench.iconTheme": "vscode-icons",
  "editor.minimap.enabled": false,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "workbench.colorTheme": "Dracula Soft",
  "workbench.sideBar.location": "right",
  "[typescript]": {
    "editor.formatOnPaste": false,
    "editor.formatOnSave": true,
		 "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[prisma]": {
    "editor.defaultFormatter": "Prisma.prisma"
  },
  "editor.wordWrap": "on",
  "svelte.enable-ts-plugin": true,
  "workbench.startupEditor": "none",
  "editor.formatOnSave": true,
  "window.zoomLevel": 3
}

En este archivo nos aseguramos de que la flag editor.defaultFormatter, tenga el valor "esbenp.prettier-vscode". También observa que puedes tener un formateador diferente para cada lenguaje de programación o tipo de archivo, aquí, por ejemplo, Prisma usa su propio plugin para dar formato a su archivo de esquema.

Ahora que puedes despreocuparte por el estilo de tu código

Ya te puedes concentra en cosas más interesantes, como mejorar la eficiencia de tu código, ya sabes; Big O notation, tiempo constante, lineal, algoritmos de tercer tipo, logarítmicos y todo eso que te es más útil que pelear sobre si se pone el punto y coma o no.

👀 Recuerda que no tienes que aceptar todas las convenciones que ya vienen con Prettier, siempre puedes modificarlas para que coincidan con el estilo de tu proyecto con el archivo prettierc.json.

Te dejo un enlace con los detalles de configuración en la documentación oficial, que te recomiendo leer.

Abrazo. blissmo.