ESLint mi Prettier mi? Kod Kalitesi ve Biçimlendirme

Giriş: Kod Kalitesi İçin İki Farklı Amaç

Yazılım geliştirme sürecinde kod kalitesi ve okunabilirliği sağlamak için kullanılan araçlar arasında ESLint ve Prettier sıkça karşılaştırılır. Her ikisi de JavaScript projelerinde yaygın olarak yer alan bu araçlar, benzer sorunları çözmek gibi görünse de temelde farklı işlevlere sahiptir. ESLint linting kuralları uygulayarak hataları ve potansiyel sorunları yakalamaya odaklanırken, Prettier otomatik biçimlendirme ile kod stilini standartlaştırır. Bu rehberde, iki aracın rollerini, farklarını ve birlikte nasıl kullanılacağını detaylı bir şekilde inceleyeceğiz.

ESLint: Hatalar ve En İyi Uygulamalar İçin Linting Motoru

ESLint, kod analizi yapan ve ESLint Prettier konfigürasyon stratejisinin temel taşlarından biridir. Kodunuzu taradığında mantıksal hataları, kullanılmayan değişkenleri, tanımsız referansları ve JavaScript'in en iyi uygulamalarından sapmaları tespit eder.

ESLint'in temel özellikleri:

Mantıksal hataları ve potansiyel bug'ları algılama
Özel kurallar oluşturma ve mevcut kuralları konfigüre etme imkanı
Kod stiline dair de bazı kurallar içerme (ancak bu ikincil amacı)
Uyarı (warning) ve hata (error) seviyelerinde farklılaştırma
Kodun belirli bölümlerinde kuralları devre dışı bırakma esnekliği

ESLint'i yapılandırırken .eslintrc.js veya .eslintrc.json dosyası kullanılır. Burada hangi ortamda çalışacağınız (Node, browser, ES6), hangi kurallar etkinleştirilecek ve bunların ne şiddetle uygulanacağı tanımlanır. Popüler konfigürasyonlar arasında Airbnb, Google ve Standard stil rehberleri yer alır.

Prettier: Otomatik Biçimlendirme ve Tutarlılık

Prettier ise kod stilini otomatik olarak biçimlendiren, konfigürasyon seçenekleri çok sınırlı olan bir araçtır. Prettier'ın felsefesi "fikir birliğine varılan stil kuralları" kullanmaktır. Bunu yönetici tipi bir yaklaşımla gerçekleştirir—kodun nasıl gökünmesi gerektiğine kendi karar verir.

Prettier'ın temel özellikleri:

Tüm kodu yeniden biçimlendirerek tutarlılık sağlama
Satır uzunluğu, boşluk, tırnak işaretleri gibi stil ögelerini standardize etme
Minimum konfigürasyon seçeneği (hedef satır uzunluğu, sekme genişliği vb.)
Editör entegrasyonu ile kaydetme anında otomatik biçimlendirme
Team projelerinde stil tartışmalarını ortadan kaldırma

Prettier'ı .prettierrc dosyasıyla yapılandırırken en kritik seçenekler satır uzunluğu (printWidth), sekme genişliği (tabWidth) ve tırnak türüdür (quotes). Fakat ESLint kadar kapsamlı kurallar yönetimi yoktur—bu bilinçli bir tasarım tercihidir.

Birlikte Kullanım: Çatışmaları Önleme ve Optimal Kurulum

ESLint ve Prettier ayrı ayrı güçlü araçlar olsa da, birlikte kullanıldığında potansiyel çatışmalar yaşanabilir. Örneğin ESLint satır uzunluğuna dair bir kurala sahipse, Prettier'ın otomatik biçimlendirmesi farklı bir uzunluk tercih edebilir. Bu sorunu çözmek için endüstri standardı bir yaklaşım vardır:

Optimal Kurulum Adımları:

prettier-eslint veya eslint-config-prettier kullanımı: ESLint'in stil kurallarını devre dışı bırakarak Prettier'ın biçimlendirmesine ön seçenek verin
ESLint'i mantıksal kurallarla sınırlandırma: Stil sorunları için kuralları kaldırın, kod kalitesi ve güvenliğe odaklanın
Prettier'ı biçimlendirme için sorumlu kılma: Tüm stil ögelerini Prettier kontrol etsin
Pre-commit Hook'lar eklemek: Husky ve lint-staged gibi araçlarla commit öncesinde kontrol çalıştırın

Pratikte çoğu modern proje bu yaklaşımı kullanır. ESLint extends konfigürasyonunda prettier eklenirse, ESLint otomatik olarak stilsel çatışmaları atlayıp sadece mantıksal sorunlara odaklanır.

Karar Kriterleri: Hangisini Seçmelisiniz?

Teknik olarak bu seçim değil, birlikte kurulum sorusudur. Ancak önceliklendirme konusunda kararlar verebilirsiniz:

Küçük projeler veya bireysel çalışmalar: ESLint tek başına yeterli olabilir
Team projeler: ESLint + Prettier kombinasyonu tartışmasız önerilir
Stil tutarlılığı kritikse: Prettier'a daha fazla ağırlık verin
Kod kalitesi ve güvenlik kritikse: ESLint kurallarını daha sıkı yapın

Unutmayın: ESLint ve Prettier rekabet halinde değiller, tamamlayıcılardırlar. ESLint'i "polis", Prettier'ı ise "kuaför" olarak düşünebilirsiniz—biri hukuku korur, diğeri görünüşü düzenler.

Sonuç: Bütünleşik Yaklaşım İçin Pratik Adımlar

Yazılım geliştirmede eğitim alma ve doğru araçları seçme kadar, bu araçları birlikte etkili bir şekilde konfigüre etmek de önemlidir. ESLint mantıksal hataları yakalayan güçlü bir kalite kontrolüdür; Prettier ise kodun görünüşünü standartlaştıran otomatik yardımcıdır. Yeni bir proje başlattığınızda veya team ile çalışmaya başladığınızda, her ikisini de entegre etmek ve ESLint Prettier konfigürasyon dosyalarınızı paylaşılan kurallarla ayarlamak, tüm ekibin aynı standartlara uymasını sağlar. Bu yatırım, uzun vadede kod bakımını kolaylaştırır ve gelecek geliştiricilerin kodu anlamasını hızlandırır.