Más bonito en proyectos grandes: dedica 20 minutos a la configuración, olvídate del formateo para siempre

Los desarrolladores a menudo no pueden ponerse de acuerdo para formatear el código, y un día de trabajo típico para muchos comienza a verse así: café, codificación, todo es pacífico y bueno, y luego, aparece una revisión del código que muestra lo que pones en alguna parte corchetes incorrectos o no transfirieron algo a una nueva línea.



Hace un año, uno de los equipos en Skyeng encontró tales holivars en casi todas las revisiones. Pero luego, la persona con más dolor dijo: "Ahora vivimos en Prettier, ¿está de acuerdo?" En los próximos meses, los chicos nunca plantearon la cuestión del formateo, y ahora esto está en todo el repositorio de frontend, y cada equipo lo usa quien llama allí.

Como era antes

En ese momento, ya había docenas de desarrolladores en Skyeng, y entre 10 y 20 recién llegados podían venir cada mes. Todos trabajaron (y trabajan) en equipos pequeños; cada uno, de hecho, se considera una "unidad de combate" independiente con sus propias tareas y conocimientos.

Imaginemos uno de estos - ciertamente todas las coincidencias son aleatorias - comando:

Boris es el medio que vino a nosotros desde otra gran empresa. Tenían su propia guía de estilo, pero él intenta volver a aprender la nuestra: en general, lo hace, pero de vez en cuando hace algo con respecto al formato y no lo sabe solo en la revisión de código. Un poco, pero desagradable.

Pavel es un desarrollador más experimentado. Él conoce su trabajo, siempre realiza tareas de manera eficiente y a tiempo, pero a veces se olvida por completo del acuerdo y escribe a su manera. Como resultado, su código no cabe en un proyecto grande, aunque está escrito con alta calidad y buen gusto.

Arthur es un perfeccionista con la filosofía de "código limpio - código comprensible": siempre se preocupa por el estilo del código. Por supuesto, rechazará el código de colegas con un montón de comentarios "aquí, ponga la llave en la siguiente línea", y Boris pasará tiempo editando y Pavel en argumentos del nivel "no le gusta, cámbielo".

Como

El objetivo de Prettier es hacer que el desarrollador no piense en formatear: tiene un mínimo de configuraciones. Esto sobornó a Pavel cuando Arthur lanzó un enlace al chat del proyecto:

- Prettier mismo,
- establecer el enlace previo a la confirmación ( más ),
- dejó un par de comentarios en el chat de que el estilo de código está allí (por ejemplo, las operaciones lógicas en ifs se colocan al final de la línea y no al principio).

Eso es todo, así que el equipo cambió a Prettier. Aquí hay ejemplos de código de la industria antes y después de Prettier. Está ligeramente reformateado para mostrar las capacidades de esta herramienta.

Para:

public listenDndForFocusEvents(channel: string): Observable<boolean> { return this.drag .pipe( filter( event => event.channel === channel ), filter( event => event instanceof DndDragStartEvent || event instanceof DndDragEndEvent ), map( event => event instanceof DndDragStartEvent ) ) } 

Después:

  public listenDndForFocusEvents(channel: string): Observable<boolean> { return this.drag.pipe( filter(event => event.channel === channel), filter(event => event instanceof DndDragStartEvent || event instanceof DndDragEndEvent), map(event => event instanceof DndDragStartEvent), ); } 

Incluso si estuviera escrito en una línea, aún se reformateará como debería:

  public listenDndForFocusEvents(channel: string): Observable<boolean> { return this.drag.pipe(filter(event => event.channel === channel), filter(event => event instanceof DndDragStartEvent || event instanceof DndDragEndEvent), map(event => event instanceof DndDragStartEvent),); } 

Otra pieza de código, ya sin punto y coma. Para:

 const lessonCount$ = this.studentLessonsCounterService .getCounter().pipe(map(featureInfo => featureInfo.lessonCount)) const isItTimeForNotification$ = lessonCount$.pipe(map(lessonCount => lessonCount % REAL_TALK_NOTIFICATION_LESSON_INTERVAL === 0)) 

Después:

 const lessonCount$ = this.studentLessonsCounterService .getCounter() .pipe(map(featureInfo => featureInfo.lessonCount)); const isItTimeForNotification$ = lessonCount$.pipe( map(lessonCount => lessonCount % REAL_TALK_NOTIFICATION_LESSON_INTERVAL === 0), ); 

Ahora la revisión del código es más rápida, Boris no pasa mucho tiempo trabajando en formatear el código ya escrito, Pavel continúa escribiendo mientras escribía (pero ahora nadie lo maldice), y Arthur finalmente está satisfecho, entra al repositorio y sonríe. código de belleza Usando una herramienta simple de febrero de 2019, los chicos ahorraron un montón de tiempo al dejar de discutir sobre el formateo. Y luego convencieron al resto de los equipos para que hicieran lo mismo.