Setiap pasukan pembangunan mempunyai cerita seperti ini. Satu pull request dibiarkan terbuka selama setengah hari. Bukan kerana logiknya rosak atau kontrak API berubah, tetapi kerana dua penyemak tidak bersetuju sama ada object literal memerlukan trailing commas. Perbincangan semakin panjang. Seseorang memuat naik pautan panduan gaya. Seseorang yang lain membalas dengan panduan yang berbeza. Menjelang masa kod tersebut digabungkan (merge), semua yang terlibat telah hilang konteks tentang ciri-ciri yang sebenarnya sedang mereka bina.
Pertelingkahan ini memakan kos yang tinggi. Ia membazirkan berjam-jam masa jurutera kanan, mewujudkan rasa tidak puas hati antara rakan sepasukan, dan melatih pembangun junior untuk percaya bahawa kejuruteraan perisian hanyalah tentang memenangi hujah mengenai tanda titik koma (semicolon). Bahagian yang paling teruk? Produk tidak peduli. Pengguna anda tidak akan pernah menyedari perbezaan antara ruang (space) berbanding tab. Mereka akan menyedari pepijat (bug) yang tidak anda betulkan kerana anda sibuk berdebat tentang tanda petikan.
Konsistensi memang penting. Kod asas (codebase) yang kelihatan seperti ditulis oleh seorang individu adalah lebih mudah dibaca, lebih mudah disemak, dan lebih mudah untuk dinyahpepijat (debug). Kesilapannya adalah cuba menguatkuasakan konsistensi tersebut secara manual.
Automatikkan Perkara yang Membosankan
Penyelesaiannya mudah. Hapuskan penilaian manusia daripada pemformatan sepenuhnya. Serahkan tugas itu kepada alatan yang tidak mempunyai ego dan tidak merasa penat.
Tiga alatan mengendalikan perkara ini dengan kemas.
Prettier mengambil kod anda dan memformat semula secara automatik. Ia tidak meminta izin. Anda tidak perlu lagi memikirkan tentang panjang baris, gaya tanda petikan, atau cara memecahkan tandatangan fungsi yang panjang merentasi beberapa baris. Anda simpan fail tersebut, dan Prettier menjadikannya konsisten.
ESLint mengendalikan masalah yang tidak disentuh oleh Prettier. Ia mengesan pemboleh ubah yang tidak digunakan, kod yang tidak dapat dicapai (unreachable code), kebergantungan yang hilang dalam React hooks, dan corak yang secara sejarahnya membawa kepada pepijat. Apabila dikonfigurasikan dengan betul, ia tidak akan mencampuri pemformatan dan sebaliknya fokus pada kualiti kod yang sebenar.
Husky memasang pre-commit hook yang menghalang apa-apa sahaja daripada memasuki repositori anda sehingga semakan automatik lulus. Ia mengubah saluran paip (pipeline) Git anda menjadi penjaga pintu (gatekeeper) dan bukannya sekadar kotak cadangan.
Bersama-sama, ia membentuk satu kitaran yang rapat. Anda menulis kod mengikut cara yang anda mahu secara lokal. Apabila anda melakukan commit, alatan tersebut akan membersih dan menyemaknya. Hanya selepas itu kod tersebut meninggalkan mesin anda.
Mengapa Stack Khusus Ini Berkesan
Anda boleh menghabiskan masa berminggu-minggu untuk melaras peraturan ESLint secara manual. Elakkan keinginan itu. Matlamat di sini adalah untuk berhenti berdebat tentang gaya, bukan untuk mencipta pekerjaan sepenuh masa yang baharu sebagai kurator panduan gaya.
Prettier sengaja direka dengan tetapan yang tetap (opinionated). Ia menawarkan pilihan konfigurasi yang terhad kerana setiap pilihan akan menjadi bahan perdebatan pada masa hadapan. Tetapan lalainya adalah munasabah. Pilih satu set kecil untuk diubah suai (overrides), tuliskan sekali, dan teruskan kerja anda.
ESLint, jika dibiarkan tanpa kawalan, akan cuba menguatkuasakan kedua-dua kualiti kod dan peraturan pemformatan seperti penggunaan tanda titik koma dan saiz inden. Ini mewujudkan geseran dengan Prettier kerana kedua-dua alatan akan cuba menyunting aksara yang sama. Pakej eslint-config-prettier menyelesaikan masalah ini dengan menyahaktifkan semua peraturan ESLint yang bercanggah dengan Prettier. Pengasingan tugas ini adalah kritikal. Prettier menguruskan aspek kosmetik. ESLint menguruskan logik.
Menjalankan semakan hanya dalam integrasi berterusan (continuous integration) adalah sudah terlambat. Menjelang masa CI gagal, anda sudah pun melakukan commit kod yang bersepah, bertukar konteks ke tugasan lain, dan mungkin telah membuka pull request. Membetulkannya memerlukan commit lain, push lain, dan kitaran menunggu yang lain. Husky memendekkan kitaran maklum balas tersebut kepada beberapa saat sahaja. Lint-staged menjadikannya pantas dengan hanya menjalankan alatan terhadap fail yang anda ubah, bukannya mengimbas keseluruhan repositori pada setiap commit.
Cara Menyiapkannya Langkah demi Langkah
Tetapan berikut menyasarkan projek JavaScript atau React moden, tetapi coraknya boleh digunakan untuk TypeScript, Vue, atau Node dengan sedikit pelarasan. Jalankan setiap langkah dari akar (root) projek anda.
Mulakan dengan memasang semuanya sebagai dev dependencies:
npm install -D prettier eslint husky lint-staged eslint-config-prettier