Belajar JavaScript - JavaScript Modern dengan Linting, Formatting, dan Tooling

#Pendahuluan

Kode yang bekerja adalah baseline; kode yang terbaca dan konsisten adalah standar profesional. Ketika project tumbuh atau dikerjakan banyak orang, masalah kecil berubah menjadi besar: gaya penulisan yang berbeda-beda, aturan yang dilanggar tanpa sadar, dan bug yang seharusnya bisa dicegah otomatis. Di sinilah tooling masuk.

Episode 20 membahas dua alat yang membentuk tulang punggung kualitas kode JavaScript modern: ESLint untuk menangkap kesalahan dan pola buruk, dan Prettier untuk memformat kode secara konsisten. Kalian juga menyatukan keduanya lewat npm scripts sehingga semuanya bisa dijalankan dengan satu perintah.

Yang paling penting dari episode ini: konsistensi yang dijamin mesin mengalahkan kesepakatan lisan yang dilupakan. Kalian akan merasakan betapa tenangnya bekerja ketika alat menegakkan standar, bukan mengandalkan ingatan.

#Mengapa Kode Membutuhkan Tooling

#Masalah yang Ingin Dipecahkan

Manusia tidak konsisten, dan kode mencerminkan itu. Tanpa alat, setiap orang menulis dengan gaya sendiri: tanda kutip yang berbeda, indentasi yang berbeda, variabel yang tidak terpakai, dan perbandingan longgar yang seharusnya ketat. Bug-bug kecil seperti ini menumpuk dan mengganggu.

Dua kategori alat menangani dua masalah berbeda:

• Linter (ESLint): menangkap kesalahan logika dan pola buruk — variabel tak terpakai, == yang seharusnya ===, kode unreachable.
• Formatter (Prettier): menyeragamkan gaya visual — indentasi, tanda kutip, panjang baris, koma.

Keduanya berbeda tapi saling melengkapi: linter bertanya apakah kodenya benar?, formatter bertanya apakah kodenya rapi?.

#ESLint: Menangkap Kesalahan dengan Linter

#Menginstall ESLint

ESLint diinstall sebagai dependency development — alat yang dibutuhkan saat pengembangan, bukan saat aplikasi dijalankan:

npm init -y
npm install --save-dev eslint

npm install --save-dev eslint menaruh ESLint di devDependencies. Kategori ini penting: alat build tidak ikut di-bundle ke aplikasi produksi. Setelah install, jalankan inisialisasi konfigurasi interaktif:

npx eslint --init

npx eslint --init memandu kalian memilih gaya konfigurasi. Pada versi modern, hasilnya adalah file eslint.config.js — format flat config yang merupakan standar sejak ESLint 9. Kalian bisa memilih rule set yang cocok untuk project Node atau browser.

#Menjalankan ESLint dan Membaca Hasilnya

Dengan konfigurasi siap, jalankan lint pada file atau direktori:

npx eslint src

npx eslint src memeriksa semua file di direktori src dan menampilkan masalah yang ditemukan. Contoh masalah yang ditangkap ESLint:

Contoh masalah yang ditangkap ESLint

const nilai = "10";
if (nilai == 10) {
  console.log("Perbandingan longgar");
}

Baris if (nilai == 10) memakai perbandingan longgar. Dengan rule eqeqeq aktif, ESLint memberi peringatan karena aturan tim menuntut ===. ESLint melaporkan baris persis, aturan yang dilanggar, dan saran perbaikan — terkadang bisa diperbaiki otomatis dengan npx eslint src --fix.

#Beberapa Rule Kunci

Beberapa rule yang paling berdampak untuk JavaScript:

• no-unused-vars: menangkap variabel yang tidak pernah dipakai.
• eqeqeq: mewajibkan perbandingan ketat.
• no-undef: menangkap penggunaan variabel yang tidak dideklarasikan.
• no-unreachable: menandai kode setelah return.

Semua rule bisa disesuaikan. Aturan yang dipilih sebuah tim adalah keputusan bersama yang kemudian ditegakkan otomatis — itulah kenapa linter efektif.

#Prettier: Format yang Konsisten

#Menginstall dan Memformat

Prettier menghapus debat soal gaya dengan satu jawaban otomatis:

npm install --save-dev prettier
npx prettier --write src

npm install --save-dev prettier menginstall formatter, dan npx prettier --write src memformat semua file di src secara langsung. Kalian tidak memilih preferensi di setiap kasus — Prettier memutuskan dan hasilnya selalu konsisten. Ini yang membuat kode semua anggota tim terlihat seperti ditulis satu orang.

#Mengonfigurasi Prettier

Prettier bekerja dengan default yang masuk akal, tapi bisa dikonfigurasi lewat file .prettierrc:

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

"singleQuote": true memakai tanda kutip tunggal, "tabWidth": 2 mengatur indentasi, dan "trailingComma": "all" menambah koma di akhir daftar multi-baris. Konsistensi pengaturan ini berlaku untuk seluruh tim, apa pun preferensi pribadi.

#Menghindari Konflik dengan ESLint

ESLint dan Prettier berpotensi bentrok — misalnya keduanya mengatur gaya baris. Solusinya: nonaktifkan rule gaya di ESLint yang menjadi domain Prettier. Di project modern, ini otomatis jika memakai konfigurasi bawaan seperti eslint-config-prettier:

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

eslint-config-prettier mematikan semua rule ESLint yang tidak perlu karena sudah ditangani Prettier. Hasilnya pembagian tugas yang bersih: ESLint menangani kebenaran, Prettier menangani kerapian.

#Menyatukan Semua dengan npm Scripts

#Mendefinisikan Script

Daripada mengetik npx eslint src dan npx prettier --write src berulang, simpan keduanya sebagai npm scripts di package.json:

{
  "name": "project-lint",
  "type": "module",
  "scripts": {
    "lint": "eslint src",
    "format": "prettier --write src",
    "check": "npm run lint && npm run format"
  }
}

"lint": "eslint src" dan "format": "prettier --write src" adalah perintah yang bisa dipanggil lewat npm run lint dan npm run format. Script check merantai keduanya. Memakai npm scripts berarti perintah yang sama persis berjalan di laptop kalian dan di CI — tidak ada perbedaan lingkungan.

#Menjalankan Lewat npm

Dengan scripts terdefinisi, alur kerja sehari-hari jadi sederhana:

npm run lint
npm run format

npm run lint dan npm run format menjadi satu-satunya perintah yang perlu diingat. Di episode 21 kalian akan melihat bagaimana skrip seperti ini dipanggil otomatis oleh build tools dan CI.

#Penutup

Episode 20 membuat standar kode kalian otomatis: ESLint untuk menangkap kesalahan dan pola buruk, Prettier untuk format konsisten, eslint-config-prettier untuk menghindari konflik, dan npm scripts untuk menjalankan semuanya dengan satu perintah.

Inti yang harus dibawa pulang:

• Linter menangkap kesalahan logika; formatter menyeragamkan gaya.
• Install ESLint dan Prettier sebagai devDependencies.
• npx eslint src melaporkan masalah; npx eslint src --fix memperbaiki otomatis.
• npx prettier --write src memformat semua file sekaligus.
• eslint-config-prettier mencegah bentrok antar kedua alat.
• Simpan perintah sebagai npm scripts agar konsisten di semua mesin.

Di episode 21 selanjutnya kita akan membahas build tools, bundler, dan lingkungan runtime — cara kerja bundler seperti Vite dan esbuild, perbedaan runtime Node.js, Deno, dan Bun, serta praktik menjalankan project modern dengan build script. Kalian akan melihat bagaimana semua episode tentang modul dan tooling terhubung.