ESLint ve Prettier Birlikte Nasıl Ayarlanır? En İyi Uygulamalar

ESLint ve Prettier Birlikte Nasıl Ayarlanır? En İyi Uygulamalar

Yazılım geliştirme sürecinde kod kalitesi ve tutarlılık, uzun vadeli proje başarısının temel taşlarıdır. ESLint ve Prettier, modern JavaScript ekosisteminde bu iki farklı ihtiyacı karşılayan araçlardır, ancak çoğu geliştirici bunların amacını karıştırır. ESLint kod kalitesi kuralları uygularken, Prettier otomatik biçimlendirme sağlar. İkisinin uyum içinde çalışması, hem hata önleme hem de kod okunabilirliğini maksimize eder. Bu rehberde, eslint prettier konfigürasyon sürecini adım adım inceleyeceğiz ve hangi senaryolarda hangisini tercih etmeniz gerektiğini açıklayacağız.

ESLint ve Prettier Arasındaki Temel Farklar

ESLint, kodunuzu analiz ederek potansiyel hataları, kötü uygulamaları ve stil sorunlarını tespit eder. Örneğin, tanımsız değişkenler, kullanılmayan fonksiyonlar veya yanlış async/await kullanımı gibi sorunları yakalar. Prettier ise tamamen farklı bir amaçla çalışır: kodunuzun görsel formatını düzeltir. Satır uzunluğu, tab/boşluk tercihleri, tırnak işaretleri ve parantez yerleşimi gibi estetik konuları halleder.

Pratik örnek: Aşağıdaki kodu düşünün:

const x=1;const y=2;const z=x+y;

ESLint bu kodu analiz ederken, olası hatalar için kontrol eder (belki kullanılmayan değişkenler uyarısı verir). Prettier ise bunu şu şekilde biçimlendire bilir:

const x = 1;
const y = 2;
const z = x + y;

Gördüğünüz gibi, birbirlerinin işini tamamlayıcıdır. Bu yüzden ikisini birlikte kullanmak en etkili yaklaşımdır.

ESLint ve Prettier Konfigürasyonu: Adım Adım

Başlamadan önce Node.js ve npm'in yüklü olduğundan emin olun. Projenizde henüz package.json yoksa, aşağıdaki komutla oluşturun:

npm init -y

1. Paketleri Yükleyin

• npm install --save-dev eslint prettier
• npm install --save-dev eslint-config-prettier eslint-plugin-prettier

Burada eslint-config-prettier, ESLint kurallarını Prettier'ın biçimlendirmesiyle çakışmayacak şekilde devre dışı bırakır. eslint-plugin-prettier ise Prettier'ı bir ESLint kuralı olarak çalıştırır.

2. ESLint Başlatın

npx eslint --init

Bu komut, sorular soracak ve .eslintrc.json veya .eslintrc.js dosyası oluşturacaktır. Proje tipi (Node.js, React, Angular vb.) seçerken, gerçek ihtiyacınıza göre karar verin. Örneğin React kullanan bir proje için, linting kuralları React'a özgü olmalıdır.

3. Prettier Yapılandırması

Proje kökünde .prettierrc veya prettier.config.js dosyası oluşturun:

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

Bu ayarlar, Prettier'ın davranışını kontrol eder. "singleQuote": true, tek tırnak kullanımını zorunlu kılarken, "tabWidth": 2 her seviye girintiyi iki boşlukla ayarlar.

4. ESLint Konfigürasyonunu Güncelleyin

.eslintrc.json dosyanızı şu şekilde düzenleyin:

{
  "extends": ["eslint:recommended", "plugin:prettier/recommended"],
  "env": {
    "node": true,
    "es2021": true
  },
  "rules": {}
}

"plugin:prettier/recommended" satırı, yukarıda bahsedilen çatışmaları otomatik olarak çözer.

Yaygın Konfigürasyon Senaryoları ve Karşılaştırması

Geliştirme Akışına Entegrasyon

ESLint ve Prettier'ı otomatikleştirmek, manuel kontrol ihtiyacını ortadan kaldırır. package.json dosyasına aşağıdaki script'leri ekleyin:

"scripts": {
  "lint": "eslint .",
  "lint:fix": "eslint . --fix",
  "format": "prettier --write ."
}

npm run lint:fix komutu, otomatik olarak düzeltilebilecek tüm sorunları çözer. npm run format ise Prettier biçimlendirmesini uygular.

Pre-commit hook'larını (husky gibi araçlarla) ayarlarsanız, her commit öncesi otomatik olarak lint ve format kontrolleri çalıştırılabilir. Bu, hatalı kodu depo'ya girmesini engeller.

Önemli Noktalar:

• ESLint kurallarını çok katı ayarlarsanız, geliştirici verimliliği azalır
• Prettier'ı her kaydetme sırasında çalıştırmak, kesintisiz iş akışı sağlar
• Takım içinde eslint prettier konfigürasyon standardı belirlemek, merge konfliktlerini azaltır
• IDE eklentileri (VS Code ESLint ve Prettier uzantıları) kurarsanız, gerçek zamanlı geri bildirim alırsınız

Sorun Giderme ve En İyi Uygulamalar

Kurulum sırasında en sık karşılaşılan sorun, ESLint ve Prettier kurallarının çatışmasıdır. Örneğin, ESLint satır uzunluğuna bir limit koyarken Prettier farklı bir limit uygulamaya çalışabilir. Bunu önlemek için, her zaman "eslint-config-prettier" kullanın ve Prettier'ın biçimlendirme kurallarına ESLint'i uyum sağlayın.

Farklı proje tipleri (React, Vue, TypeScript vb.) için özel konfigürasyonlar mevcuttur. React kullanan bir projede "eslint-plugin-react" ve "eslint-plugin-react-hooks" gibi ek eklentiler yüklemelisiniz. TypeScript projeleri için "typescript-eslint" paketi gereklidir.

Yapılandırma dosyalarınızı versiyon kontrol sistemine (Git) dahil etmek, takım üyeleri arasında tutarlılık sağlar. Böylece her geliştiricinin makinesi aynı kurallarla çalışır.

ESLint ve Prettier'ı doğru şekilde ayarlamak, kod gözden geçirme süresini kısaltır, sorunları erken yakalar ve takım içinde stil standardı oluşturur. Her iki araçın birlikte kullanılması, yazılım kalitesine ölçülebilir katkı sağlar. Kurulumdan sonra, bu araçları IDE'ye entegre etmek ve CI/CD pipeline'ına eklenmek, en etkili sonuçları verir.