Mais bonito em grandes projetos: gaste 20 minutos em configuração, esqueça a formatação para sempre

Os desenvolvedores geralmente não concordam em formatar o código, e um dia de trabalho típico para muitos começa a se parecer com isso: café, codificação, tudo é pacífico e bom, e então, bang, e vem uma revisão de código que mostra o que você coloca em algum lugar colchetes incorretos ou não transferiram algo para uma nova linha.



Um ano atrás, uma das equipes em Skyeng encontrou tais holívoros em quase todas as análises. Mas então a pessoa com mais dor disse: “Agora vivemos no Prettier, você concorda?” Nos meses seguintes, os caras nunca levantaram a questão da formatação, e agora essa coisa está em todo o mono-repositório de front-end - e toda equipe o usa quem liga lá.

Como era antes

Naquela época, já havia dezenas de desenvolvedores em Skyeng, e de 10 a 20 recém-chegados podiam aparecer todos os meses. Todos trabalhavam (e trabalham) em equipes pequenas - cada uma, de fato, é considerada uma “unidade de combate” independente, com suas próprias tarefas e entendimentos.

Vamos imaginar um desses comandos - certamente todas as coincidências são aleatórias -:

Boris é o meio que veio até nós de outra grande empresa. Eles tinham seu próprio guia de estilo, mas ele tenta reaprender o nosso: no geral, ele faz isso, mas de tempos em tempos ele faz algo em relação à formatação e não sabe disso apenas na revisão de código. Um pouco, mas desagradável.

Pavel é um desenvolvedor mais experiente. Ele conhece seu trabalho, sempre executa tarefas com eficiência e pontualidade, mas às vezes esquece completamente do contrato e escreve à sua maneira. Como resultado, seu código não se encaixa em um projeto grande, embora seja escrito com alta qualidade e bom gosto.

Arthur é um perfeccionista com a filosofia do "código limpo - código compreensível": ele sempre se preocupa com o estilo do código. Obviamente, ele rejeitará o código dos colegas com vários comentários "aqui, coloque a chave na próxima linha" - e Boris gastará tempo editando e Pavel discutindo argumentos do nível "você não gosta, mude".

Como

O objetivo do Prettier é fazer o desenvolvedor não pensar em formatação: ele tem um mínimo de configurações. Isso subornou Pavel quando Arthur lançou um link para o bate-papo do projeto:

- definir o próprio Prettier,
- defina o gancho de pré-confirmação ( mais ),
- deixou alguns comentários no bate-papo informando que o estilo de código está lá (por exemplo, operações lógicas em ifs são colocadas no final da linha e não no início).

É isso, então a equipe mudou para Prettier. Aqui estão exemplos de código da indústria antes e depois do Prettier. É um pouco reformatado para mostrar os recursos desta ferramenta.

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 ) ) } 

Depois:

  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), ); } 

Mesmo que fosse escrito em uma linha, ainda seria reformatado como deveria:

  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),); } 

Outro pedaço de código, já sem ponto e vírgula. Para:

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

Depois:

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

Agora, a revisão do código é mais rápida, Boris não gasta muito tempo trabalhando na formatação de códigos já escritos, Pavel continua a escrever enquanto ele escrevia (mas agora ninguém está xingando com ele), e Arthur está finalmente satisfeito, entrando no repositório e sorrindo de código de beleza. Usando uma ferramenta simples de fevereiro de 2019, os caras economizaram muito tempo parando de discutir sobre formatação. E então eles convenceram o resto das equipes a fazer o mesmo.