Sobre Prettier
Prettier1 es una herramienta que nos ayuda a mantener el formato de nuestro código de manera consistente. Funciona en diferentes editores de código y para diferentes lenguajes.
En HTML nos ayuda a mantener una legibilidad más adecuada por medio de los saltos de línea y la indentación.
En CSS nos ayuda a espaciar correctamente los selectores y las reglas.
En JS nos ayuda a autocompletar el punto y coma, además de mantener los espacios consistentes.
Instalación
Podemos instalarla en VS Code como una extensión. Para ello podemos ir a la barra lateral > extensiones y buscar prettier.
Configuración
Cómo activarla
Vamos a las opciones de nuestro editor (podemos usar el atajo ctrl/cmd + ,), y buscamos formatter (formateador).
En la lista Default formatter vamos a seleccionar Prettier.
Cómo formatear automáticamente al guardar
Para un mejor flujo de trabajo, podemos hacer que este formateador funcione al momento de guardar nuestros archivos.
En la misma búsqueda de ajustes podemos encontrar la opción Format On Save (formatear al guardar), y la activamos.
Ahora cada que guardemos algún archivo de código que esté soportado por esta herramienta, cambiará el formato de manera automática.
Se puede configurar para seguir diferentes reglas de formato, aunque las reglas por defecto son suficiente para los principiantes.