Lemoncode TV

Configurando Prettier

Esto de tener Prettier a nivel de Visual Studio Code está muy bien pero lo ideal sería poder tener unos settings a nivel de proyecto y asegurarnos que todo el mundo trabaja de la misma manera. ¿Podemos hacer ésto? La respuesta es sí, primero a nivel de settings de VSCode para mi proyecto puedo crear una configuración homogénea para todos mis compañeros.

Manos a la obra

Para este ejemplo vamos a poner el Format on save a false para que Prettier no haga el formateo automático en VSCode a nivel global.

Sin embargo a nivel de proyecto si que vamos a decirle que el Format On Save esté a true:

• Creamos una carpeta en el raíz del proyecto que vamos a llamar .vscode
• Creamos un fichero settings.json dentro de esa carpeta
• En ese fichero metemos los settings del proyecto, le digo que voy a usar prettier y que formatee al grabar

./vscode/settings.json

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": "true"
}

De esta manera podemos asegurarnos que tenemos Prettier activo para un proyecto en concreto y que no afecte a otros.

También podemos personalizar Prettier (ojo esto no es Linter, las configuraciones son limitadas), puedo decirle si quiere la coma al final o no, jugar con el tabWidth, elegir comillas dobles o simples...

En el raíz del proyecto creamos un fichero que se va a llamar .prettierrc.json y podemos poner los siguientes settings:

/.prettierrc.json

{
  "trailingComma": "none",
  "tabWidth": 4,
  "semi": true,
  "singleQuote": false
}

Aquí le decimos que vamos a tener un tabWidth de 6 (esto es un valor exagerado).

Si ahora vaoms a un fichero, modificamos algo y grabamos, verás como se pone todo con tab de 6.

Si volvemos a modificar la configuracion y ponemos tabWidth de 2, ya se nos pone todo como estaba.

Para saber más sobre que ofrece el fichero de prettierrc.json en este enlace puedes encontrar más información.

¿Te apuntas a nuestro máster?

Si te ha gustado este ejemplo y tienes ganas de aprender Front End guiado por un grupo de profesionales ¿Por qué no te apuntas a nuestro Máster Front End Online Lemoncode? Tenemos tanto edición de convocatoria con clases en vivo, como edición continua con mentorización, para que puedas ir a tu ritmo y aprender mucho.