Prettier + ESLint Alışkanlığını Kırmak: Oxlint ve Oxfmt

JavaScript ekosisteminde zamanla “standart” haline gelen, yerinin kolay kolay dolmayacağını düşündüğümüz birçok tool ve framework ortaya çıktı. Uzun süre bu araçların değişmeyeceği varsaydık. Ancak, son yıllarda bu durumun değiştiğine şahit oluyoruz. Yeni alternatifler, mevcut çözümlere kıyasla daha iyi performans sunuyor ve göz ardı edilen sorunların önüne geçiyor. Bunları yaparken de her şeyi sıfırdan ve tamamen farklı şekilde ele almıyorlar; geriye dönük destek sunara mevcut ekosistemi oldukça korumayı tercih ediyorlar.

Yeni araçların ortak noktalarından biri, nasıl geliştirdikleri ile ilgili. Günümüz yazılım dünyasında kullanılan tool’ların Go ve Rust ile yazılması giderek yaygın bir hale geldi. Bu yaklaşımın en temel nedeni daha hızlı çalışan, daha az kaynak tüketen ve davranışı daha öngörülebilir tool’lar üretmek. Oxlint ve Oxfmt de bu yaklaşımın bir sonucu olarak ortaya çıkıyor ve değişen yazılım dünyasının günümüz sorunlarına çözüm üretiyor.

Linter Nedir, Neyi Çözmeye Çalışır?

Linter, kod kalitesini artırmak için kullanılan araçlardan biridir. Temel olarak yaptığı şey, kodu çalıştırmadan önce analiz ederek potansiyel sorunları tespit etmektir. Bu sorunlar; hatalara yol açabilecek durumlar, güvenlik riskleri, kötü kod alışkanlıkları gibi problemler olabilir.

“Linter” teriminin kökeni, 1978 yılında Bell Labs’te Stephen C. Johnson tarafından geliştirilen “lint” adlı araca dayanır. İlk olarak C dili için yazılan bu araç, kaynak kodu analiz ederek olası hataları tespit etmeyi amaçlıyordu. Bugün kullanılan linting yaklaşımının temeli de bu çalışmaya dayanır.

Günümüzde neredeyse bütün programlama dilleri için bir linter bulunmaktadır. Bu araçlar, ekip üyeleri arasında ortak kurallar oluşturmayı ve uzun vadede daha sürdürülebilir projeler geliştirmeyi hedefler.

Formatter Nedir, Prettier Bu İşte Nerede Durur?

Formatter, bir projedeki kodu otomatik olarak okunabilir ve standart bir şekilde biçimlendiren araçlardır. Örneğin Prettier gibi formatter’lar kodu:

• tutarlı bir şekilde biçimlendirir,
• girintiler, satır uzunlukları ve boşluklar gibi görsel düzenlemeleri otomatik yapar,
• geliştiricinin manuel biçimlendirme eforunu ortadan kaldırır,
• ekip içinde stil tartışmalarını azaltır.

Formatter sayesinde tüm kod tabanında aynı stil uygulanır; kişisel tercihlerden kaynaklanan farklılıklar ortadan kalkar.

Prettier + ESLint neden birlikte “varsayılan” oldu?

JavaScript projelerinde ESLint ve Prettier’in birlikte kullanılmasının temel nedeni, bu iki aracın farklı ama birbirini tamamlayan işler yapmasıdır. ESLint daha çok kodun mantıksal doğruluğuna, olası hatalara ve genel kod kalitesine odaklanır. Prettier ise yalnızca kodun nasıl göründüğüyle ilgilenir ve biçimlendirme tarafını üstlenir. Bu ayrım sayesinde ekipler bir yandan potansiyel hatalarla ilgili uyarı alırken, diğer yandan tüm kod tabanında tutarlı bir stil yakalayabilir.

Oxlint Nedir?

Oxlint, JS ve TS kodunu statik olarak analiz eden bir linterdir. ESLint gibi kod kalitesini ve potansiyel hataları ortaya çıkarır. Ancak oxlint, rust ile yazıldığı için ESLint’e göre daha yüksek performans sağlar.

Yapılan testlere göre oxlint, eslint’e göre 50–100x daha hızlı çalışabilir. https://github.com/oxc-project/bench-linter

Oxlint’in özellikleri şu şekilde özetlenebilir:

• Sıfır konfigürasyon ile çalışabilir ve daha hızlı sonuç verir.
• Doğruluğa odaklanır; yanlış, gereksiz ya da kafa karıştıran kodları tespit etmeye öncelik verir.
• Eslint ile uyumlu olarak, eslint’in kural setlerinin büyük kısmını destekler.

Oxlint’i özellikle büyük projelerde linting sürecini daha hızlı yapmak ve performans darboğazlarını aşmak için tercih edebilirsiniz.

Oxfmt Nedir?

Oxfmt, Oxc projesi tarafından geliştirilen, Prettier gibi kodun görünümünü tek tip hale getirmeye yarayan bir araçtır. Ancak, aynı Oxlint gibi rust ile yazıldığı için Prettier’e göre daha hızlıdır.

Oxfmt’in temel özellikleri:

• JS ve TS kodunu formatlar.
• Prettier’den yaklaşık 30x daha hızlıdır.
• Prettier ile yüksek oranda aynı çıktıyı üretir.

Oxlint ve Oxfmt Kurulumu

1. Paketleri kurun

npm add -D oxfmt oxlint
# veya
pnpm add -D oxfmt oxlint
# veya
yarn add -D oxfmt oxlint

2. Oxfmt’nin konfigürasyon dosyasını oluşturun

oxfmt --init
# veya
oxfmt --migrate prettier

Bu komutlar yardımıyla .oxfmtrc.json adında konfigürasyon dosyası oluşur. Eğer --migrate prettier flag’ı kullanıldıysa Prettier’in konfig dosyasından ilgili kuralları alır ve oxfmt’nin konfigürasyon dosyasını oluştururken kullanır.

3. Oxlint konfigürasyon dosyasını oluşturun

oxlint --init

Eğer mevcutta eslint kullanıyorsanız, @oxlint/migrate aracı ile oxlint’e geçişinizi hızlıca yapabilirsiniz.

npx @oxlint/migrate <optional-eslint-flat-config-path>

--js-plugings flag’ını kullanarak desteklenen eslint plugin’lerini otomatik taşıyabilirsiniz.

İlgili işlemlerden sonra projede oxlintrc.json adında konfigürasyon dosyası oluşur.

4. scripts’leri ekleyin

{
  "scripts": {
    "fmt": "oxfmt",
    "fmt:check": "oxfmt --check",
    "lint": "oxlint",
    "lint:fix": "oxlint --fix"
  }
}

5. test edin

Eklenen script’ler aracılığıyla oxfmt ve oxlint’i çalıştırarak kurulumun sorunsuz çalıştığını test edebilirsiniz.

IDE’nin Oxlint ve Oxfmt Kullanmasını Sağlama

WebStorm ve VSCode gibi en çok kullanılan IDE’ler, Prettier ve ESLint gibi popüler araçların yerleşik entegrasyonları içerir. Ancak oxfmt ve oxlint için bu destek tam anlamıyla bulunmamaktadır. Bu sebeple, İlgili IDE’lerde OXC eklentisini kullanmamız gerekmektedir.

VSCode

[embed]Oxc - Visual Studio Marketplace Extension for Visual Studio Code - Oxlint and Oxfmt editor integrationmarketplace.visualstudio.com

WebStorm

[embed]Oxc - IntelliJ IDEs Plugin | Marketplace Oxc The Oxidation Compiler is creating a suite of high-performance tools for JavaScript and TypeScript. Oxlint A…plugins.jetbrains.com

Benzer bir yaklaşım: Biome

Biome, linting ve formatting işlerini tek bir araçta birleştirmeyi amaçlayan modern bir toolchain’dir. Oxlint ve Oxfmt gibi rust ile yazılmış olması sayesinde performanslı çalışır. ESLint ve Prettier gibi ayrı araçlara olan ihtiyacı azaltmayı hedefler.

Kaynaklar

• https://eslint.org/docs/latest/use/core-concepts/
• https://github.com/eslint/eslint/discussions/16557
• https://www.sonarsource.com/resources/library/linter/#:~:text=A%20linter%20is%20a%20developer,issues%20to%20improve%20code%20quality.
• https://prettier.io/docs/
• https://www.codestudy.net/blog/is-prettier-really-needed-when-using-eslint
• https://oxc.rs/
• https://www.infoq.com/news/2026/01/oxfmt-rust-prettier