Plus joli dans les grands projets: passez 20 minutes sur la configuration, oubliez le formatage pour toujours

Les développeurs ne peuvent souvent pas s'entendre sur le formatage du code, et une journée de travail typique pour beaucoup commence à ressembler à ceci: café, codage, tout est paisible et bon, puis, bang, et il y a un examen du code qui montre ce que vous mettez quelque part crochets incorrects ou n'a pas transféré quelque chose à une nouvelle ligne.



Il y a un an, l'une des équipes de Skyeng a rencontré de tels holivars dans presque tous les examens. Mais ensuite, la personne la plus douloureuse a dit: "Maintenant, nous vivons sur Prettier, êtes-vous d'accord?" Au cours des prochains mois, les gars n'ont jamais soulevé la question du formatage, et maintenant cette chose est sur l'ensemble du mono-référentiel frontal - et chaque équipe l'utilise qui appelle là-bas.

Comme avant

À cette époque, Skyeng comptait déjà des dizaines de développeurs et 10 à 20 nouveaux arrivants pouvaient venir chaque mois. Tout le monde a travaillé (et travaille) en petites équipes - chacune, en fait, est considérée comme une «unité de combat» indépendante avec ses propres tâches et sa propre compréhension.

Imaginons une telle commande - certainement toutes les coïncidences sont aléatoires - commande:

Boris est le milieu qui nous est venu d'une autre grande entreprise. Ils avaient leur propre guide de style, mais il essaie de réapprendre le nôtre: dans l'ensemble, il le fait, mais de temps en temps, il fait quelque chose concernant le formatage et ne le sait pas uniquement dans la révision de code. Une bagatelle, mais désagréable.

Pavel est un développeur plus expérimenté. Il connaît son travail, exécute toujours les tâches efficacement et à temps, mais oublie parfois complètement l'accord et écrit à sa manière. En conséquence, son code ne rentre pas dans un grand projet, bien qu'il soit écrit avec une grande qualité et de bon goût.

Arthur est un perfectionniste avec la philosophie du «code propre - code compréhensible»: il se soucie toujours du style de code. Bien sûr, il rejettera le code de ses collègues avec un tas de commentaires "ici, mettez l'accolade sur la ligne suivante" - et Boris passera du temps à l'édition, et Pavel aux arguments du niveau "vous ne l'aimez pas, changez-le".

Comment

Le but de Prettier est de ne pas faire réfléchir le développeur au formatage: il a un minimum de paramètres. Cela a corrompu Pavel quand Arthur a jeté un lien vers le chat du projet:

- définir Prettier lui-même,
- définir le hook de pré-validation ( plus ),
- laissé quelques commentaires dans le chat que le style de code est là (par exemple, les opérations logiques dans les ifs sont placées à la fin de la ligne, et non au début).

C'est tout, alors l'équipe est passée à Prettier. Voici des exemples de code de l'industrie avant et après Prettier. Il est légèrement reformaté pour montrer les capacités de cet outil.

À:

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

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

Même s'il était écrit sur une seule ligne, il serait quand même reformaté comme il se doit:

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

Un autre morceau de code, déjà sans point-virgule. À:

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

Après:

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

Maintenant, la révision du code est plus rapide, Boris ne passe pas beaucoup de temps à travailler sur le formatage du code déjà écrit, Pavel continue d'écrire comme il l'a écrit (mais maintenant, personne ne maudit avec lui), et Arthur est finalement satisfait, entrant dans le référentiel et souriant de code de beauté. À l'aide d'un outil simple de février 2019, les gars ont économisé une tonne de temps en arrêtant de se disputer sur le formatage. Et puis ils ont convaincu le reste des équipes de faire de même.