TypeScript Formatlama ve Linting Araçları Karşılaştırması: Biome, Oxlint, ESLint ve Prettier

TypeScript araç ekosistemi, Rust tabanlı alternatiflerin sahneye çıkmasıyla önemli ölçüde değişti. Farklı proje boyutlarında hem geleneksel hem de modern araçlarla çalışmak, "en iyi" seçimin büyük ölçüde belirli kısıtlamalara bağlı olduğunu öğretti. Bu karşılaştırma, TypeScript projeleriniz için bilinçli bir karar vermenize yardımcı olmak üzere ESLint, Prettier, Biome ve Oxlint'i inceliyor.

Özet#

Bu analiz, modern TypeScript formatlama ve linting araçlarını performans, özellik kapsamı, entegrasyon yetenekleri ve migration karmaşıklığı odaklı bir framework kullanarak karşılaştırıyor. Amaç, geliştirme takımlarının trendleri takip etmek yerine kendi gereksinimlerine göre bilinçli kararlar almasına yardımcı olmak. Temel bulgular: Rust tabanlı araçlar, ekosistem olgunluğu ve type-aware kural kapsamında bazı trade-off'larla 15-50x hız iyileştirmesi sunuyor.

Bağlam: Bu Neden Şimdi Önemli#

TypeScript geliştiricileri geleneksel araçlarla çeşitli pratik zorluklarla karşılaşıyor:

CI/CD Pipeline Etkisi: ESLint + Prettier, 10k satırlık bir monorepo'yu lint etmek için 3-5 saniye sürebilir. Günlük yüzlerce build çalıştıran organizasyonlarda bu toplanır.

Konfigürasyon Karmaşıklığı: Geleneksel kurulumlar genellikle 4+ konfigürasyon dosyası gerektirir - eslint.config.js, .prettierrc, tsconfig.json ve çeşitli plugin'ler.

Dependency Yükü: Yaygın plugin'lerle ESLint + Prettier, 100'den fazla npm paketi çekebilir, kurulum süresini ve bakım yükünü artırır.

Araç Koordinasyonu: ESLint-Prettier çatışmalarını yönetmek, eslint-config-prettier veya benzer çözümlerle dikkatli konfigürasyon gerektirir.

Type-Aware Linting Maliyeti: Tam tip kontrolü ile typescript-eslint, daha büyük kod tabanlarında linting süresine 10-20 saniye ekleyebilir.

Araç Manzarası Genel Bakış#

Araçlar üç kategoriye ayrılıyor: Linter'lar (kod kalitesi), Formatter'lar (kod stili) ve Hepsi Bir Arada çözümler.

Linter'lar#

ESLint: Yerleşik Standart#

ESLint, 2013'ten beri JavaScript/TypeScript linting standardı olmuştur. Mevcut v9.x sürümü flat config'i (eslint.config.js) varsayılan yapar, eski .eslintrc formatı kullanım dışı bırakılmıştır.

Temel Özellikler:

• 1000'den fazla plugin ile plugin tabanlı mimari
• typescript-eslint ile tam TypeScript desteği
• Olgun IDE entegrasyonu
• v10.0.0-rc.0 ile aktif geliştirme

Oxlint: Hız Odaklı Linter#

Oxlint, maksimum performansla sadece linting'e odaklanan Oxc projesinin parçası. Sürüm 1.0 Haziran 2025'te yayınlandı.

Temel Özellikler:

• Sadece linter (formatlama yok)
• 655'den fazla yerleşik kural
• tsgolint ile type-aware linting (typescript-go tabanlı)
• Benchmark'larda ESLint'ten 50-100x daha hızlı
• Önizleme'de JS plugin desteği (Ekim 2025)

Formatter'lar#

Prettier: Formatlama Öncüsü#

Prettier, 2017'de opinionated formatter kategorisini oluşturdu. Sürüm 3.7 (Kasım 2025), gelişmiş TypeScript formatlama tutarlılığı ile istikrarlı evrimi sürdürüyor.

Temel Özellikler:

• Sadece opinionated kod formatlayıcı (linting yok)
• Biome ile %97 formatlama uyumluluğu
• v3.6 önemli hız iyileştirmeleriyle --experimental-cli tanıtıldı
• Çeşitli diller için kapsamlı plugin ekosistemi

dprint: Pluggable Formatter#

dprint, hız ve yapılandırılabilirliğe öncelik veren Rust tabanlı pluggable formatlama platformu.

Temel Özellikler:

• WebAssembly tabanlı plugin sistemi
• Yüksek derecede yapılandırılabilir (Prettier'ın opinionated yaklaşımından farklı)
• TypeScript, JSON, Markdown, TOML, CSS ve daha fazlasını destekler
• Uyumluluk için Prettier veya Biome pluginlerini kullanabilir
• URL importları ile konfigürasyon paylaşımı

oxfmt: En Hızlı Formatter (Alpha)#

Oxc ekosisteminin parçası, oxfmt şu anda alpha aşamasında Prettier uyumlu bir formatter.

Temel Özellikler:

• Prettier'dan 30x, Biome'dan 3x hızlı
• JS/TS(X), JSON, YAML, HTML, CSS, GraphQL, Markdown desteği
• Native Tailwind class sıralama
• Eksik: Prettier pluginleri, bazı konfigürasyon seçenekleri

Hepsi Bir Arada Çözümler#

Biome: Birleşik Araç Zinciri#

Biome, 2023'te Rome'un community fork'u olarak ortaya çıktı. Sürüm 2.x (Haziran 2025'te yayınlandı) stabil, feature-complete sürüm.

Temel Özellikler:

• Linter, formatter ve import organizer'ı birleştiren tek binary
• Performans için Rust ile yazılmış
• ESLint, typescript-eslint ve diğer kaynaklardan 420'den fazla yerleşik kural
• Biotype ile type-aware linting (typescript-eslint kurallarının yaklaşık %75-85'ini kapsayan)
• v2.0'da tanıtılan plugin sistemi

Geniş Oxc Ekosistemi#

Oxlint, Oxc projesinin sadece bir parçası. Ekosistem, paylaşılan Rust altyapısı üzerine kurulu birçok yüksek performanslı araç içeriyor:

oxfmt özellikle ilginç - şu anda alpha aşamasında Prettier uyumlu bir formatlayıcı. JS/TS(X), JSON, YAML, HTML, CSS, GraphQL ve Markdown'ı destekliyor, native Tailwind class sıralama özelliği var. Ancak Prettier plugin desteği ve bazı konfigürasyon seçenekleri eksik.

Oxlint kullanan projeler için, bu araçlar olgunlaştıkça tamamen Rust tabanlı bir araç zincirine geçiş yolu sunuyor.

Performans Analizi#

Ham Hız Karşılaştırması#

10k satırlık bir monorepo ile yapılan testlere göre, tipik sonuçlar şöyle görünüyor:

Önemli uyarı: Sonuçlarınız kod tabanı yapısı, kural konfigürasyonu ve donanıma göre değişecektir. Her zaman gerçek projenizde benchmark yapın.

Type-Aware Linting Performansı#

Type-aware kurallar, floating promise tespit etme veya hatalı tip assertion'ları gibi değerli kontroller sağlar, ancak performans maliyetiyle gelir:

Rust tabanlı araçlar type-aware linting için 7-12x iyileştirme gösteriyor, ancak değişen kural kapsamıyla.

CI/CD Etkisi#

100 build/gün çalıştıran bir takım için 10k satırlık kod tabanında:

CI dakikalarındaki azalma anlamlı ancak nadiren birincil karar faktörü. Daha hızlı yerel geri bildirimden gelen geliştirici deneyimi iyileştirmeleri genellikle daha etkili.

Özellik Karşılaştırma Matrisi#

Linter Karşılaştırması#

Formatter Karşılaştırması#

Kombine Araç Karşılaştırması#

Type-Aware Kural Kapsamı#

Type-aware kurallar sadece söz dizimi analizinin kaçırdığı ince bug'ları yakaladığından bu özel ilgiyi hak ediyor:

typescript-eslint (ESLint): 50'den fazla type-aware kuralla tam TypeScript tip sistemi kapsamı.

Biotype (Biome): typescript-eslint kurallarının yaklaşık %75-85'ini kapsayan özel tip sentezleyici. İlk yayınlanan kural: noFloatingPromises. Biome'un TypeScript derleyicisi kullanmadığını, bu nedenle edge case'lerin farklı olabileceğini unutmayın.

tsgolint (Oxlint): typescript-go tabanlı (TypeScript v7.0'ın temeli), şu anda 43 type-aware kural sunuyor. Devam eden TypeScript takım optimizasyonlarından yararlanıyor.

Konfigürasyon Örnekleri#

Geleneksel ESLint + Prettier Kurulumu#

// eslint.config.js (ESLint v9 flat config)import eslint from "@eslint/js";import tseslint from "typescript-eslint";import reactPlugin from "eslint-plugin-react";import reactHooksPlugin from "eslint-plugin-react-hooks";import prettierConfig from "eslint-config-prettier";
export default tseslint.config(  eslint.configs.recommended,  ...tseslint.configs.strictTypeChecked,  {    languageOptions: {      parserOptions: {        project: true,        tsconfigRootDir: import.meta.dirname,      },    },  },  reactPlugin.configs.flat.recommended,  reactPlugin.configs.flat["jsx-runtime"],  {    plugins: {      "react-hooks": reactHooksPlugin,    },    rules: reactHooksPlugin.configs.recommended.rules,  },  prettierConfig,);

// .prettierrc{  "semi": true,  "singleQuote": true,  "tabWidth": 2,  "trailingComma": "es5"}

Biome Konfigürasyonu#

// biome.json{  "$schema": "https://biomejs.dev/schemas/latest/schema.json",  "assist": {    "actions": {      "source": {        "organizeImports": "on"      }    }  },  "linter": {    "enabled": true,    "rules": { "recommended": true }  },  "formatter": {    "enabled": true,    "indentStyle": "space",    "indentWidth": 2  },  "javascript": {    "formatter": {      "quoteStyle": "single",      "semicolons": "always",      "trailingCommas": "es5"    }  }}

Oxlint Konfigürasyonu#

// oxlint.json{  "$schema": "./node_modules/oxlint/configuration_schema.json",  "rules": {    "no-unused-vars": "warn",    "react-hooks/rules-of-hooks": "error",    "react-hooks/exhaustive-deps": "warn"  },  "plugins": ["react", "react-hooks", "typescript"]}

dprint Konfigürasyonu#

// dprint.json{  "typescript": {    "lineWidth": 100,    "indentWidth": 2,    "useTabs": false,    "semiColons": "always",    "quoteStyle": "preferSingle",    "trailingCommas": "onlyMultiLine"  },  "json": {},  "markdown": {},  "includes": ["**/*.{ts,tsx,js,jsx,json,md}"],  "excludes": ["**/node_modules", "**/dist"]}

Konfigürasyon karmaşıklığı farkı dikkat çekici: Biome ve Oxlint tek bir JSON dosyası gerektirirken, ESLint + Prettier genellikle birden fazla dosya ve plugin koordinasyonu içerir.

React ve React Native Hususları#

React Desteği#

Tüm araçlar React/JSX'i iyi handle ediyor:

React Native Özel Konfigürasyon#

React Native için Biome:

// biome.json{  "files": {    "include": ["**/*.ts", "**/*.tsx", "**/*.js", "**/*.jsx"]  },  "javascript": {    "parser": {      "unsafeParameterDecoratorsEnabled": true    },    "globals": ["__DEV__", "fetch", "FormData"]  },  "linter": {    "rules": {      "style": {        "noNonNullAssertion": "warn"      },      "correctness": {        "noUnusedVariables": "warn",        "useHookAtTopLevel": "error"      }    }  }}

Expo SDK 53+ ile ESLint:

// eslint.config.jsconst expoConfig = require("eslint-config-expo/flat");const { defineConfig } = require("eslint/config");
module.exports = defineConfig([  expoConfig,  {    rules: {      "react-native/no-unused-styles": "error",      "react-native/split-platform-components": "warn",      "react-native/no-inline-styles": "warn",    },  },]);

React Native projeleri için öneri:

• Yeni projeler: Basitlik için Biome'u düşünün
• Expo projeleri: Kapsamlı destek için eslint-config-expo kullanın
• Hız-kritik CI: Hızlı ilk geri bildirim için Oxlint ekleyin
• Tip güvenliği önceliği: Tam kapsam için typescript-eslint'i tutun

IDE Entegrasyonu#

VS Code#

Biome VS Code Uzantısı (v3):

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

Özellikler arasında multi-root workspace desteği, isimsiz dosyalar için tek dosya modu ve otomatik sürüm yeniden yükleme bulunuyor.

IDE Destek Özeti#

WebStorm/IntelliJ kullanıcıları Biome entegrasyonunun VS Code'dan daha az olgun olduğunu bilmeli - manuel "Biome ile Formatla" aksiyonu yok, sadece kaydetmede formatlama.

Monorepo Konfigürasyonu#

Turborepo + Biome#

// turbo.json{  "tasks": {    "lint": {      "dependsOn": ["^build"],      "outputs": [],      "cache": true    },    "format": {      "outputs": [],      "cache": false    }  }}

// Root biome.json{  "extends": ["./packages/config-biome/base.json"],  "files": {    "ignore": ["**/dist/**", "**/node_modules/**"]  }}

Turborepo + ESLint (Paylaşılan Konfigürasyon)#

// packages/eslint-config/base.jsconst tseslint = require("typescript-eslint");
module.exports = tseslint.config(  ...tseslint.configs.recommended,  {    rules: {      "@typescript-eslint/no-explicit-any": "error",    },  });
// apps/web/eslint.config.jsconst baseConfig = require("@repo/eslint-config/base");const nextConfig = require("@repo/eslint-config/next");
module.exports = [...baseConfig, ...nextConfig];

Tüm araçlar Turborepo, pnpm workspaces ve Nx ile makul şekilde entegre oluyor. Ana fark konfigürasyon karmaşıklığı, temel uyumluluk değil.

CI/CD Entegrasyonu#

Biome ile GitHub Actions#

# .github/workflows/lint.ymlname: Linton: [push, pull_request]
jobs:  lint:    runs-on: ubuntu-latest    steps:      - uses: actions/checkout@v4      - uses: biomejs/setup-biome@v2        with:          version: latest      - run: biome ci .        # biome ci otomatik olarak GitHub annotation'ları sağlar

Paralel Linting Stratejisi (Oxlint + ESLint)#

# Hızlı geri bildirim için oxlint, type-aware kurallar için ESLint kullanınjobs:  fast-lint:    runs-on: ubuntu-latest    steps:      - uses: actions/checkout@v4      - uses: oxc-project/setup-oxc@v1      - run: oxlint --deny-warnings .  # <1 saniyede tamamlanır
  type-aware-lint:    runs-on: ubuntu-latest    steps:      - uses: actions/checkout@v4      - run: npm ci      - run: npx eslint .  # Type-aware kurallar

Bu paralel yaklaşım, kapsamlı tip kontrolünü korurken hızlı geri bildirim sağlar.

Migration Stratejileri#

ESLint + Prettier'dan Biome'a#

Migration karmaşıklığı: Düşük ila Orta Süre tahmini: Küçük projeler için 1-2 gün, büyük projeler için 1 hafta

# Adım 1: Biome'u yükleyinnpm install --save-dev @biomejs/biome
# Adım 2: Otomatik migration'ı çalıştırınnpx biome migrate eslint --writenpx biome migrate prettier --write
# Adım 3: Migration'ı doğrulayınnpx biome check . --diagnostic-level=info
# Adım 4: Eski dependency'leri kaldırınnpm uninstall eslint prettier eslint-config-prettier \  eslint-plugin-react eslint-plugin-react-hooks \  @typescript-eslint/eslint-plugin @typescript-eslint/parser
# Adım 5: Eski konfigürasyon dosyalarını temizleyinrm .eslintrc.* .prettierrc* .eslintignore .prettierignore

Dikkat edilmesi gereken tuzaklar:

• Bazı ESLint plugin'lerinin Biome eşdeğeri yok
• Sadece JSON konfigürasyon dinamik konfigürasyonu sınırlar (JavaScript ifadeleri yok)
• Vue/Svelte/Astro desteği deneysel

Kademeli Migration: ESLint + Oxlint#

Migration karmaşıklığı: Düşük Süre tahmini: 1-2 saat

# Çakışan kuralları devre dışı bırakmak için eslint-plugin-oxlint yükleyinnpm install --save-dev oxlint eslint-plugin-oxlint

// eslint.config.jsimport oxlint from "eslint-plugin-oxlint";
export default [  ...tseslint.configs.recommended,  oxlint.configs["flat/recommended"],  // Çakışan kuralları devre dışı bırakır];

// package.json{  "scripts": {    "lint": "oxlint && eslint ."  // Önce hızlı geri bildirim  }}

Bu yaklaşım sıfır riskle anında hız kazanımları sağlar - Oxlint'ten daha hızlı ilk geri bildirim alırken tam ESLint konfigürasyonunuzu korursunuz.

Sadece Formatter Migration (Prettier'dan Biome'a)#

Migration karmaşıklığı: Çok Düşük Süre tahmini: 30 dakika

# Biome'u yükleyinnpm install --save-dev @biomejs/biome
# Prettier konfigürasyonunu migrate edinnpx biome migrate prettier --write
# ESLint'i tutmak istiyorsanız Biome linter'ı devre dışı bırakın# biome.json'da:# "linter": { "enabled": false }

Bu, aşina olduğunuz linting kurulumunu korurken size daha hızlı formatlama sağlar.

Karar Framework'ü#

Her Aracı Ne Zaman Seçmeli#

ESLint + Prettier'ı seçin:

• Belirli ESLint plugin'lerine ihtiyacınız varsa (özel kurallar, framework'e özel plugin'ler)
• Takım mevcut kurulumla rahatsa
• Vue, Svelte veya Astro desteğine ihtiyacınız varsa
• Tam typescript-eslint tip kapsamı gerekiyorsa

Biome'u seçin:

• Yeni bir proje başlatıyor ve basitlik istiyorsanız
• Azaltılmış konfigürasyon ve dependency sayısına değer veriyorsanız
• Projeniz egzotik plugin'ler olmadan React/React Native kullanıyorsa
• %75-85 type-aware kural kapsamını kabul etmeye hazırsınız

Oxlint'i seçin (ESLint ile birlikte):

• CI hızı öncelik ama tam migration yapılamıyorsa
• Daha hızlı yerel geliştirme geri bildirimi istiyorsanız
• Taahhüt vermeden Rust tabanlı araçları değerlendiriyorsanız

Oxlint'i seçin (ESLint yerine):

• Sadece linting'e ihtiyacınız varsa (formatlama için Biome veya Prettier kullanın)
• Maksimum hız öncelikse
• Kural gereksinimleriniz Oxlint'in 655+ yerleşik kuralıyla kapsanıyorsa

Yaygın Tuzaklar#

Tuzak 1: %100 Eşitlik Varsaymak#

Biome ve Oxlint tüm ESLint kurallarını kapsamıyor. Migration'dan önce gerçekten kullandığınız kuralları denetleyin. Çoğu proje ihtiyaçlarından çok daha fazla kural aktif eder.

Tuzak 2: Açık PR'larda Formatlama Bozmak#

Formatter değiştirmek açık PR'larda büyük diff'ler oluşturur. Geçiş yapmadan önce tüm kod tabanını tek bir PR'da formatlayın ve zamanlamayla ilgili takımınızla iletişim kurun.

Tuzak 3: IDE Uzantı Çatışmaları#

Kaydetmede formatlama için çarpışan birden fazla formatter karışıklığa neden olur. Çatışan uzantıları devre dışı bırakın ve workspace'e özel ayarlar kullanın.

Tuzak 4: Kod Tabanınızda Benchmark Yapmamak#

Yayınlanan benchmark'lar karşılaştırma için faydalı ancak sizin durumunuzu yansıtmayabilir. Karar vermeden önce her zaman gerçek kod tabanınızda benchmark yapın.

Tuzak 5: Type-Aware Kural Boşluklarını Görmezden Gelmek#

@typescript-eslint/no-floating-promises veya @typescript-eslint/strict-boolean-expressions gibi type-aware kurallara çok güveniyorsanız, migration'dan önce kapsamı doğrulayın.

Sonuç#

TypeScript linting ve formatlama manzarası cazip Rust tabanlı alternatiflerle genişledi. Pratik özet:

Performans: Biome ve Oxlint, ESLint + Prettier üzerinde 15-50x hız iyileştirmesi sağlıyor. Bu daha hızlı CI/CD ve daha iyi geliştirici deneyimine dönüşüyor.

Basitlik: Biome'un tek araç yaklaşımı konfigürasyon karmaşıklığını ve dependency sayısını önemli ölçüde azaltıyor.

Trade-off'lar: Rust tabanlı araçlar daha az kapsamlı plugin ekosistemleri ve type-aware kurallar için yaklaşık %75-85 kapsam sunuyor. Çoğu proje için bu yeterli. Diğerleri için değil.

Migration yolu: Paralel strateji (Oxlint + ESLint) özellikleri feda etmeden daha hızlı linting'e en güvenli yolu sunuyor.

Öneri: Yeni projeler için Biome ciddi değerlendirmeyi hak ediyor. Mevcut projeler için tam migration'a taahhüt vermeden önce paralel stratejiyi değerlendirin.

Araçlar hızla gelişmeye devam ediyor. Hem Biome hem de Oxlint, gelişen type-aware yeteneklerle aktif olarak geliştiriliyor. Bugün optimal olan, bu araçlar olgunlaştıkça değişebilir.

Kaynaklar#

• Oxc Projesi - Oxlint, oxfmt ve Oxc ekosistemi resmi dokümantasyonu
• Biome - Biome resmi dokümantasyonu ve migration rehberleri
• ESLint - ESLint resmi dokümantasyonu
• Prettier - Prettier resmi dokümantasyonu
• dprint - Pluggable kod formatlama platformu
• typescript-eslint - TypeScript-ESLint dokümantasyonu
• Biome v2 - Biotype - Biome v2 yayın duyurusu
• Oxlint 1.0 Duyurusu - VoidZero duyurusu
• eslint-plugin-oxlint - Paralel strateji plugin'i
• Expo ESLint Konfigürasyonu - React Native/Expo kurulumu