Biome vs ESLint + Prettier: Satu Toolchain Rust Pengganti Dua

Selama bertahun-tahun setup JavaScript standar berarti menyambungkan dua alat yang tumpang tindih dan kadang saling bertabrakan: Prettier mengurus format, ESLint mengurus kualitas kode, dan Anda menghabiskan waktu dengan eslint-config-prettier agar keduanya berhenti berdebat soal titik koma yang sama. Keduanya berjalan di Node, jadi pada repo besar keduanya juga cukup lambat sampai orang diam-diam menonaktifkannya di editor.

Biome, yang tumbuh dari proyek Rome sebelumnya, mengambil taruhan sebaliknya. Ia adalah satu biner, ditulis dengan Rust, yang memformat dan me-lint dari satu berkas konfigurasi. Saya memindahkan basis kode TypeScript berukuran menengah ke Biome dan ingin memberi Anda versi yang saya harap sudah saya baca lebih dulu: apa yang benar-benar membaik, apa yang menjadi trade-off nyata, dan di mana ESLint masih unggul.

Satu alat menggantikan dua, satu konfigurasi menggantikan empat

Perubahan yang paling langsung terasa bukan kecepatan, melainkan berkurangnya bagian yang bergerak. Setup ESLint plus Prettier yang umum membawa berkas .eslintrc, .prettierrc, dua berkas ignore, dan setumpuk paket plugin serta config hanya agar keduanya bisa hidup berdampingan. Biome menyatukan semua itu menjadi satu biome.json dan satu dependensi. Tidak ada paket jembatan yang tugasnya hanya menghentikan formatter dan linter Anda berselisih, karena mesin yang sama menangani keduanya.

Selisih kecepatan adalah sorotan utamanya, dan itu nyata

Karena Biome adalah Rust yang dikompilasi, bukan JavaScript yang diinterpretasi, ia berada di kelas performa berbeda. Benchmark resmi proyek melaporkan Biome memformat sekitar 35 kali lebih cepat dari Prettier pada korpus 171.127 baris di 2.104 berkas. Dalam pemakaian sehari-hari efeknya adalah satu proses format-dan-lint penuh pada proyek besar selesai jauh di bawah satu detik, dan itulah yang membuat menjalankannya di setiap penyimpanan dan di pre-commit hook terasa ringan, bukan menyebalkan.

Konfigurasi tinggal di satu biome.json

Biome membaca satu biome.json (atau biome.jsonc) dari akar proyek dan menelusuri direktori induk untuk menemukannya. Konfigurasi awal yang pragmatis menyalakan formatter, aturan lint yang direkomendasikan, dan penanganan ignore yang sadar Git. Perhatikan URL schema dikunci ke sebuah versi agar editor Anda memberi autocomplete yang akurat:

{
  "$schema": "https://biomejs.dev/schemas/2.5.0/schema.json",
  "vcs": {
    "enabled": true,
    "clientKind": "git",
    "useIgnoreFile": true
  },
  "formatter": {
    "enabled": true,
    "indentStyle": "space",
    "indentWidth": 2,
    "lineWidth": 100
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true
    }
  },
  "javascript": {
    "formatter": {
      "quoteStyle": "single",
      "semicolons": "always"
    }
  }
}

Migrasi adalah sebuah perintah, bukan penulisan ulang

Anda tidak perlu menerjemahkan aturan Anda dengan tangan. Biome menyertakan subperintah migrate yang membaca konfigurasi ESLint dan Prettier yang sudah ada lalu memindahkan pengaturannya ke biome.json untuk Anda. Alurnya adalah install, init, migrate, lalu check:

# Install the single binary, pinned to an exact version
npm install --save-dev --save-exact @biomejs/biome

# Generate a starter biome.json
npx @biomejs/biome init

# Port your existing ESLint and Prettier settings into biome.json
npx @biomejs/biome migrate eslint --write
npx @biomejs/biome migrate prettier --write

# Format, lint, and apply safe fixes in one pass
npx @biomejs/biome check --write ./src

Formatter-nya sengaja meniru keluaran Prettier, mengklaim kompatibilitas 97 persen di JavaScript, TypeScript, JSX, JSON, CSS, dan GraphQL, sehingga sebagian besar berkas keluar persis sama byte demi byte. Sisa beberapa persennya adalah perbedaan yang terdokumentasi, dan Biome juga memilih tab secara default ketika Prettier memilih spasi, jadi tinjau diff pertama alih-alih menganggapnya cocok sempurna.

Batasan yang jujur

Biome bukan pengganti langsung untuk setiap setup ESLint, dan berpura-pura sebaliknya hanya membuang waktu Anda. Celahnya berkumpul di tiga area: ekosistem plugin, cakupan berkas framework, dan aturan yang sadar tipe. Jika proyek Anda bergantung pada plugin ESLint khusus atau aturan kustom buatan tangan, periksa dulu padanan Biome-nya sebelum berkomitmen pindah.

• Ekosistem plugin: ESLint punya ribuan plugin; cerita plugin dan aturan kustom Biome masih muda dan mencakup jauh lebih sedikit kasus.
• Berkas framework: dukungan untuk Vue, Svelte, dan Astro masih ditandai eksperimental, jadi komponen berkas tunggal mungkin perlu mematikan aturan agar terhindar dari false positive.
• Lint sadar tipe: Biome menyimpulkan tipe tanpa tsc, yang cepat tetapi tidak selengkap informasi tipe penuh milik typescript-eslint.
• Beberapa bahasa seperti SCSS, YAML, dan Markdown masih dalam pengerjaan, jadi repo campuran mungkin tetap butuh alat kedua untuk berkas-berkas itu.

Biome vs ESLint + Prettier secara sekilas

Kesimpulan saya setelah migrasi: untuk proyek baru, atau proyek lama yang aturan lint-nya memetakan rapi ke set Biome, peralihan ini kemenangan mudah — Anda menukar setumpuk dependensi dengan satu biner cepat dan nyaris tidak kehilangan apa-apa. Untuk basis kode matang yang bergantung pada plugin ESLint khusus atau aturan sadar tipe yang dalam, tetaplah di ESLint plus Prettier sedikit lebih lama, atau jalankan Biome hanya sebagai formatter dan pertahankan ESLint untuk aturan yang hanya bisa ia berikan.