Linting dan formatting

Kode yang berjalan benar belum tentu rapi dan konsisten, apalagi bila disunting oleh beberapa orang dengan kebiasaan menulis yang berbeda. Dua perkakas membagi pekerjaan itu menjadi dua peran yang jelas. ESLint memeriksa kode dan melaporkan pola yang berisiko, sedangkan Prettier mencetak ulang kode mengikuti satu gaya tulis yang seragam. Topik ini menyusun konfigurasi keduanya untuk sebuah proyek, menunjukkan pelanggaran yang tertangkap, lalu merangkai alur kerja linting dan formatting sehari-hari.

Dua peran yang berbeda#

Batas kerja keduanya perlu dipisah sejak awal agar konfigurasinya tidak saling bertabrakan. ESLint melakukan analisis statis (static analysis), yakni pemeriksaan kode tanpa menjalankannya, sehingga masalah terlihat sebelum program sempat gagal saat dijalankan. Prettier tidak menganalisis apa pun. Ia membaca kode, membuang seluruh format tulisannya, lalu mencetaknya kembali dengan satu gaya yang sama untuk semua berkas.

Sebutan untuk masing-masing peran sudah melekat di dunia kerja. Pemeriksaan oleh ESLint disebut linting, sedangkan penyeragaman oleh Prettier disebut formatting. Pembagian ini juga meredakan perdebatan gaya. Aturan ESLint hanya berbicara tentang hal yang berpotensi menyebabkan error, sedangkan selisih selera seperti panjang baris diselesaikan sekali di berkas konfigurasi Prettier dan tidak muncul lagi saat kode saling ditinjau. Keduanya saling melengkapi dan pada proyek nyata hampir selalu berpasangan.

Konfigurasi ESLint dengan flat config#

Sejak versi 9, ESLint memakai flat config, yaitu satu berkas konfigurasi bernama eslint.config.js yang mengekspor sebuah array. Setiap anggota array berupa objek aturan yang berlaku pada sekumpulan berkas. Konfigurasi berikut sudah cukup untuk proyek kecil. Aturan rekomendasi resmi disalakan lewat package @eslint/js, lalu tiga aturan tambahan ditetapkan.

// tidak-dijalankan
// Konfigurasi minimal ESLint 9 dengan flat config.
import js from "@eslint/js";

export default [
  js.configs.recommended,
  {
    rules: {
      "no-unused-vars": "error",
      eqeqeq: "error",
      "no-var": "error",
    },
  },
];

Ekspor js.configs.recommended membawa sekumpulan aturan yang dipakai luas, sedangkan kunci rules menimpa dan menambah aturan milik proyek. Nilai "error" membuat pelanggaran menggagalkan pemeriksaan, berbeda dengan nilai "warn" yang hanya memberi peringatan. Bila package.json proyek tidak menuliskan "type": "module", simpan konfigurasi ini sebagai eslint.config.mjs agar sintaks ESM-nya tetap terbaca.

Pelanggaran yang tertangkap linter#

Perbedaan antara kode yang berjalan dan kode yang sehat terlihat pada contoh berikut. Programnya dieksekusi tanpa keberatan, tetapi dua aturan pada konfigurasi tadi tetap menandainya sebagai masalah.

function sapa(nama) {
  var pesan = "Halo, " + nama;
  return `Halo, ${nama}!`;
}

console.log(sapa("Budi"));

Halo, Budi!

Variabel pesan dibuat lalu ditinggalkan begitu saja, dan var dipakai padahal const lebih tepat untuk nilai yang tidak berubah. Node.js tidak menganggap keduanya masalah, sedangkan ESLint melaporkan pesan lewat aturan no-unused-vars dan penggunaan var lewat no-var. Contoh kedua menyasar perbandingan.

if (1 == "1") {
  console.log("dianggap sama");
}

dianggap sama

Aturan eqeqeq melarang == karena operator itu melakukan koersi tipe sebelum membandingkan, sehingga angka dan string dapat dianggap sama tanpa disengaja. Menggantinya dengan === membuat maksud perbandingan terbaca dan hasilnya dapat diprediksi. Contoh semacam ini menjadi alasan linting dijalankan sejak kode ditulis, bukan baru menjelang rilis.

Konfigurasi Prettier#

Prettier dirancang dengan filosofi berbeda, hampir semua keputusan gaya sudah ditetapkan secara bawaan, dan sisanya hanya berupa sedikit opsi. Berkas konfigurasinya bernama .prettierrc dan berformat JSON.

{
  "printWidth": 80,
  "semi": true,
  "singleQuote": false,
  "trailingComma": "all"
}

Empat kunci di atas cukup mewakili kebiasaan umum. Baris dipecah pada 80 karakter, titik koma ditulis di akhir pernyataan, string memakai tanda kutip ganda, dan koma ditambahkan pada elemen terakhir struktur data. Tanpa berkas ini pun Prettier tetap berjalan dengan nilai bawaan yang serupa, sehingga proyek tanpa .prettierrc tetap mendapat gaya yang konsisten. Berkas konfigurasi justru berguna untuk menukar satu dua keputusan, misalnya memilih tanda kutip tunggal. Editor yang memasang ekstensi Prettier membaca berkas yang sama, sehingga hasil format di layar dan hasil format dari terminal tidak pernah berbeda.

Alur kerja lint dan format#

Pola kerja yang lazim memisahkan waktunya, aturan ESLint diperiksa saat kode sedang ditulis, sedangkan format Prettier diterapkan saat berkas disimpan. Keduanya tetap tersedia sebagai perintah terminal untuk dijalankan sewaktu-waktu.

# tidak-dijalankan
# ketiga perintah memerlukan eslint dan prettier yang terpasang di proyek
npx eslint .
npx prettier --check .
npx prettier --write .

npx menjalankan binari dari folder node_modules proyek tanpa memasangnya secara global, sehingga versi perkakasnya mengikuti versi yang tercatat di package.json. Perintah eslint . memeriksa seluruh berkas, prettier --check hanya melaporkan berkas yang belum sesuai gaya, dan prettier --write menuliskan ulangnya. Di dalam editor, pasangan ini berjalan otomatis, peringatan linter tampil pada baris yang bermasalah saat kode sedang ditulis, dan format diterapkan setiap kali berkas disimpan. Kedua berkas konfigurasinya disimpan bersama proyek, sehingga seluruh kontributor mendapat aturan yang persis sama tanpa pengaturan ulang di komputer masing-masing.

Ringkasan#

• ESLint memeriksa kode tanpa menjalankannya dan melaporkan pola berisiko seperti variabel tak terpakai serta perbandingan dengan ==.
• Prettier mencetak ulang berkas mengikuti satu gaya tulis sehingga perbedaan format antarpenulis hilang.
• Konfigurasi ESLint 9 berupa array pada eslint.config.js, sedangkan Prettier cukup dengan .prettierrc berisi beberapa opsi.
• Alur kerjanya terbagi menjadi dua momen, peringatan linter tampil saat menulis di editor dan format diterapkan saat berkas disimpan.

Referensi#

• Configuration Files — ESLint — dokumentasi resmi flat config beserta bentuk array konfigurasinya.
• no-unused-vars — ESLint — aturan yang melaporkan variabel dan parameter yang tidak pernah dipakai.
• Options — Prettier — daftar opsi konfigurasi Prettier termasuk printWidth dan singleQuote.