ESLint

Menjelang rilis etalase toko, Budi memeriksa ulang berkas-berkas JavaScript miliknya satu per satu. Ada var yang masih tersisa dari latihan awal, ada variabel bonus yang dideklarasikan tetapi tidak pernah dipakai, dan ada perbandingan == yang seharusnya ===. Semua temuan itu lolos dari mata: kode tetap berjalan, tetapi celah kecil semacam ini menumpuk tanpa terdeteksi.

Pemeriksaan manual tidak akan bertahan lama seiring bertambahnya jumlah berkas. ESLint hadir untuk pekerjaan tersebut: linter membaca kode kita, mengenali pola yang berpotensi menimbulkan masalah, lalu melaporkannya sebelum kode sempat diuji. Chapter ini menyiapkan ESLint dari nol di folder proyek — tanpa instalasi global — lalu membedah laporannya dan memperbaiki temuan secara otomatis.

Memeriksa Kode Tanpa Menjalankannya #

ESLint adalah linter: alat yang menganalisis kode secara statis. Kata “statis” berarti kode diperiksa tanpa dieksekusi. Dua hal inilah yang dikerjakannya di balik layar:

1. Parsing: ESLint membaca berkas dan menguraikannya menjadi abstract syntax tree (AST) — struktur data yang merepresentasikan setiap elemen kode, dari var sampai tanda kurung.
2. Pencocokan aturan: setiap rule menelusuri AST dan mencari pola tertentu. Aturan no-var mencari deklarasi var, aturan no-unused-vars mencari variabel yang tak pernah dibaca, dan seterusnya.

Dengan begitu, posisi linter berada di antara dua pemeriksaan yang sudah kita kenal. Error sintaks membuat kode sama sekali tidak bisa dijalankan; test memeriksa perilaku saat kode berjalan. Linter menangkap zona di tengahnya: kode yang sah menurut bahasa, tetapi berisiko — variabel terlupa, perbandingan longgar, atau var yang seharusnya let.

Konfigurasi Flat: eslint.config.mjs #

Kita mulai dari kondisi paling polos: sebuah folder berisi kode-bermasalah.js, tanpa konfigurasi apa pun. Perintah pemeriksaan pertama langsung menemui rintangan:

npx --yes eslint@latest kode-bermasalah.js

Output yang Dihasilkan:

Oops! Something went wrong! :(

ESLint: 10.12.0

ESLint couldn't find an eslint.config.* file.

From ESLint v9.0.0, the default configuration file is now eslint.config.*.
If you are using a .eslintrc.* file, please follow the migration guide
to update your configuration file to the new format:

https://eslint.org/docs/latest/use/configure/migration-guide

If you still have problems after following the migration guide, please stop by
https://eslint.org/chat/help to chat with the team.

Pesan ini bukan tanda kegagalan kita, melainkan aturan main ESLint versi 9 ke atas: konfigurasi wajib berupa flat config, satu berkas JavaScript bernama eslint.config.js (atau eslint.config.mjs untuk format module). Berkas lama berformat .eslintrc sudah tidak dibaca. Berkas berikut kita letakkan di akar folder proyek:

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

Mari kita telaah isi konfigurasi ini:

1. Baris 1 (export default [): flat config adalah array. Setiap elemen array berupa object konfigurasi yang berlaku untuk sekumpulan berkas. Format “flat” merujuk pada struktur rata ini — tidak ada sarang berlapis seperti format lama.
2. Baris 2 ({): object pertama tanpa properti files berlaku untuk semua berkas yang diperiksa. Bila nanti kita butuh aturan khusus, cukup tambahkan object lain dengan files: ["tests/**"] misalnya.
3. Baris 3–5 (rules: { ... }): properti rules memetakan nama aturan ke tingkat keparahannya. "error" berarti pelanggaran dilaporkan sebagai error, "warn" sebagai peringatan, dan "off" mematikan aturan. Tiga aturan di sini memilih string "error"; aturan tanpa tanda kutip seperti eqeqeq sah ditulis karena namanya sah sebagai identifier.

Membaca Laporan Pemeriksaan Pertama #

Berkas yang kita periksa sengaja memuat tiga pelanggaran sekaligus:

// kode-bermasalah.js — pemeriksaan stok gudang
var sisa = 10;
const bonus = 5;
if (sisa == 10) {
  console.log("stok pas");
}

Dengan konfigurasi sudah ada di tempatnya, perintah yang sama kini menghasilkan laporan:

npx --yes eslint@latest kode-bermasalah.js

Output yang Dihasilkan:

/tmp/tooling-final/kode-bermasalah.js
  2:1   error  Unexpected var, use let or const instead    no-var
  3:7   error  'bonus' is assigned a value but never used  no-unused-vars
  4:10  error  Expected '===' and instead saw '=='         eqeqeq

✖ 3 problems (3 errors, 0 warnings)
  1 error and 0 warnings potentially fixable with the `--fix` option.

Kode keluar (exit code) perintah ini adalah 1, sehingga skrip otomatis dapat mendeteksi adanya pelanggaran. Mari kita bedah tiga temuannya, masing-masing merujuk ke baris berkas:

1. Baris 2 (var sisa = 10;): temuan 2:1 error ... no-var menunjuk baris 2, kolom 1. Aturan no-var menyarankan let atau const karena keduanya punya cakupan blok yang lebih teratur. Pemakaian var tidak salah menurut bahasa JavaScript — inilah contoh temuan yang hanya bisa ditangkap linter.
2. Baris 3 (const bonus = 5;): temuan 'bonus' is assigned a value but never used berasal dari no-unused-vars. Variabel diberi nilai tetapi tidak pernah dibaca; kemungkinan besar itu sisa kode lama atau salah ketik nama variabel.
3. Baris 4 (if (sisa == 10) {): temuan Expected '===' and instead saw '==' berasal dari eqeqeq. Perbandingan longgar == melakukan konversi tipe secara senyap, sedangkan === membandingkan tipe dan nilai sekaligus — kebiasaan yang kita jaga sejak chapter operators.

Baris terakhir laporan menambahkan informasi penting: dari tiga error itu, satu bersifat potentially fixable — bisa diperbaiki otomatis.

Perbaikan Otomatis dengan –fix #

Opsi --fix menyuruh ESLint memperbaiki pelanggaran yang punya fixer (perbaik bawaan), langsung di berkas aslinya:

npx --yes eslint@latest kode-bermasalah.js --fix

Output yang Dihasilkan:

/tmp/tooling-final/kode-bermasalah.js
  3:7   error  'bonus' is assigned a value but never used  no-unused-vars
  4:10  error  Expected '===' and instead saw '=='         eqeqeq

✖ 2 problems (2 errors, 0 warnings)

Isi kode-bermasalah.js kini berubah:

// kode-bermasalah.js — pemeriksaan stok gudang
let sisa = 10;
const bonus = 5;
if (sisa == 10) {
  console.log("stok pas");
}

Perubahan yang terjadi: var menjadi let, dan temuan no-var hilang dari laporan. Dua temuan sisanya memang tidak punya perbaikan otomatis — menghapus bonus menuntut keputusan manusia (sengaja terlupa atau salah ketik?), begitu pula memilih === menuntut pemahaman maksud perbandingan. Kita sunting keduanya secara manual, lalu jalankan pemeriksaan lagi:

npx --yes eslint@latest kode-bermasalah.js

Output yang Dihasilkan:

Tidak ada keluaran sama sekali — dan kode keluar perintah kini 0. Konvensi “senyap berarti sehat” ini membuat ESLint mudah dipasangkan dengan alat lain: skrip build boleh berhenti setiap kali linter melapor.

Sampai di sini, ESLint sudah menjaga substansi kode: aturan main, variabel terpakai, dan perbandingan yang ketat. Hal yang belum ia sentuh adalah tampilan kode — jumlah spasi, panjang baris, kutip tunggal atau ganda. Wilayah itulah milik Prettier, topik chapter berikutnya.

// kode-bermasalah.js — pemeriksaan stok gudang
var sisa = 10;
const bonus = 5;
if (sisa == 10) {
  console.log("stok pas");
}