Setiap tim pengembang memiliki cerita seperti ini. Sebuah pull request dibiarkan terbuka selama setengah hari. Bukan karena logikanya rusak atau kontrak API berubah, tetapi karena dua reviewer tidak setuju apakah object literal memerlukan trailing commas. Diskusi pun memanjang. Seseorang membagikan tautan panduan gaya. Orang lain membalas dengan panduan yang berbeda. Pada saat kode akhirnya digabungkan, semua orang yang terlibat telah kehilangan konteks dari fitur yang sebenarnya sedang mereka bangun.
Pertengkaran ini memakan biaya mahal. Hal ini menghabiskan waktu berjam-jam bagi engineer senior, menciptakan rasa kesal yang terpendam di antara rekan tim, dan melatih developer junior untuk percaya bahwa rekayasa perangkat lunak sebagian besar hanyalah tentang memenangkan argumen soal titik koma. Bagian terburuknya? Produk tidak peduli. Pengguna Anda tidak akan pernah menyadari perbedaan antara spasi versus tab. Mereka akan menyadari bug yang tidak Anda perbaiki karena Anda sibuk memperdebatkan tanda kutip.
Konsistensi itu penting. Sebuah codebase yang terlihat seperti ditulis oleh satu orang akan lebih mudah dibaca, lebih mudah ditinjau, dan lebih mudah didebug. Kesalahannya adalah mencoba memaksakan konsistensi tersebut secara manual.
Otomatiskan Hal-hal yang Membosankan
Solusinya sederhana. Hilangkan penilaian manusia dari pemformatan sepenuhnya. Serahkan kepada alat yang tidak memiliki ego dan tidak merasa lelah.
Tiga alat menangani hal ini dengan rapi.
Prettier mengambil kode Anda dan memformat ulangnya secara otomatis. Ia tidak meminta izin. Anda berhenti memikirkan panjang baris, gaya tanda kutip, atau cara memecah signature fungsi yang panjang ke beberapa baris. Anda menyimpan file tersebut. Prettier membuatnya konsisten.
ESLint menangani masalah yang tidak disentuh oleh Prettier. Ia menangkap variabel yang tidak digunakan, kode yang tidak dapat dijangkau, dependency yang hilang pada React hooks, dan pola yang secara historis menyebabkan bug. Jika dikonfigurasi dengan benar, ia tidak akan mencampuri pemformatan dan fokus pada kualitas kode yang sebenarnya.
Husky menginstal pre-commit hook yang memblokir apa pun agar tidak masuk ke repositori Anda sampai pemeriksaan otomatis lolos. Ia mengubah pipeline Git Anda menjadi penjaga gerbang, alih-alih sekadar kotak saran.
Bersama-sama, mereka membentuk loop yang rapat. Anda menulis kode sesuka hati Anda secara lokal. Saat Anda melakukan commit, alat-alat tersebut akan membersihkan dan memeriksanya. Baru setelah itu kode meninggalkan mesin Anda.
Mengapa Stack Spesifik Ini Berhasil
Anda bisa menghabiskan berminggu-minggu untuk menyetel aturan ESLint secara manual. Hindari keinginan itu. Tujuannya di sini adalah untuk berhenti memperdebatkan gaya, bukan untuk menciptakan pekerjaan penuh waktu baru sebagai kurator panduan gaya.
Prettier sengaja dibuat opinionated. Ia menawarkan opsi konfigurasi yang terbatas karena setiap opsi adalah potensi argumen di masa depan. Pengaturan default-nya sudah masuk akal. Pilih sekumpulan kecil override, tuliskan sekali, dan lanjutkan pekerjaan Anda.
ESLint, jika dibiarkan sendiri, akan mencoba memaksakan aturan kualitas kode sekaligus aturan pemformatan seperti penggunaan titik koma dan ukuran indentasi. Hal ini menciptakan gesekan dengan Prettier karena kedua alat tersebut akan mencoba mengedit karakter yang sama. Paket eslint-config-prettier menyelesaikan masalah ini dengan menonaktifkan semua aturan ESLint yang berkonflik dengan Prettier. Pemisahan tugas ini sangat krusial. Prettier menangani estetika. ESLint menangani logika.
Menjalankan pengecekan hanya di continuous integration sudah terlambat. Pada saat CI gagal, Anda sudah terlanjur melakukan commit kode yang berantakan, beralih konteks ke tugas lain, dan mungkin sudah membuka pull request. Memperbaikinya memerlukan commit lain, push lain, dan siklus menunggu lainnya. Husky mempersingkat loop umpan balik tersebut menjadi hitungan detik. Lint-staged membuatnya cepat dengan hanya menjalankan alat tersebut pada file yang benar-benar Anda ubah, alih-alih memindai seluruh repositori pada setiap commit.
Cara Menyiapkannya Langkah demi Langkah
Pengaturan berikut ditujukan untuk proyek JavaScript atau React modern, tetapi polanya dapat diterapkan pada TypeScript, Vue, atau Node dengan sedikit penyesuaian. Jalankan setiap langkah dari root proyek Anda.
Mulailah dengan menginstal semuanya sebagai dev dependencies:
npm install -D prettier eslint husky lint-staged eslint-config-prettier