Schöner in großen Projekten: Verbringen Sie 20 Minuten mit dem Einrichten, vergessen Sie die Formatierung für immer

Entwickler können sich oft nicht auf die Formatierung des Codes einigen, und ein typischer Arbeitstag für viele sieht dann so aus: Kaffee, Codierung, alles ist friedlich und gut, und dann kommt eine Codeüberprüfung, die zeigt, was Sie irgendwo abgelegt haben Klammern falsch oder etwas nicht in eine neue Zeile übertragen.



Vor einem Jahr stieß eines der Teams in Skyeng in fast jeder Bewertung auf solche Holivars. Aber dann sagte die Person mit den meisten Schmerzen: „Jetzt leben wir in Prettier, stimmst du zu?“ In den nächsten Monaten haben die Jungs nie die Frage der Formatierung aufgeworfen, und jetzt ist diese Sache im gesamten Frontend-Mono-Repository - und jedes Team nutzt sie wer ruft dort an.

Wie vorher

Zu dieser Zeit gab es in Skyeng bereits Dutzende von Entwicklern, und 10 bis 20 Neuankömmlinge konnten jeden Monat hinzukommen. Jeder arbeitete (und arbeitet) in kleinen Teams - jede gilt in der Tat als unabhängige „Kampfeinheit“ mit ihren eigenen Aufgaben und ihrem eigenen Verständnis.

Stellen wir uns einen solchen - sicherlich sind alle Zufälle zufällig - Befehl vor:

Boris ist die Mitte, die von einer anderen großen Firma zu uns gekommen ist. Sie hatten ihren eigenen Styleguide, aber er versucht, unseren neu zu lernen: Im Großen und Ganzen macht er das, aber ab und zu macht er etwas in Bezug auf die Formatierung und weiß es nicht nur in der Codeüberprüfung. Eine Kleinigkeit, aber unangenehm.

Pavel ist ein erfahrener Entwickler. Er kennt seine Arbeit, erledigt Aufgaben immer effizient und pünktlich, vergisst aber manchmal die Vereinbarung vollständig und schreibt auf seine eigene Weise. Infolgedessen passt der Code nicht in ein großes Projekt, obwohl er qualitativ hochwertig und geschmackvoll geschrieben ist.

Arthur ist ein Perfektionist mit der Philosophie „sauberer Code - verständlicher Code“: Er kümmert sich immer um den Code-Stil. Natürlich wird er den Kodex der Kollegen mit einer Reihe von Kommentaren ablehnen, "hier, setzen Sie die geschweifte Klammer in die nächste Zeile" - und Boris wird Zeit für die Bearbeitung aufwenden, und Pavel für Argumente der Ebene "Sie mögen es nicht, ändern Sie es".

Wie ist es passiert?

Prettiers Ziel ist es, den Entwickler nicht an die Formatierung zu denken: Es gibt nur ein Minimum an Einstellungen. Dies hat Pavel bestochen, als Arthur einen Link zum Chat des Projekts erstellte:

- Prettier selbst einstellen,
- den Pre-Commit-Haken setzen ( mehr ),
- hat ein paar Kommentare im Chat hinterlassen, die besagen, dass der Codestil vorhanden ist (z. B. werden logische Operationen in ifs am Ende der Zeile und nicht am Anfang platziert).

Das war's, also wechselte das Team zu Prettier. Hier sind Beispiele für Industriecode vor und nach Prettier. Es wurde leicht umformatiert, um die Funktionen dieses Tools zu demonstrieren.

An:

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

Nachher:

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

Selbst wenn es in einer Zeile geschrieben wäre, würde es dennoch wie folgt neu formatiert:

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

Ein weiterer Code, bereits ohne Semikolon. An:

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

Nachher:

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

Jetzt ist die Codeüberprüfung schneller, Boris verbringt nicht viel Zeit damit, bereits geschriebenen Code zu formatieren, Pavel schreibt weiter, während er schreibt (aber jetzt verflucht ihn niemand), und Arthur ist endlich zufrieden, geht in das Repository und lächelt Beauty-Code. Mit einem einfachen Tool aus dem Februar 2019 haben die Jungs eine Menge Zeit gespart, indem sie aufgehört haben, über die Formatierung zu streiten. Und dann haben sie den Rest der Teams davon überzeugt, dasselbe zu tun.