Rome'un Küllerinden Doğan Güç: Biome ile ESLint ve Prettier'a Tek Araçla Veda

0:00

/0

1×

Rome'un Küllerinden Doğan Güç: Biome ile ESLint ve Prettier'a Tek Araçla Veda

Modern JavaScript ve TypeScript geliştirme ekosisteminde harcanan sürenin önemli bir kısmı, ne yazık ki kod yazmaya değil, araç zincirlerini (toolchain) yapılandırmaya gidiyor. Kod biçimlendirme için Prettier, statik analiz (linting) için ESLint, ikisinin birbiriyle çakışmaması için eslint-config-prettier gibi köprü paketler... Üstüne bir de yavaş derleme süreleri eklenince, geliştirici deneyimi ciddi şekilde yıpranıyor.

İşte tam bu karmaşanın ortasında, Rust'ın gücünü arkasına alan ve "her şeyi tek çatı altında toplama" vizyonuyla yola çıkan Biome, JavaScript dünyasında devrim yaratıyor.

Bu yazıda, trajik bir şirket kapanışının ardından topluluk desteğiyle küllerinden doğan Biome'un ne olduğunu, ESLint ve Prettier ikilisinin yerini nasıl aldığını ve projenize nasıl entegre edebileceğinizi inceleyeceğiz.

Rome'dan Biome'a: Bir Açık Kaynak Anka Kuşu Hikayesi

Biome'un hikayesini anlamak için önce Rome projesini hatırlamak gerekir. Babel ve Yarn'ın yaratıcısı Sebastian McKenzie tarafından başlatılan Rome; derleyici, linter, formatter, test koşturucu ve paketleyiciyi tek bir araçta birleştirmeyi hedefleyen iddialı bir projeydi.

Ancak 2023 yılında Rome'u geliştiren şirket kapandı ve projenin geleceği belirsizliğe gömüldü. Neyse ki açık kaynak topluluğu teslim olmadı. Projenin Rust tabanlı kod tabanı çatallandı (fork) ve Biome adıyla yeniden doğdu.

Kısa sürede büyük bir ivme yakalayan Biome, Prettier ekibi tarafından verilen Challenge Award'ı kazanarak rüştünü ispatladı ve bugün modern web geliştirmenin en gözde araçlarından biri haline geldi.

Neden Biome? Temel Avantajlar

Biome, sadece "başka bir linter" değil. JavaScript araç zincirinizi kökten sadeleştirmeyi vaat eden bütünsel bir çözüm.

1. Ultra Hızlı Performans (Rust Gücü)

Node.js tabanlı çalışan ESLint ve Prettier, devasa kod tabanlarında belirgin şekilde yavaşlar. Rust ile yazılan Biome ise Işık hızındadır. Binlerce dosyayı kapsayan projeleri milisaniyeler içinde tarar ve biçimlendirir. CI/CD süreçlerinizdeki dakikaları saniyelere indirmek için bile Biome'a geçmeye değer.

2. Biçimlendirme ve Statik Analiz Tek Araçta

Prettier ile biçimlendirme (formatting), ESLint ile kural denetimi (linting) yapmak, çoğu zaman çakışan kuralları yönetme çilesini beraberinde getirir. Biome, her iki işlevi de tek bir motor üzerinden yürütür. Bu sayede çakışan konfigürasyonlarla uğraşmazsınız.

3. Prettier ile %97+ Uyumluluk

"Prettier konfigürasyonumu bırakmak istemiyorum" diyorsanız endişelenmeyin. Biome, Prettier'ın biçimlendirme kurallarıyla neredeyse %100 uyumludur. Mevcut kod stilinizi bozmadan saniyeler içinde Biome'a geçebilirsiniz.

4. Sıfır Bağımlılık Çöplüğü (node_modules Hafifliği)

ESLint ve Prettier ekosistemi onlarca eklenti, ayar paketi ve bağımlılık gerektirir. Biome ise tek bir bağımlılıktır. Projenize sadece @biomejs/biome eklemeniz yeterlidir.

Karşılaştırma: ESLint + Prettier vs. Biome

Biome'a Geçiş Rehberi: Kurulum ve Kullanım

Biome'u projenize dahil etmek oldukça basittir. Sırasıyla şu adımları takip edebilirsiniz:

1. Kurulum

Tercih ettiğiniz paket yöneticisi ile Biome'u geliştirme bağımlılığı olarak ekleyin:

# npm ile
npm install --save-dev --exact @biomejs/biome

# pnpm ile
pnpm add --save-dev --exact @biomejs/biome

# bun ile
bun add --dev --exact @biomejs/biome

Not: Biome ekibi, sürümler arasındaki küçük farklardan etkilenmemek için --exact bayrağı ile sabit sürüm kurulumunu önerir.

2. Yapılandırma Dosyasının Oluşturulması

Proje kök dizininizde varsayılan ayarları içeren biome.json dosyasını oluşturmak için:

npx @biomejs/biome init

Bu komut şuna benzer basit bir biome.json dosyası üretecektir:

{
  "$schema": "https://biomejs.dev/schemas/1.8.3/schema.json",
  "organizeImports": {
    "enabled": true
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true
    }
  },
  "formatter": {
    "enabled": true,
    "indentStyle": "tab"
  }
}

3. Kod Düzenleme ve Tarama Komutları

Artık karmaşık npm komutlarına veda edebilirsiniz. İşte bilmeniz gereken temel komutlar:

• Kodunuzu biçimlendirmek için (Format): bash npx @biomejs/biome format --write .

• Statik analiz yapmak için (Lint): bash npx @biomejs/biome lint .

• Import'ları düzenlemek, hataları taramak ve biçimlendirmek için (Hepsi Bir Arada): bash npx @biomejs/biome check --write .

check --write komutu, modern bir geliştiricinin ihtiyaç duyduğu tüm düzenlemeleri tek hamlede gerçekleştirir.

Editör Entegrasyonu (VS Code)

Biome'dan tam verim almak için kod editörünüzle entegre etmeniz önemlidir. VS Code kullanıyorsanız:

1. Biome eklentisini VS Code Marketplace üzerinden yükleyin.
2. .vscode/settings.json dosyanıza şu ayarları ekleyin:

{
  "editor.defaultFormatter": "biomejs.biome",
  "[javascript]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[typescript]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "editor.codeActionsOnSave": {
    "quickfix.biome": "explicit",
    "source.organizeImports.biome": "explicit"
  }
}

Artık dosyanızı her kaydettiğinizde (Ctrl+S veya Cmd+S) Biome milisaniyeler içinde kodunuzu düzenleyecek ve import sırasını optimize edecektir.

Biome Üretim Ortamı (Production) İçin Hazır mı?

Soru kısa ve net: Evet!

Biome; Astro, Vite ve daha pek çok büyük açık kaynak projesi ve şirket tarafından aktif olarak kullanılıyor. ESLint'in sahip olduğu binlerce spesifik eklentiden oluşan devasa ekosisteme henüz tam olarak sahip olmasa da, günlük JavaScript/TypeScript projelerindeki ihtiyaçların %95'inden fazlasını kutudan çıktığı haliyle karşılıyor.

Ayrıca ekibin yol haritasında CSS desteğini genişletmek, HTML/Svelte/Vue desteğini olgunlaştırmak ve özel eklenti (plugin) yazma sistemini getirmek gibi heyecan verici hedefler var.

Sonuç: Değişimin Tam Zamanı

JavaScript ekosistemi yıllardır hantallaşan araç zincirlerinden şikayetçiydi. Rust dalgası ile birlikte (SWC, Turbopack, Rolldown) bu hantallık yerini hıza ve sadeliğe bırakıyor.

Biome, ESLint ve Prettier'ın yıllardır sürdürdüğü krallığa çok güçlü bir alternatif olarak karşımızda duruyor. Projelerinizde daha az yapılandırma dosyası görmek, node_modules boyutunu küçültmek ve CI/CD derleme sürelerinizi dramatik şekilde düşürmek istiyorsanız, Biome'a bir şans vermenin tam zamanı.

Siz projenizde Biome kullanmaya başladınız mı? Deneyimlerinizi yorumlarda paylaşmayı unutmayın!