Prettier

Siti dan Budi mengerjakan etalase toko yang sama, dan perbedaan kebiasaan mengetik langsung terasa di review. Siti menulis tanpa titik koma, Budi selalu memakainya; satu memilih kutip tunggal, yang lain kutip ganda; baris yang panjang melipat di tempat yang berbeda-beda. Setiap perubahan di pull request berisi campuran “perbaikan isi” dan “pengaturan ulang tata letak”, sehingga reviewer harus membaca dua hal sekaligus.

Prettier menyelesaikan persoalan ini dengan cara yang tegas: satu formatter, satu konfigurasi, dan seluruh berkas dicetak ulang dengan gaya yang identik. Kita tidak lagi mendebat spasi — alat yang memutuskan. Chapter ini memakai Prettier lewat npx (persis seperti chapter sebelumnya), mengatur opsi paling sering disentuh, lalu menegaskan batas antara formatter dan linter.

Formatter: Menyeragamkan Tanpa Mengubah Makna #

Formatter bekerja dalam dua tahap di balik layar. Pertama, Prettier menguraikan kode menjadi AST — proses yang sama seperti yang dikerjakan ESLint, dan berarti berkas yang tidak sah secara sintaks akan ditolak. Kedua, Prettier mengabaikan penulisan asli dan mencetak ulang AST dari nol mengikuti aturan tata letaknya.

Karena hasilnya dicetak dari struktur, bukan dari teks asli, format ulang tidak mengubah makna program: nilai, urutan eksekusi, dan nama tetap persis sama. Yang berubah hanya jarak, lipatan baris, kutip, dan tanda baca.

Berkas berikut adalah kondisi awal yang akan kita rapikan — sah secara sintaks, tetapi ditulis sepadat mungkin:

const daftarHarga=[25000,15000,40000];
function totalBelanja(daftar){let total=0;for(const harga of daftar){total=total+harga}return total}
console.log("Total: " + totalBelanja(daftarHarga));

Keluaran Pertama Tanpa Konfigurasi #

Perintah Prettier tanpa opsi tambahan tidak menyunting apa pun; ia mencetak hasil format ke keluaran standar sehingga kita bisa meninjaunya lebih dulu:

npx --yes prettier@latest kode-berantakan.js

Output yang Dihasilkan:

const daftarHarga = [25000, 15000, 40000];
function totalBelanja(daftar) {
  let total = 0;
  for (const harga of daftar) {
    total = total + harga;
  }
  return total;
}
console.log("Total: " + totalBelanja(daftarHarga));

Perhatikan perubahan yang terjadi tanpa kita minta: spasi di sekitar tanda sama dengan dan koma, satu pernyataan per baris, isi for menjorok dua spasi, titik koma ditambahkan di setiap akhir pernyataan. Gaya bawaan inilah yang dipakai bila tidak ada konfigurasi.

Konfigurasi: printWidth, semi, dan singleQuote #

Prettier membaca pengaturan dari berkas .prettierrc di folder proyek. Berkas ini berformat JSON (atau varian lain yang didukung) dan kita letakkan di akar folder yang sama dengan kode:

{
  "printWidth": 40,
  "semi": false,
  "singleQuote": true
}

Menjalankan perintah yang sama pada berkas yang identik kini menghasilkan gaya yang berbeda:

npx --yes prettier@latest kode-berantakan.js

Output yang Dihasilkan:

const daftarHarga = [
  25000, 15000, 40000,
]
function totalBelanja(daftar) {
  let total = 0
  for (const harga of daftar) {
    total = total + harga
  }
  return total
}
console.log(
  'Total: ' + totalBelanja(daftarHarga),
)

Mari kita bedah pengaruh ketiga opsi tersebut:

1. "printWidth": 40: batas lebar baris disetel 40 karakter (bawaannya 80). Baris console.log(...) melewati batas itu, sehingga Prettier melipatnya menjadi tiga baris dengan argumen di baris tersendiri. Pola melipat array menjadi [\n 25000, 15000, 40000,\n] juga efek dari batas ini — Prettier menimbang beberapa cara melipat lalu memilih yang paling muat.
2. "semi": false: titik koma tidak dicetak lagi. Deklarasi dan pernyataan diakhiri tanpa ;. Prettier tetap menjaga keamanan sintaks, misalnya dengan melipat baris yang berisiko salah dibaca mesin.
3. "singleQuote": true: string "Total: " dicetak ulang sebagai 'Total: '. Perubahan kutip tidak mengubah nilai string — bukti bahwa formatter bekerja pada tata letak, bukan isi.

Menyimpan Hasil: –write dan –check #

Mencetak ke layar berguna untuk melihat, tetapi pekerjaan sehari-hari biasanya langsung menulis ke berkas. Opsi --write melakukan itu:

npx --yes prettier@latest --write kode-berantakan.js

Output yang Dihasilkan:

kode-berantakan.js 33ms

Isi kode-berantakan.js di disk kini sama persis dengan keluaran format di bagian sebelumnya. Angka 33ms adalah waktu pemrosesan di lingkungan uji kita; nilainya wajar berbeda di mesin lain. Setelah berkas dirapikan, menjalankan format ulang menghasilkan berkas yang tidak berubah — formatter bersifat idempoten, keluaran kedua sama dengan keluaran pertama.

Opsi pendampingnya, --check, tidak menyunting apa pun. Ia hanya memastikan apakah berkas sudah sesuai format, dan sangat berguna di skrip otomatis:

npx --yes prettier@latest --check kode-berantakan.js

Output yang Dihasilkan:

Checking formatting...
[warn] kode-berantakan.js
[warn] Code style issues found in the above file. Run Prettier with --write to fix.

Kode keluar perintah ini 1 saat ada berkas yang belum rapi dan 0 saat semuanya sesuai — pola yang sama dengan ESLint, sehingga keduanya mudah disisipkan ke pipeline build yang dibahas di penutup section.

Prettier vs Linter: Pembagian Wilayah #

Karena keduanya sama-sama membaca kode dan melaporkan temuan, batas antara Prettier dan ESLint perlu ditegaskan:

Aturan gaya di ESLint dan format ulang Prettier bisa saling bertentangan: ESLint meminta kutip ganda, Prettier mencetak kutip tunggal. Praktik umum untuk menghindarinya adalah memasang package pendamping seperti eslint-config-prettier, yang mematikan seluruh aturan ESLint yang beririsan dengan Prettier — aturan gaya diserahkan penuh ke formatter, dan ESLint fokus pada substansi.

Kode yang rapi dan bersih kini tersedia di setiap berkas proyek. Selanjutnya pertanyaannya berpindah: semua alat ini — ESLint, Prettier, dan nanti bundler — membaca pengaturan dari satu berkas manifes proyek. Berkas itu bernama package.json, topik chapter berikutnya.

const daftarHarga=[25000,15000,40000];
function totalBelanja(daftar){let total=0;for(const harga of daftar){total=total+harga}return total}
console.log("Total: " + totalBelanja(daftarHarga));