Lebih cantik dalam proyek-proyek besar: luangkan 20 menit untuk pengaturan, lupakan memformat selamanya

Pengembang sering tidak setuju untuk memformat kode, dan hari kerja yang khas bagi banyak orang mulai terlihat seperti ini: kopi, pengkodean, semuanya damai dan baik, lalu, bang, dan ada ulasan kode yang menunjukkan apa yang Anda letakkan di suatu tempat kurung salah atau tidak mentransfer sesuatu ke baris baru.



Setahun yang lalu, salah satu tim di Skyeng menemui holivar semacam itu di hampir setiap ulasan. Tetapi kemudian orang yang paling kesakitan, berkata: "Sekarang kita hidup di Prettier, apakah Anda setuju?" Selama bulan-bulan berikutnya, orang-orang tidak pernah mengajukan pertanyaan tentang pemformatan, dan sekarang hal ini ada di seluruh repositori mono frontend - dan setiap tim menggunakannya yang memanggil di sana.

Seperti sebelumnya

Saat itu, sudah ada puluhan pengembang di Skyeng, dan 10-20 pendatang baru bisa datang setiap bulan. Setiap orang bekerja (dan bekerja) dalam tim kecil - masing-masing, pada kenyataannya, dianggap sebagai "unit tempur" independen dengan tugas dan pemahamannya sendiri.

Mari kita bayangkan satu seperti itu - tentu saja semua kebetulan adalah acak - perintah:

Boris adalah perantara yang datang kepada kami dari perusahaan besar lain. Mereka memiliki panduan gaya mereka sendiri, tetapi dia mencoba untuk mempelajari kembali kepada kita: secara keseluruhan, dia melakukannya, tetapi dari waktu ke waktu dia melakukan sesuatu mengenai pemformatan dan tidak tahu tentang hal itu hanya dalam tinjauan kode. Agak, tapi tidak menyenangkan.

Pavel adalah pengembang yang lebih berpengalaman. Dia tahu pekerjaannya, selalu melakukan tugas dengan efisien dan tepat waktu, tetapi kadang-kadang benar-benar lupa tentang perjanjian dan menulis dengan caranya sendiri. Akibatnya, kodenya tidak sesuai dengan proyek besar, meskipun ditulis dengan kualitas tinggi dan gurih.

Arthur adalah perfeksionis dengan filosofi "kode bersih - kode yang dapat dimengerti": ia selalu khawatir tentang gaya kode. Tentu saja, ia akan menolak kode kolega dengan banyak komentar "di sini, letakkan kurung kurawal di baris berikutnya" - dan Boris akan menghabiskan waktu untuk mengedit, dan Pavel pada argumen tingkat "Anda tidak suka, ubah".

Bagaimana bisa?

Tujuan Prettier adalah untuk membuat pengembang tidak berpikir tentang pemformatan: ia memiliki pengaturan minimum. Ini menyuap Pavel ketika Arthur melemparkan tautan ke obrolan proyek:

- atur Prettier sendiri,
- atur kait pra-komit ( lebih banyak ),
- Meninggalkan beberapa komentar dalam obrolan bahwa gaya kode ada di sana (misalnya, operasi logis jika ditempatkan di akhir baris, dan bukan di awal).

Itu dia, jadi tim beralih ke Prettier. Berikut adalah contoh kode industri sebelum dan sesudah Prettier. Ini sedikit diformat ulang untuk menunjukkan kemampuan alat ini.

Kepada:

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

Setelah:

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

Bahkan jika itu ditulis dalam satu baris, itu masih akan diformat ulang sebagaimana mestinya:

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

Sepotong kode lagi, sudah tanpa titik koma. Kepada:

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

Setelah:

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

Sekarang peninjauan kode lebih cepat, Boris tidak menghabiskan banyak waktu bekerja untuk memformat kode yang sudah ditulis, Pavel terus menulis ketika ia menulis (tapi sekarang tidak ada yang mengutuk dengannya), dan Arthur akhirnya puas, pergi ke repositori dan tersenyum dari kode kecantikan. Menggunakan alat sederhana dari Februari 2019, mereka menghemat banyak waktu dengan berhenti berdebat tentang pemformatan. Dan kemudian mereka meyakinkan seluruh tim untuk melakukan hal yang sama.