UI vs. UX: What’s the difference?

Menggunakan ESlint dan Prettier untuk Konsistensi Kode

Ardi Senin, 25 Agustus 2025, 02:06

Menulis kode tidak hanya soal “bekerja dengan benar”, tapi juga soal konsistensi. Bayangkan kalau kamu bekerja dalam sebuah tim: ada yang pakai indentasi tab, ada yang spasi, ada yang suka titik koma, ada juga yang tidak. Hasilnya? Kode jadi sulit dibaca, dan bisa memicu kesalahan kecil yang bikin pusing.

Apa itu ESLint dan Prettier?

  • ESLint → Sebuah tool untuk memeriksa kualitas kode JavaScript. Dia akan memberitahu kalau ada error, peringatan, atau gaya penulisan yang tidak konsisten.
  • Prettier → Sebuah code formatter yang secara otomatis merapikan kode (spasi, indentasi, titik koma, kutip, dsb).

Kalau diibaratkan:

  • ESLint seperti guru yang menilai apakah kodenya “baik” atau tidak.
  • Prettier seperti editor yang langsung merapikan tulisanmu biar enak dibaca.

Kenapa Harus Pakai Keduanya?

  1. Konsistensi gaya kode → Semua developer dalam tim punya format yang sama.
  2. Mengurangi error kecil → ESLint membantu mendeteksi bug sejak dini.
  3. Hemat waktu → Tidak perlu ribut soal format, tinggal tekan save, Prettier yang urus.
  4. Lebih profesional → Kode jadi lebih mudah dipahami oleh orang lain.

Cara Menggunakan ESLint dan Prettier

Berikut langkah mudah untuk pemula:

1. Install Project (misalnya Node.js project)

Pastikan sudah ada project Node.js. Kalau belum, buat dulu:

npm init -y

2. Install ESLint

npm install eslint --save-dev

Lalu jalankan konfigurasi:

npx eslint --init

Ikuti pertanyaan yang muncul (gunakan framework, environment, dan style sesuai kebutuhan).

3. Install Prettier

npm install prettier --save-dev

Buat file konfigurasi .prettierrc untuk mengatur gaya format, contoh:

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2
}

4. Integrasikan ESLint dan Prettier

Agar keduanya tidak bentrok, tambahkan plugin:

npm install eslint-config-prettier eslint-plugin-prettier --save-dev

Lalu edit .eslintrc dengan menambahkan:

{
  "extends": ["eslint:recommended", "plugin:prettier/recommended"]
}

5. Jalankan ESLint

Cek kode dengan:

npx eslint yourfile.js

6. Format dengan Prettier

Rapiin kode dengan:

npx prettier --write .

Tips Tambahan

  • Gunakan VS Code Extension → Install ESLint dan Prettier di editor agar otomatis bekerja saat kamu mengetik.
  • Aktifkan fitur format on save → Jadi setiap kali kamu save file, Prettier langsung merapikan kode.
  • Buat aturan bersama tim → Supaya tidak ada perdebatan soal gaya penulisan.

Kesimpulan

Menggunakan ESLint dan Prettier membuat kode lebih konsisten, rapi, dan mudah dipelihara. Buat pemula, ini langkah penting untuk belajar menulis kode yang tidak hanya benar secara logika, tapi juga nyaman dibaca.