Prettier ve ESLint: Kod Biçimleme ve Kalitesi
Yazılım geliştirme dünyasında kod kalitesi ve tutarlılığı, projenin uzun vadeli başarısını doğrudan etkileyen kritik faktörlerdir. Prettier ve ESLint, bu hedefleri gerçekleştirmek için kullanılan iki temel araçtır, ancak çoğu geliştirici bunların birbirlerinden farklı amaçlara hizmet ettiğini fark etmez. Prettier otomatik biçimlendirme sağlarken, ESLint kod kalitesi ve stil kurallarını denetler. Hangi aracın seçileceği ya da her ikisinin birlikte kullanılması, projenizin yapısına, ekip standardlarına ve geliştirme iş akışınıza bağlıdır. Bu rehberde Prettier ve ESLint'i derinlemesine karşılaştırarak, en uygun kurulumu belirleyebilirsiniz.
Prettier: Otomatik Biçimlendirme Odaklı Araç
Prettier, kodun görsel sunumunu otomatik olarak düzenleyen bir formatterdir. Satır uzunluğu, boşluk, noktalı virgül, tırnak işaretleri gibi biçimsel öğeleri belirli kurallara göre standardize eder. Prettier'in temel güçleri şunlardır:
- Kod tasarımı konusunda karar almaz: Prettier, stilistik tercihlerin tartışmasını sona erdirmek için tasarlanmıştır. Seçenekler minimaldır ve geliştirici yaratıcılığına müdahale etmez.
- Hızlı ve güvenilir: Tüm dosyaları tek bir komutla biçimlendirebilir, tutarlılığı garanti eder.
- Geniş dil desteği: JavaScript, TypeScript, JSX, CSS, HTML, JSON, Markdown ve daha fazla format destekler.
- Git entegrasyonu: Staged dosyaları otomatik biçimlendirebilir, commit öncesi kalite kontrol sağlar.
ESLint: Kod Kalitesi ve Stil Kurallarının Denetçisi
ESLint, JavaScript kodundaki hataları, antipatternleri ve stil tutarsızlıklarını tanımlayan bir linter'dır. Sadece biçimlendirme değil, kodun işlevselliğine ilişkin sorunları da yakalamaya odaklanır. ESLint'in başlıca özellikleri:
- Kurallar ve özelleştirme: Yüzlerce kurala erişim sağlar; hangi kuralın uygulanacağını kontrol etmek mümkündür.
- Hata ve uyarı seviyesi: Problemleri "hata" (derleme durdurur) veya "uyarı" (bilgilendirme) olarak sınıflandırabilirsiniz.
- Otomatik düzeltme: Birçok kuralın ihlalleri otomatik olarak düzeltilir, ancak bazıları manuel müdahale gerektirir.
- Eklenti sistemi: React, Vue, Angular gibi kütüphanelere özgü kurallar eklenebilir.
Prettier vs ESLint: Ana Farklar
| Kriter | Prettier | ESLint |
|---|---|---|
| Ana Amaç | Otomatik biçimlendirme | Kod kalitesi ve stil denetimi |
| Özelleştirme Düzeyi | Düşük (az seçenek) | Yüksek (yüzlerce kural) |
| Stil Kuralları | Sabit ve tartışmasız | Ekip tarafından belirlenebilir |
| Potansiyel Çatışma | ESLint'in stil kurallarıyla çatışabilir | Prettier'in kurallarıyla çatışabilir |
| Dil Desteği | Birden fazla dil | Esas olarak JavaScript |
Prettier ve ESLint'i Birlikte Kullanmak
Çoğu profesyonel proje her iki aracı birlikte çalıştırmayı tercih eder. Bu kombinasyon, otomatik biçimlendirmenin kolaylığını, ESLint'in derinlemesine kod denetimi özellikleriyle birleştirir. Ancak bu entegrasyon dikkatli yapılmalıdır:
- Konfigürasyon adımı: ESLint'i Prettier ile uyumlu hale getirmek için eslint-config-prettier kullanın. Bu, biçimlendirme kurallarını devre dışı bırakarak çatışmaları önler.
- Plugin kurulumu: eslint-plugin-prettier yüklenerek, ESLint Prettier'i kontrol eder ve biçimlendirme hatalarını raporlar.
- Git hook'ları: Pre-commit hook'ları (Husky gibi araçlarla) dosyaları otomatik biçimlendirir ve kontrol eder.
- IDE entegrasyonu: VS Code, WebStorm gibi editörlerde dosya kaydı sırasında otomatik Prettier çalışması ve ESLint uyarıları etkinleştirin.
Pratik bir senaryo: Ekip üyeleri farklı stil tercihlerine sahip olabilir. Prettier, kaydedildiğinde tüm kodu tutarlı bir formata dönüştürür. ESLint ise, `console.log` komutu bırakıldığında ya da değişken tanımlanıp kullanılmadığında uyarı verir. Bu birleşim, hem görsel tutarlılık hem de fonksiyonel kalite sağlar.
Karar Kriterleri: Hangi Aracı Seçmeli?
- Sadece biçimlendirme önemli: Prettier yeterlidir, daha basit kurulum sunar.
- Kod kalitesi kritik: ESLint'i başlangıçtan kurun, potansiyel hataları erkenden yakalayın.
- Ekip standardı: Her iki araçı kombinasyonda kullanın, tutarlılık ve kaliteyi maksimize edin.
- Büyük proje: Prettier + ESLint + pre-commit hook'ları uzun vadede zaman ve hata tasarrufu sağlar.
Prettier ve ESLint, çatışan değil tamamlayıcı araçlardır. Prettier biçimi standardize eder, ESLint de kodun sağlıklı ve güvenli olmasını sağlar. Doğru kombinasyon, ekip ürekenliğini ve proje kalitesini önemli ölçüde artırır.
Eğitim ve araç seçimi konusunda başka kararlar almakta zorlanıyorsanız, Annur Learning'de yer alan karşılaştırma rehberleri faydalı olabilir. Platformun yöntemi—eğitim seçeneklerini yan yana koyup karar vermek—her alanda geçerlidir. Kod kalitesi araçları seçerken de bu ilke işletilmelidir: ihtiyaçlarınızı tanıyın, seçenekleri karşılaştırın ve bilgilenmiş bir karar verin.