Instalación de Prettier en MS Visual Studio Code

0
936

Cuando trabajas en un equipo de desarrollo hay un problema común: a cada persona le gusta formatearlo el código a su modo.

¿Qué tal si acordamos entre todos un formato y simplemente dándole a guardar en nuestro proyecto  que se formatee así?

De ese modo todo el mundo se acostumbrará pronto a ese formato predecible.

También cuando montemos integración continua podemos hacerlo dentro de la cadena de proceso.

Este tutorial forma parte de una cadena de tutoriales en las que pretendo simplemente probar tecnologías actuales. Aquí abajo podrás encontrarlos :

 

También  me gustaría que vieras este video de 2 minutos para entender dónde estamos y a dónde vamos


Mi equipo es Mac

macOS Catalina
Versión 10.15.2

MacBook Pro (15-inch, 2018)
Procesador 2,9 GHz Intel Core i9 de 6 núcleos
Memoria 32 GB 2400 MHz DDR4
Gráficos Intel UHD Graphics 630 1536 MB


Para jugar con el formateador Prettier solamente tenemos que ir a su playground.

https://prettier.io/playground/

Podemos hacer dos cosas, de hecho tendremos que hacer las dos. La primera es instalar un plugin en nuestro IDE y la segunda, instalarla en nuestro ordenador y servidor de compilación e integración continua para que se formatee todo el código independientemente de las acciones de cada programador en su propio equipo.

Empecemos por el final. Para instalar Prettier podemos usar npm install prettier -D en nuestra carpeta de trabajo

En un proyecto, desde la línea de comando podríamos ordenar el formato.

Como tenemos el control de versiones podemos comprobar fácilmente todos los cambios en ficheros existentes y los nuevos aportados.

No es mala idea hacer commit y push para tenerlo todo registrado en GitHub.

Podéis revisar en la ayuda los ámbitos en los que se puede instalar.

Vamos ahora a instalar el plugin de Prettier.

En MS Visual Studio Code usamos Shift-Command+P y escribimos install ex. También podemos ir al cuarto menú de la izquierda.

Elegimos prettier e instalamos.

Ahora, cuando estemos editando un fichero para aplicar el formato vamos a elegir la opción de Format Document With.

Elegimos Prettier.

Esto se puede aplicar a un párrafo o documento entero pero es un poco incómodo.

Podemos hacer ahora que al guardar cualquier documento por defecto se formatee inmediatamente.

En configuración vamos a User Settings.

Elegimos FormatAndSave y lo activamos.

Y cuando volvamos a elegir la opción de formato de código podemos configurar el formateador por defecto al guardar: prettier.

He usado como referencia este video que, aunque no está del todo actualizado, me ha valido muy bien:

Bueno, tenemos las fases para configurar el ciclo de vida del proyecto.

Aquí te dejo el enlace al siguiente tutorial:

Introducción a Parcel

Dejar respuesta

Please enter your comment!
Please enter your name here