Configuración de Prettier en Proyectos JavaScript

Clase 9 de 38 • Curso de Unit Testing para MEAN con Jasmine

Resumen

Prettier es un formateador de código opinado. Aplica un estilo coherente al analizar su código y reimprimirlo con sus propias reglas que toman en cuenta la longitud máxima de la línea, envolviendo el código cuando sea necesario.

Puede ejecutarse en su editor al guardar, en un gancho de confirmación previa o en entornos CI para garantizar que su base de código tenga un estilo coherente sin que los desarrolladores tengan que publicar un comentario minucioso sobre una revisión de código.

Ofrece soporte para:

JavaScript, including ES2017
JSX
Angular
Vue
Flow
TypeScript
CSS, Less, and SCSS
HTML
JSON
GraphQL
Markdown, including GFM and MDX
YAML

Por ejemplo tenemos éste codigo de JavaScript mal formateado:

foo(reallyLongArg(), omgSoManyParameters(), IShouldRefactorThis(), isThereSeriouslyAnotherOne());

Al pasar Prettier nos lo deja de una manera más legible:

foo(
  reallyLongArg(),
  omgSoManyParameters(),
  IShouldRefactorThis(),
  isThereSeriouslyAnotherOne()
);

Cristian De Blasis

student•

En mi caso al instalar Prettier no me formateaba al guardar. Para esto tuve que ir a File->Preference->Setting Text Editor-> Formating y active el combo "Format on Save"

Kevin Costa

student•

También está interesante setear esbenp.prettier-vscode como Default Formatter; por lo que entiendo sino funciona por defecto el vscode. Pero esto no está claro, por lo menos no funciona como en la clase.

Wilson Alejandro Gonzalez Gaitan

student•

Recomiendo no instalar cosas globales mejor dejarlas sobre el proyecto, en este caso para instalar como dependencia de desarrollo seria npm install --save-dev prettier

Luis Abdel Rangel Castro

student•

npm install -g prettier

Rosario Prados

student•

A mi no me autoformateaba al guardar hasta que puse en settings.json lo siguiente:

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

Isaac Puc

student•

A mí no me formateaba al guardar como el video de la clase, lo que hice fue:

Presionar: Alt + shift + f
Me salió una ventana de establecer formateador por defecto y seleccione Prettier.

Adicional si con eso no queda entrar a: File / Preferences / Settings / Text Editor / Formatting y marcar el recuadro de Format on Save

Milton Fabián Ospina León

student•

Linters => Code Quality Prettier => Code Formatting

Pueden convivir usando: https://github.com/prettier/eslint-config-prettier

Ricardo Celis

teacher•

https://prettier.io

Carlos Enrique Ramírez Flores

student•

Pues yo guardo y no me formatea mi código, hoy es 25-04-2020 voy investigar en la documentación haber que esta pasando!

Damian Spizzirri

student•

eslint me arroja error al final del ultimo caracter, se les ocurre porque puede ser?? Despues del ; del saludar. Probe poniendolo entre { } y sacando el : pero sigue igual.

const saludar = nombre => `Hola ${nombre}`;

module.exports = saludar;

Luis Abdel Rangel Castro

student•

const saludar = (nombre) => `Hello {nombre}`;

module.exports = saludar;