Biome ile ESLint ve Prettier'ı Tek Araçla Değiştirin: Hız, Sadelik ve Performans

Modern JavaScript ve React projelerinde ESLint ve Prettier neredeyse vazgeçilmez araçlar haline geldi. Ancak bu iki aracı birlikte kullanmanın getirdiği konfigürasyon karmaşası, eklenti çakışmaları ve performans sorunları birçok geliştiriciyi alternatif aramaya itiyor. İşte tam bu noktada Biome sahneye çıkıyor.

Biome, Rust ile yazılmış, ESLint ve Prettier'ın yaptığı işleri tek bir araçta birleştiren ultra hızlı bir geliştirme aracıdır. Bu yazıda, Biome'un ne olduğunu, neden tercih edilmesi gerektiğini ve mevcut projelerinizde ESLint + Prettier ikilisinden Biome'a nasıl geçiş yapabileceğinizi kapsamlı şekilde ele alacağız.

ESLint + Prettier İkilisinin Sorunları

Önce mevcut durumu anlayalım. Tipik bir React projesinde şu araçları birlikte kullanıyorsunuz:

ESLint — Kod kalitesi ve hata tespiti
Prettier — Kod formatlama
eslint-config-prettier — ESLint'in formatlama kurallarını devre dışı bırakma
eslint-plugin-prettier — Prettier'ı ESLint içinde çalıştırma

Bu kurulum için gereken tipik devDependencies listesine bir bakalım:

{
  "devDependencies": {
    "eslint": "^8.56.0",
    "prettier": "^3.2.0",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-prettier": "^5.1.0",
    "eslint-plugin-react": "^7.33.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "@typescript-eslint/parser": "^6.21.0",
    "@typescript-eslint/eslint-plugin": "^6.21.0"
  }
}

Bu 8 ayrı paket demek. Üstelik her birinin kendi konfigürasyon dosyası, sürüm uyumsuzlukları ve bakım yükü var. ESLint'in flat config geçişi, Prettier ile çakışan kuralların ayıklanması, TypeScript parser'ın doğru yapılandırılması... Bunların hepsi geliştirici deneyimini olumsuz etkileyen faktörler.

Karşılaşılan Yaygın Sorunlar

Konfigürasyon çakışmaları: ESLint'in formatlama kuralları Prettier ile çelişebilir
Yavaş çalışma: Büyük projelerde ESLint dakikalar alabilir
Karmaşık yapılandırma: .eslintrc, .prettierrc, .eslintignore, .prettierignore gibi birden fazla dosya
Sürüm uyumsuzlukları: Eklentiler arasındaki versiyon uyumunu takip etmek zorlayıcı
CI/CD maliyeti: Yavaş linting, pipeline sürelerini uzatır

Biome Nedir?

Biome (eski adıyla Rome), Rust ile yazılmış bir web geliştirme araç zinciridir. Tek bir binary dosyasıyla şunları sunar:

✅ Linter (ESLint yerine) — 300'den fazla kural
✅ Formatter (Prettier yerine) — Prettier ile %97 uyumluluk
✅ Import sıralama (eslint-plugin-import yerine)
✅ TypeScript desteği — Ek parser gerekmez
✅ JSX/TSX desteği — React projeleri için hazır

Biome'un en dikkat çekici özelliği performansıdır. Rust'ın sağladığı hız sayesinde, ESLint'ten ortalama 10-100 kat daha hızlı çalışır. Büyük monorepo'larda bu fark, CI/CD süreçlerinde dakikalar kazandırır.

Biome Kurulumu

Yeni Projeye Kurulum

Biome'u projenize eklemek son derece basittir:

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

Ardından konfigürasyon dosyasını oluşturun:

npx @biomejs/biome init

Bu komut, projenizin kök dizininde bir biome.json dosyası oluşturur:

{
  "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
  "vcs": {
    "enabled": false,
    "clientKind": "git",
    "useIgnoreFile": false
  },
  "files": {
    "ignoreUnknown": false,
    "ignore": []
  },
  "formatter": {
    "enabled": true,
    "indentStyle": "tab"
  },
  "organizeImports": {
    "enabled": true
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true
    }
  }
}

Tek bir dosya. Tek bir paket. İşte bu kadar.

package.json Script'leri

Biome komutlarını package.json dosyanıza ekleyin:

{
  "scripts": {
    "lint": "biome lint .",
    "format": "biome format --write .",
    "check": "biome check --write .",
    "ci": "biome ci ."
  }
}

Buradaki check komutu hem linting hem formatting hem de import sıralamasını tek seferde çalıştırır. ci komutu ise CI ortamları için optimize edilmiştir ve dosyalarda değişiklik yapmaz, yalnızca hataları raporlar.

Mevcut Projede ESLint + Prettier'dan Biome'a Geçiş

Gerçek hayatta genellikle sıfırdan başlamıyorsunuz. Mevcut bir projeyi Biome'a taşımak için adımları takip edelim.

Adım 1: Biome'u Yükleyin ve Mevcut Kuralları Migrate Edin

Biome, ESLint ve Prettier konfigürasyonlarınızı otomatik olarak taşıyabilen bir migration aracı sunar:

npx @biomejs/biome migrate eslint --write
npx @biomejs/biome migrate prettier --write

Bu komutlar mevcut .eslintrc ve .prettierrc dosyalarınızı okuyarak karşılık gelen Biome kurallarını biome.json dosyasına yazar. Biome'un henüz desteklemediği kurallar varsa, bunları konsola bildirir.

Adım 2: Konfigürasyonu Özelleştirin

Tipik bir React + TypeScript projesi için özelleştirilmiş bir biome.json örneği:

{
  "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
  "vcs": {
    "enabled": true,
    "clientKind": "git",
    "useIgnoreFile": true
  },
  "files": {
    "ignore": ["node_modules", "dist", "build", ".next", "coverage"]
  },
  "formatter": {
    "enabled": true,
    "indentStyle": "space",
    "indentWidth": 2,
    "lineWidth": 80,
    "lineEnding": "lf"
  },
  "javascript": {
    "formatter": {
      "quoteStyle": "single",
      "jsxQuoteStyle": "double",
      "semicolons": "always",
      "trailingCommas": "all",
      "arrowParentheses": "always"
    }
  },
  "organizeImports": {
    "enabled": true
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true,
      "complexity": {
        "noForEach": "warn",
        "useOptionalChain": "error"
      },
      "correctness": {
        "useExhaustiveDependencies": "warn",
        "noUnusedVariables": "error",
        "noUnusedImports": "error"
      },
      "suspicious": {
        "noExplicitAny": "warn",
        "noConsoleLog": "warn"
      },
      "style": {
        "useConst": "error",
        "noNonNullAssertion": "warn"
      },
      "nursery": {
        "useSortedClasses": "warn"
      }
    }
  }
}

Adım 3: Eski Araçları Kaldırın

Geçişi tamamladıktan sonra eski araçları temizleyin:

npm uninstall eslint prettier eslint-config-prettier eslint-plugin-prettier \
  eslint-plugin-react eslint-plugin-react-hooks \
  @typescript-eslint/parser @typescript-eslint/eslint-plugin

Ardından eski konfigürasyon dosyalarını silin:

rm .eslintrc.js .eslintrc.json .prettierrc .prettierrc.json \
   .eslintignore .prettierignore

8 paket gitti, 4 konfigürasyon dosyası silindi. Geriye tek bir paket ve tek bir biome.json kaldı.

Adım 4: Projeyi Biome ile Formatlayın

İlk çalıştırmada tüm projeyi formatlayın:

npx biome check --write .

Bu komutu ayrı bir commit olarak atmanızı öneririm. Böylece code review'da formatlama değişiklikleri iş mantığı değişikliklerinden ayrı tutulmuş olur.

IDE Entegrasyonu

VS Code

Biome'un resmi VS Code eklentisini yükleyin: "Biome" (Marketplace'te arayın).

.vscode/settings.json dosyanıza şunları ekleyin:

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

Artık dosyayı kaydettiğinizde Biome otomatik olarak kodu formatlar, import'ları sıralar ve otomatik düzeltilebilir lint hatalarını giderir.

Diğer Editörler

Biome, LSP (Language Server Protocol) desteği sayesinde Neovim, Helix, Zed ve IntelliJ editörleriyle de uyumlu çalışır.

Git Hook Entegrasyonu (Husky + lint-staged Alternatifi)

Biome'u commit öncesi çalıştırmak için lefthook veya husky kullanabilirsiniz:

npm install --save-dev lefthook

lefthook.yml dosyası oluşturun:

pre-commit:
  commands:
    biome:
      glob: "*.{js,ts,jsx,tsx,json,css}"
      run: npx biome check --write --no-errors-on-unmatched --staged {staged_files}
      stage_fixed: true

Bu yapılandırma, yalnızca stage'e alınmış dosyaları kontrol eder ve otomatik düzeltmeleri uygulayarak tekrar stage'e ekler. lint-staged paketine bile ihtiyaç duymazsınız.

Performans Karşılaştırması

Biome'un Rust altyapısının sağladığı performans farkını somut rakamlarla görelim. Orta ölçekli bir React projesi (yaklaşık 1500 dosya) üzerinde yapılan karşılaştırma:

İşlem	ESLint + Prettier	Biome
Linting	~28 saniye	~0.4 saniye
Formatlama	~8 saniye	~0.2 saniye
Toplam (check)	~36 saniye	~0.5 saniye
Bağımlılık boyutu	~85 MB	~5 MB
Paket sayısı	8+	1

Bu rakamlar yaklaşık değerlerdir ve projeye göre farklılık gösterir, ancak büyüklük sırası tutarlıdır. CI/CD pipeline'larında bu fark, özellikle monorepo yapılarında ciddi zaman ve maliyet tasarrufu sağlar.

Biome'da Kural Yönetimi ve Pratik Örnekler

Belirli Kuralları Devre Dışı Bırakma

Bazı dosyalarda belirli kuralları satır bazında devre dışı bırakabilirsiniz:

// biome-ignore lint/suspicious/noConsoleLog: Geliştirme amaçlı log
console.log("Debug bilgisi:", data);

React Projesi İçin Önemli Kurallar

Biome, React projelerinde sıkça ihtiyaç duyulan kuralları yerleşik olarak destekler:

// ❌ useExhaustiveDependencies hatası verir
useEffect(() => {
  fetchUser(userId);
}, []); // userId eksik

// ✅ Doğru kullanım
useEffect(() => {
  fetchUser(userId);
}, [userId]);

// ❌ noUnusedImports hatası verir
import { useState, useEffect, useCallback } from 'react';

function App() {
  const [count, setCount] = useState(0);
  // useEffect ve useCallback kullanılmıyor
  return <div>{count}</div>;
}

// ✅ Biome otomatik düzeltme ile temizler
import { useState } from 'react';

function App() {
  const [count, setCount] = useState(0);
  return <div>{count}</div>;
}

Import Sıralama

Biome'un import sıralama özelliği, ek bir eklenti gerektirmeden çalışır:

// ❌ Düzensiz importlar
import { Button } from './components/Button';
import React from 'react';
import axios from 'axios';
import { useAuth } from '../hooks/useAuth';
import styles from './App.module.css';

// ✅ Biome ile otomatik sıralama sonrası
import React from 'react';
import axios from 'axios';

import { useAuth } from '../hooks/useAuth';
import { Button } from './components/Button';
import styles from './App.module.css';

Biome'un Mevcut Sınırlamaları

Biome hızla gelişen bir proje olmasına rağmen bazı sınırlamaları var. Geçiş kararı vermeden önce bunları bilmek önemli:

CSS linting henüz erken aşamada (formatter stabil, linter nursery seviyesinde)
Eklenti sistemi henüz yok — ESLint'in devasa eklenti ekosistemiyle karşılaştırılamaz
Bazı niş ESLint kuralları Biome'da karşılığı olmayabilir
HTML/Vue/Svelte dosya desteği henüz sınırlı
eslint-plugin-jsx-a11y gibi erişilebilirlik kurallarının tamamı henüz port edilmedi (ama çoğu mevcut)

Eğer projeniz çok spesifik ESLint eklentilerine bağımlıysa (örneğin eslint-plugin-testing-library gibi), Biome'u kademeli olarak benimsemeyi düşünebilirsiniz. Biome ve ESLint'i geçiş döneminde birlikte çalıştırmanız da mümkündür.

Ne Zaman Biome'a Geçmelisiniz?

Biome ideal seçimdir:

Yeni bir proje başlatıyorsanız
ESLint konfigürasyon karmaşasından bıktıysanız
CI/CD sürecinizi hızlandırmak istiyorsanız
Minimal bağımlılıkla çalışmayı tercih ediyorsanız
React + TypeScript stack kullanıyorsanız

ESLint'te kalmak mantıklı olabilir:

Çok spesifik eklentilere bağımlıysanız (a11y, testing-library vb. için kapsamlı kurallar)
Özel (custom) ESLint kuralları yazmışsanız ve bunları taşıyamıyorsanız
Takımınız mevcut yapıdan memnunsa

Sonuç

Biome, JavaScript/TypeScript ekosistemindeki araç yorgunluğuna güçlü bir çözüm sunuyor. Tek bir paket, tek bir konfigürasyon dosyası ve yıldırım hızında performans ile ESLint + Prettier ikilisini başarıyla değiştirebilir.

Özetlemek gerekirse:

8+ paket yerine 1 paket kuruyorsunuz
4+ konfigürasyon dosyası yerine 1 dosya yönetiyorsunuz
Saniyeler yerine milisaniyeler bekliyorsunuz
Kural çakışmaları tarih oluyor
Migration aracı sayesinde geçiş sancısız oluyor

Biome her geçen gün daha fazla kural ve dil desteği ekliyor. 2024-2025 itibarıyla birçok büyük açık kaynak projesi ve şirket Biome'a geçiş yaptı. Eğer siz de geliştirme deneyiminizi sadeleştirmek ve hızlandırmak istiyorsanız, Biome'u bir sonraki projenizde veya mevcut projenizde denemenizi kesinlikle öneririm.

Tek yapmanız gereken:

npm install --save-dev --save-exact @biomejs/biome
npx @biomejs/biome init
npx biome check --write .

Üç komut. Gerisi tarih.