Biome v2.4: ESLint ve Prettier Yerine Rust Tabanli JavaScript Toolchain (2026)

Biome Nedir? / What is Biome?

Biome, JavaScript, TypeScript, JSX, JSON, CSS ve GraphQL projeleri için geliştirilmiş, Rust ile yazılmış yüksek performanslı bir web toolchain'dir. 2023 yılında Roma (Rome) projesinin fork'u olarak doğan Biome, Ağustos 2023'te v1.0'a, Mart 2025'te ise v2.0'a ulaştı. Şubat 2026 itibarıyla v2.4 sürümüyle 449'dan fazla lint kuralı sunan Biome, ESLint ve Prettier'ın yerini tek bir araçla almayı hedefliyor.

Alesta Web bünyesindeki projelerde yaptığımız testlerde en dikkat çeken özellik şu oldu: Biome, hiçbir bağımlılığa ihtiyaç duymadan tek bir binary dosyası olarak çalışıyor. npm install ile gelen onlarca ESLint plugin'i, Prettier, Prettier plugin'leri, .eslintrc, .prettierrc — bunların hepsini tek bir biome.json dosyasıyla değiştiriyorsunuz.

Biome v2.4 — Şubat 2026 Yenilikleri / February 2026 Release

Biome v2.4, 2026 yılının ilk minor sürümü olarak büyük bir heyecanla karşılandı. Alesta Web olarak bu sürümü yayımlandığı gün test ettik ve getirdiği yenilikler gerçekten etkileyici. İşte öne çıkan başlıklar:

1. Gömülü CSS ve GraphQL Desteği / Embedded CSS & GraphQL Support

v2.4'ün en dikkat çekici özelliği, JavaScript ve TypeScript dosyaları içindeki gömülü CSS ve GraphQL snippet'lerini doğrudan formatlayıp lint edebilmesi. Styled-components, Emotion ve benzeri CSS-in-JS kütüphanelerinde yazdığınız template literal CSS kodları artık otomatik olarak formatlanıyor.

// Biome v2.4 bu kodu otomatik formatlar ve lint eder
import styled from 'styled-components';

const Button = styled.button`
  background-color: #0070f3;
  color: white;
  padding: 8px 16px;
  border-radius: 4px;
  /* Biome: duplicate-property tespiti burada da çalışır */
  font-size: 14px;
`;

// GraphQL tagged template literals için de geçerli
const QUERY = gql`
  query GetUser($id: ID!) {
    user(id: $id) {
      name
      email
    }
  }
`;

2. HTML Erişilebilirlik Kuralları / HTML Accessibility Rules

Biome v2.4, HTML için 15 yeni erişilebilirlik odaklı lint kuralı getirdi. Bu kurallar doğrudan HTML dosyalarında çalıştığı gibi Vue, Svelte ve Astro component'lerinde de etkili oluyor. Örneğin:

3. Nursery Kurallarının Stabilizasyonu / Nursery Rules Stabilization

v2.4 ile birlikte 24 adet "nursery" (deneysel) kural production-ready olarak işaretlendi. Bu kurallar artık stable gruba taşındı ve varsayılan olarak aktif hale geldi. Alestaweb.com projelerimizde bu kuralları aktifleştirdiğimizde ilk çalıştırmada 47 potansiyel hata tespit edildi — bunların büyük çoğunluğu auto-fix edildi.

4. Yinelenen CSS Sınıfı Tespiti / Duplicate Class Detection

Yeni noDuplicateClasses assist action'ı, JSX'teki className ve HTML'deki class attribute'larında yinelenen Tailwind/utility class'larını tespit ediyor. clsx, cn ve cva gibi popüler utility fonksiyonlarını da anlıyor.

// ÖNCE / BEFORE — Biome hata verir
<div className="flex items-center flex-row items-center gap-4">

// SONRA / AFTER — Biome auto-fix ile düzeltir
<div className="flex items-center flex-row gap-4">

5. trailingNewline Seçeneği / Trailing Newline Option

Formatter'a eklenen yeni trailingNewline seçeneği varsayılan olarak true geliyor ve POSIX uyumluluğunu sağlıyor. Linux/Mac tabanlı CI ortamlarında git diff kirliliğini önlemek için kritik bir özellik.

Performans Karşılaştırması / Performance Benchmark

Alesta Web olarak hem yerel geliştirme ortamımızda hem de CI pipeline'larımızda Biome'u ESLint ve Prettier ile karşılaştırdık. Sonuçlar oldukça çarpıcı:

Bu rakamlar neden bu kadar büyük? Cevap Rust'ta gizli. Biome'un Rust ile yazılmış core'u, Node.js tabanlı ESLint'in asla yakalayamayacağı düzeyde paralel işlem ve bellek verimliliği sunuyor. Üstelik Biome sıfır node_modules bağımlılığı ile çalışıyor — kurulum boyutu da buna bağlı olarak dramatik şekilde küçülüyor.

Kurulum ve Yapılandırma / Installation & Configuration

Biome'u bir projeye eklemek ESLint kurmaktan çok daha basit. Alesta Web projelerinde kullandığımız standart kurulum adımları şöyle:

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

# ya da pnpm ile (önerilen)
pnpm add -D --save-exact @biomejs/biome

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

npx @biomejs/biome init

Bu komut biome.json dosyasını oluşturur. Alestaweb.com projelerinde kullandığımız temel yapılandırma:

{
  "$schema": "https://biomejs.dev/schemas/2.4.0/schema.json",
  "vcs": {
    "enabled": true,
    "clientKind": "git",
    "useIgnoreFile": true
  },
  "formatter": {
    "enabled": true,
    "indentStyle": "space",
    "indentWidth": 2,
    "lineWidth": 100,
    "trailingNewline": true
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true,
      "a11y": {
        "recommended": true
      },
      "complexity": {
        "noExcessiveCognitiveComplexity": "warn"
      },
      "correctness": {
        "noUnusedVariables": "error",
        "noUnusedImports": "error"
      },
      "security": {
        "noDangerouslySetInnerHtml": "warn"
      }
    }
  },
  "assist": {
    "enabled": true,
    "actions": {
      "source": {
        "organizeImports": "on"
      }
    }
  },
  "javascript": {
    "formatter": {
      "quoteStyle": "single",
      "semicolons": "always",
      "trailingCommas": "es5"
    }
  },
  "css": {
    "linter": {
      "enabled": true
    },
    "formatter": {
      "enabled": true
    }
  }
}

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

{
  "editor.defaultFormatter": "biomejs.biome",
  "editor.formatOnSave": true,
  "[javascript]": { "editor.defaultFormatter": "biomejs.biome" },
  "[typescript]": { "editor.defaultFormatter": "biomejs.biome" },
  "[javascriptreact]": { "editor.defaultFormatter": "biomejs.biome" },
  "[typescriptreact]": { "editor.defaultFormatter": "biomejs.biome" }
}

ESLint'ten Göç / Migrating from ESLint & Prettier

Alesta Web olarak mevcut ESLint + Prettier kurulumunu Biome'a taşırken en çok endişelendiğimiz şey, var olan kural setini yitirmekti. Ama Biome'un migration CLI'ı bu süreci ciddi ölçüde kolaylaştırdı.

# ESLint ve Prettier kurallarını Biome'a taşı
npx @biomejs/biome migrate eslint --write
npx @biomejs/biome migrate prettier --write

Bu komutlar .eslintrc ve .prettierrc dosyalarınızı okuyarak mümkün olduğunca biome.json'a dönüştürüyor. Desteklenmeyen kurallar için uyarı veriyor. Biome şu an ESLint kurallarının %85-90'ını karşılıyor.

GritQL Plugin Sistemi / GritQL Plugin System

Biome v2.0 ile gelen ve v2.4'te olgunlaşan GritQL plugin sistemi, Biome'u gerçek anlamda özelleştirilebilir bir araç haline getiriyor. GritQL artık Biome organizasyonunun resmi bir parçası.

GritQL, kod pattern eşleştirme için tasarlanmış bir sorgu dili. Biome'da bu dili kullanarak kendi özel lint kurallarınızı ve formatter davranışlarınızı yazabiliyorsunuz. Alestaweb.com için yazdığımız örnek bir GritQL plugin:

// .biome/rules/no-console-production.grit
`console.$method($args)` where {
  $method <: or { `log`, `warn`, `error`, `debug` },
  register_diagnostic(
    span = $method,
    message = "Production kodunda console çağrısı kullanmayın / Avoid console calls in production",
    severity = "error"
  )
}

v2.4 ile birlikte GritQL artık JSON dosyalarını da hedef alabilir. Bu sayede yapılandırma dosyalarınızdaki hatalı pattern'leri lint edebilirsiniz — örneğin package.json'da yanlış yazılmış script isimleri veya tsconfig.json'da çakışan ayarlar.

Type-Aware Linting

ESLint + typescript-eslint kombinasyonunun en güçlü özelliklerinden biri type-aware linting'di. Biome v2.0 ile bu boşluk büyük ölçüde kapandı. Biome artık TypeScript type bilgisini kullanarak daha akıllı lint kuralları çalıştırabiliyor.

Biome'un type-aware yaklaşımı, tam TypeScript compiler'ı çalıştırmak yerine node_modules içindeki .d.ts dosyalarını tarayarak type çıkarımı yapıyor. Bu yaklaşım daha hızlı ama bazı karmaşık generic type'larda TypeScript compiler kadar derinlemesine giremeyebilir.

{
  "linter": {
    "rules": {
      "correctness": {
        "noUnsafeNullAssertion": "error",
        "useExhaustiveDependencies": "error"
      },
      "suspicious": {
        "noExplicitAny": "warn",
        "noUnsafeDeclarationMerging": "error"
      },
      "style": {
        "useConsistentGenericTypeParameter": "warn"
      }
    }
  }
}

Framework Desteği / Framework Support (Vue, Svelte, Astro)

Biome v2.4, Vue ve Svelte parser'larında ciddi geliştirmeler yaptı. Önceki sürümlerde "experimental" olan bu destek artık production-ready seviyesine yaklaşıyor. Alesta Web bünyesindeki Vue 3 projelerinde test ettiğimizde format tutarsızlıkları büyük ölçüde giderilmişti.

{
  "files": {
    "include": ["**/*.js", "**/*.ts", "**/*.jsx", "**/*.tsx",
                "**/*.vue", "**/*.svelte", "**/*.astro",
                "**/*.css", "**/*.json"]
  },
  "overrides": [
    {
      "include": ["**/*.vue"],
      "linter": {
        "rules": {
          "style": {
            "useTemplate": "off"
          }
        }
      }
    }
  ]
}

CI/CD Entegrasyonu / CI/CD Integration

Biome'un en pratik kullanım alanlarından biri CI pipeline'larında. biome ci komutu, write yetkisi olmaksızın sadece kontrol modunda çalışıyor ve herhangi bir sorun bulunduğunda non-zero exit kodu döndürüyor.

name: Code Quality

on: [push, pull_request]

jobs:
  biome:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: biomejs/setup-biome@v2
        with:
          version: latest
      - name: Run Biome
        run: biome ci --reporter=github .

# .husky/pre-commit
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

# Staged dosyaları Biome ile kontrol et / Check staged files with Biome
npx lint-staged

# lint-staged.config.js
export default {
  "*.{js,ts,jsx,tsx,json,css}": [
    "biome check --write --no-errors-on-unmatched"
  ]
};

Alesta Web Deneyimi / Our Real-World Experience at Alesta Web

Alesta Web olarak Biome'u ilk test ettiğimizde şüpheciydik. "Bir araç hem ESLint hem Prettier'ın yerini alabilir mi?" sorusu aklımızı kurcalıyordu. Ama alestaweb.com ve yan projelerimizde 3 ay boyunca production'da kullandıktan sonra söyleyebileceğimiz şu: Biome, ESLint + Prettier kombinasyonunun %90 kullanım senaryosunu daha iyi ve çok daha hızlı karşılıyor.

Alesta Web bünyesindeki 5 farklı JavaScript/TypeScript projesine Biome entegre ettik. Her birinde ilk biome check --write çalıştırmasında onlarca gereksiz import, kullanılmayan değişken ve format tutarsızlığı otomatik düzeltildi. Ekibin IDE'lerde anlık geri bildirim alma süresi dramatik şekilde kısaldı.

Alesta Web geliştirme sürecimizde Biome'un getirdiği en büyük değer, "araç kurma" süresinin ortadan kalkması oldu. Yeni bir proje başlatırken artık 30 dakika ESLint yapılandırması yapma ihtiyacı kalmadı. biome init, birkaç saniyede sizi production-ready bir linting/formatting ortamına kavuşturuyor.

Biome'un 2026 yönelik roadmap'i de umut verici. Daha güçlü cross-language lint kuralları, tam HTML desteği, gelişmiş GritQL plugin kapasitesi ve daha kapsamlı type-aware linting hedefleniyor. Alesta Web olarak bu gelişmeleri yakından takip etmeye ve deneyimlerimizi alestaweb.com üzerinden paylaşmaya devam edeceğiz.

Kısacası: Eğer hâlâ ESLint + Prettier kullanıyorsanız, Biome'u bir kez deneyin. Özellikle büyük kod tabanlarında, monorepolarda ve hız odaklı CI süreçlerinde Biome'un farkını ilk dakikada hissedeceksiniz. alestaweb.com'da bu konudaki pratik rehberlerimizi ve video anlatımlarımızı takip edebilirsiniz.

Kaynaklar / References

• Biome v2.4 Resmi Sürüm Notları — biomejs.dev
• Biome 2026 Roadmap — biomejs.dev
• Biome Linter Plugin Sistemi (GritQL) — biomejs.dev
• Biome vs ESLint: Karşılaştırma Rehberi — Better Stack
• What's New in Biome v2.4 — Onix React / Medium
• Biome Migration Guide (ESLint + Prettier) — Pockit Blog
• Biome GitHub Deposu — github.com/biomejs/biome
• Biome vs ESLint Ultimate Showdown — Medium