Prettier

Comando para instalar Prettier npm i -D -E prettier

Hecho esto, debemos crear un archivo para configuración de Prettier, el archivo debe llamarse .prettierrc Link de la documentación

Configuraciones báscias que uso a diario

{
  "printWidth": 100,
  "semi": false,
  "singleQuote": true,
  "quoteProps": "consistent",
  "jsxSingleQuote": true,
  "bracketSpacing": true
}

.prettierignore

public/
dist/
package-lock.json

Este archivo se escriben los nombres de carpetas y archivos que queremos que Prettier no formatee, por ejemplo las carpeta dist o public ya que tienen código que se genera a partir de lo que nosotros escribimos en la carpeta src, el archivo package-lock.json tampoco queremos que le de formato ya que también es un archivo que se genera automáticamente. Si vienes de leer el gist anterior donde se instala ESLint, notarás que con Prettier se añade el archivo package-lock.json y eso es porque ESLint es una herramienta que solo funciona para JavaScript, pero Prettier formatea muchos tipos de archivos, JSON, JavaScript, etc etc.

Configuraciones extras

En Visual Studio Code, es necesario tener instalada la extensión de Prettier para que pueda formatear el código cuando le damos a Ctrl + S para guardar. Link de la extensión

Para poder formatear el código cuando guardamos, damos click derecho en el archivo, y en el menú contextual que nos aparece, le damos a la opción Format document with... ó Formatear documento con..., eso nos abre una ventana para elegir varias opciones, entre ellas una que dice Configure Default Formater... ó Configurar formateador por defecto..., clickeamos ahí y elegimos Prettier - Code Formatter

Si no te formatea el código cada vez que guardes, debes cambiar a true esa opción en las configuraciones de VSCode. En Archivo > Preferencias > Configuración ó File > Preferences > Settings busca format on save, y habilitas el check para que puedas formatear cuando guardas.

• Sección anterior: Instalando ESLint
• Siguiente sección: Instalando "eslint-config-prettier"