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