Testing, Debugging, dan Kualitas Kode · 6/7

Linter, formatter, dan CI

Biarkan mesin berdebat soal titik koma supaya manusianya bisa berdebat soal desain.

Baca 25 menit

Setelah pelajaran ini kamu bisa

Menjelaskan apa yang ditangkap linter yang tidak ditangkap type checker
Mengatur format sekali lalu berhenti mendiskusikannya
Membaca dan memperbaiki error lint alih-alih mematikannya
Menyiapkan CI supaya tidak ada yang belum diperiksa masuk ke main

Tiga alat berbeda memeriksa tiga hal berbeda, dan mencampuradukkannya menghabiskan banyak sekali perdebatan.

Alat	Memeriksa	Contoh
Formatter	Tampilan kodenya	Indentasi, panjang baris, gaya tanda kutip
Type checker	Apakah type-nya sepakat	`string` dikirim di tempat yang mengharapkan `number`
Linter	Pola yang sah tapi salah	Variable tak terpakai, `await` yang hilang, pemakaian hook yang salah

Linter-nya yang menarik. Ia menangkap kode yang berhasil compile, lolos type-check, dan tetap sebuah bug.

Coba sendiri

Dua aturan lint sungguhan, diimplementasikan atas baris-baris kode. Keduanya menemukan bug yang tidak bisa ditemukan type checker.

const source = [
  'const total = 100;',
  'const unusedThing = 42;',
  'if (input == "5") save();',
  'const promise = saveBooking(data);',
  'await saveBooking(other);',
  'console.log(total);',
];

// Rule 1: no-unused-vars. Declared, never referenced again.
function noUnusedVars(lines) {
  const problems = [];
  lines.forEach((line, i) => {
    const declaration = line.match(/^\s*(?:const|let)\s+(\w+)\s*=/);
    if (!declaration) return;
    const name = declaration[1];
    const usedElsewhere = lines.some((other, j) => {
      if (j === i) return false;
      return new RegExp("\\b" + name + "\\b").test(other);
    });
    if (!usedElsewhere) problems.push({ line: i + 1, rule: "no-unused-vars", text: "'" + name + "' is assigned but never used" });
  });
  return problems;
}

// Rule 2: eqeqeq. == does type coercion; === does not.
function eqeqeq(lines) {
  const problems = [];
  lines.forEach((line, i) => {
    // A == not preceded or followed by = (so !== and === are excluded).
    if (/[^=!]==[^=]/.test(line)) {
      problems.push({ line: i + 1, rule: "eqeqeq", text: "expected '===' but found '=='" });
    }
  });
  return problems;
}

// Rule 3: an unawaited promise assigned and then ignored.
function noFloatingPromises(lines) {
  const problems = [];
  lines.forEach((line, i) => {
    const m = line.match(/^\s*const\s+(\w+)\s*=\s*(\w+)\(/);
    if (m && !line.includes("await") && /save|fetch|load|insert/i.test(m[2])) {
      problems.push({ line: i + 1, rule: "no-floating-promises", text: "promise from '" + m[2] + "' is never awaited" });
    }
  });
  return problems;
}

const found = [...noUnusedVars(source), ...eqeqeq(source), ...noFloatingPromises(source)]
  .sort((a, b) => a.line - b.line);

console.log("source:");
source.forEach((l, i) => console.log("  " + String(i + 1).padStart(2) + "  " + l));
console.log("");
console.log(found.length + " problems:");
for (const p of found) {
  console.log("  line " + p.line + "  " + p.rule.padEnd(22) + p.text);
}
console.log("");
console.log("Every one of these lines compiles and type-checks perfectly.");

Hasil

Tekan Jalankan untuk melihat hasilnya.

Ini jalan di browser kamu, di dalam sandbox. Apa pun yang kamu tulis di sini tidak bisa merusak situs.

Format bukan bahan diskusi

Pilih sebuah formatter, commit konfigurasinya, jalankan saat menyimpan, dan jangan lagi mendiskusikan gaya. Setiap menit yang dihabiskan soal gaya tanda kutip di code review adalah menit yang tidak dipakai memikirkan apakah kodenya benar.

CI

Continuous integration menjalankan pemeriksaanmu di setiap push, di mesin yang bukan milikmu. Bagian terakhir itulah yang membuatnya bernilai: ia tidak punya sisa node_modules, tidak punya file yang belum di-commit, dan tidak punya environment variable yang kamu lupa sudah kamu atur.

yaml

# .github/workflows/ci.yml
name: CI
on: [push, pull_request]

jobs:
  verify:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: oven-sh/setup-bun@v2
      - run: bun install --frozen-lockfile   # fail if the lockfile is stale
      - run: bun run lint
      - run: bunx tsc --noEmit               # types are NOT checked by the build
      - run: bun run test
      - run: bun run build

--frozen-lockfile adalah yang penting: ia gagal alih-alih diam-diam memperbarui dependency, jadi CI menguji tepat apa yang kamu commit.

Tugas praktik

Tambahkan script verify ke proyek ini — bun run lint && bunx tsc --noEmit && bun run test — lalu jalankan. Lalu masukkan sebuah variable tak terpakai di file mana pun dan jalankan lagi; catat langkah mana yang gagal dan bahwa langkah setelahnya tidak pernah jalan. Lalu tulis file workflow CI di atas dan push ke sebuah branch.

Hasil yang diharapkan

Lint gagal lebih dulu, dan `&&` menghentikan sisanya.