Create React App’i Eject Etme Süreci

Web geliştirme dünyasında, kod kalitesi ve tutarlılığı, özellikle büyük projelerde veya takım ortamlarında hayati öneme sahiptir. ESLint, JavaScript ve TypeScript kodunuzdaki sorunları dinamik olarak bulmanıza ve düzeltmenize yardımcı olan, endüstri standardı bir linting aracıdır. Create React App (CRA), React uygulamaları geliştirmeye hızlı ve sorunsuz bir başlangıç yapmanızı sağlayan harika bir araçtır. Ancak, CRA’nın varsayılan yapılandırması bazen projenizin özel ihtiyaçlarını karşılamayabilir. İşte bu noktada, CRA projenizi “eject” etmek ve ESLint kurallarını tam olarak özelleştirmek devreye girer.

Bu rehberde, ejected bir Create React App projesinde ESLint kurallarını nasıl özelleştireceğinizi adım adım inceleyeceğiz. Bu sayede, projenizin kod standartlarını kendi gereksinimlerinize göre şekillendirebilecek ve geliştirme sürecinizi daha verimli hale getirebileceksiniz.

Create React App’i Eject Etme Süreci

Create React App, Webpack, Babel, ESLint gibi karmaşık yapılandırma araçlarını soyutlayarak size “sıfır yapılandırma” deneyimi sunar. Bu, başlangıç için harikadır, ancak zamanla daha fazla kontrol veya özel entegrasyonlar isteyebilirsiniz. “Eject” işlemi, CRA’nın dahili olarak kullandığı tüm yapılandırma dosyalarını (Webpack, Babel, ESLint, Jest vb.) projenizin kök dizinine çıkarır. Bu işlem, projeniz üzerinde tam kontrol sahibi olmanızı sağlar, ancak geri alınamaz bir işlemdir.

Eject İşlemine Başlamadan Önce

Eject işlemi, projenizin yapılandırmasını kalıcı olarak değiştirir. Bu nedenle, işleme başlamadan önce aşağıdaki adımları uygulamanız şiddetle tavsiye edilir:

• Git ile Çalışın: Projenizin mevcut durumunu Git ile commit edin. Böylece, bir sorunla karşılaşırsanız kolayca geri dönebilirsiniz.
• Değişiklikleri Anlayın: Eject sonrası ortaya çıkacak yapılandırma dosyalarının (özellikle config klasörü) ne işe yaradığını anlamak, gelecekteki sorun giderme ve özelleştirmeler için önemlidir.

Eject Komutunu Çalıştırma

Projenizin kök dizininde aşağıdaki komutu çalıştırarak eject işlemini başlatabilirsiniz:

npm run eject
veya
yarn eject

Bu komutu çalıştırdıktan sonra, CRA size bu işlemin geri alınamaz olduğunu ve devam etmek isteyip istemediğinizi soracaktır. Onayladığınızda, CRA tüm yapılandırma dosyalarını projenizin kök dizinindeki yeni bir config klasörüne kopyalayacak ve react-scripts bağımlılığını kaldıracaktır. Artık projeniz, CRA’nın soyutlaması olmadan, kendi özel yapılandırmalarıyla çalışmaya hazır hale gelecektir.

Eject işlemi tamamlandığında, projenizin kök dizininde genellikle aşağıdaki gibi bir yapı oluşur:

• config/: Webpack, ESLint, Jest gibi araçların yapılandırma dosyalarını içerir.
• scripts/: Başlatma, derleme, test gibi işlemler için kullanılan yardımcı scriptleri içerir.

ESLint yapılandırması genellikle config/eslint.js veya benzer bir isimle bu klasörde yer alacaktır.

Ejected CRA’da ESLint Yapılandırmasını Anlama

Eject işlemi sonrası, projenizin ESLint yapılandırma dosyası genellikle config/eslint.js yolunda bulunur. Bu dosya, CommonJS modülünü dışa aktaran bir JavaScript dosyasıdır ve ESLint’in çalışma şeklini belirleyen tüm ayarları içerir. Bu dosya, CRA’nın varsayılan ESLint yapılandırmasını temel alır ve üzerine kendi değişikliklerinizi yapmanıza olanak tanır.

Yapılandırma Dosyasının Temel Bölümleri

Bir config/eslint.js dosyası genellikle aşağıdaki temel özelliklere sahip olacaktır:

// config/eslint.js
module.exports = {
  root: true, // ESLint'in bu dizini projenin kökü olarak kabul etmesini sağlar
  
  parser: '@babel/eslint-parser', // JavaScript kodunu çözümlemek için kullanılacak parser
  parserOptions: {
    ecmaVersion: 2020, // ECMAScript sürümü
    sourceType: 'module', // Modül sistemi (script veya module)
    ecmaFeatures: {
      jsx: true, // JSX desteğini etkinleştir
    },
    babelOptions: { // @babel/eslint-parser için Babel ayarları
      presets: ['@babel/preset-react', '@babel/preset-env'],
    },
  },

  env: {
    browser: true, // Tarayıcı genel değişkenlerini etkinleştirir (window, document vb.)
    node: true, // Node.js genel değişkenlerini etkinleştirir (process, module vb.)
    jest: true, // Jest test ortamı genel değişkenlerini etkinleştirir
  },

  extends: [
    'react-app', // Create React App'in varsayılan kuralları
    'react-app/jest', // Jest için CRA'nın varsayılan kuralları
  ],

  plugins: [
    'react', // React ile ilgili kuralları etkinleştirir
    'jsx-a11y', // Erişilebilirlik ile ilgili kuralları etkinleştirir
    'import', // Modül import/export kurallarını etkinleştirir
  ],

  rules: {
    // Kural özelleştirmeleri buraya gelecek
    // Örneğin:
    // 'no-unused-vars': 'warn',
    // 'semi': ['error', 'always'],
  },

  settings: {
    react: {
      version: 'detect', // React versiyonunu otomatik algıla
    },
  },
};

Temel Özelliklerin Açıklaması:

• root: ESLint’in bu yapılandırma dosyasını projenin kökü olarak kabul etmesini sağlar.
• parser: ESLint’in kodunuzu çözümlemek için kullanacağı parser’ı belirtir. CRA genellikle @babel/eslint-parser kullanır.
• parserOptions: Parser’a özel seçenekler sunar. ECMAScript sürümü, JSX desteği, modül tipi gibi ayarlar burada yapılır.
• env: Global değişkenlerin hangi ortamlar için tanımlanacağını belirtir (örneğin, browser: true, node: true).
• extends: Başka bir yapılandırma dosyasının kurallarını ve ayarlarını devralmanızı sağlar. CRA’nın varsayılanı react-app ve react-app/jest‘i içerir.
• plugins: ESLint’e ek kural setleri veya işlevsellik sağlayan eklentileri yükler. Örneğin, react, jsx-a11y gibi.
• rules: ESLint kurallarını tek tek özelleştirdiğiniz bölümdür. Burada bir kuralı kapatabilir, seviyesini değiştirebilir veya özel seçenekler tanımlayabilirsiniz.
• settings: Eklentilere veya parser’a özel ayarları içerir (örneğin, React versiyonunu algılama).

ESLint Kurallarını Özelleştirme

Artık ESLint yapılandırma dosyasının yapısını anladığınıza göre, kendi projenizin ihtiyaçlarına göre kuralları özelleştirmeye başlayabiliriz. rules objesi, bu özelleştirmelerin ana merkezidir.

Mevcut Kuralları Değiştirme veya Kapatma

rules objesi içinde, her bir kuralı bir anahtar-değer çifti olarak tanımlarsınız. Değer, kuralın uygulama seviyesini ve varsa seçeneklerini belirtir:

• "off" veya 0: Kuralı tamamen kapatır.
• "warn" veya 1: Kural ihlalinde uyarı verir (kod yürütmeyi engellemez).
• "error" veya 2: Kural ihlalinde hata verir (kod yürütmeyi engeller, çoğu CI/CD ortamında derlemeyi durdurur).

Bazı kurallar ek seçenekler de alabilir. Bu durumda, seviyeyi ve seçenekleri içeren bir dizi kullanırsınız (örneğin, ['error', 'always']).

Örnek: Bazı Yaygın Kuralları Özelleştirme

CRA’nın varsayılan kurallarını korurken, kendi özel kurallarınızı ekleyebilir veya mevcut olanları değiştirebilirsiniz:

// config/eslint.js
module.exports = {
  // ... diğer ayarlar
  rules: {
    ...require('eslint-config-react-app').rules, // CRA'nın varsayılan kurallarını koru
    // Kendi özel kurallarınızı buraya ekleyin veya değiştirin
    
    // Her ifadenin sonunda noktalı virgül zorunlu (hata verir)
    'semi': ['error', 'always'], 
    
    // 2 boşluklu girinti kullan (uyarı verir)
    'indent': ['warn', 2], 
    
    // console.log kullanımına uyarı ver (hata vermez, sadece uyarır)
    'no-console': 'warn', 
    
    // Kullanılmayan değişkenlere hata ver, ancak argümanları görmezden gel
    'no-unused-vars': ['error', { args: 'none' }], 
    
    // Tek tırnak kullanımını zorunlu kıl
    'quotes': ['error', 'single'], 
    
    // React 17 ve sonrası için gereksiz olan kuralları kapat (JSX dönüşümlerini otomatik yapar)
    'react/jsx-uses-react': 'off', 
    'react/react-in-jsx-scope': 'off',
    
    // Default export yerine named export tercih et (örnek özel kural)
    'import/prefer-default-export': 'off', 
  },
  // ...
};

Yeni Eklentiler (Plugins) ve Genişletmeler (Extends) Ekleme

ESLint’in gücü, geniş eklenti ekosisteminden gelir. Yeni kural setleri veya belirli bir teknolojiye (örneğin Prettier, TypeScript) yönelik linting sağlamak için eklentileri kullanabilirsiniz.

Örnek: Prettier Entegrasyonu

Prettier, kodunuzu otomatik olarak biçimlendiren popüler bir araçtır. ESLint ile Prettier’ı entegre etmek, hem biçimlendirme hem de kod kalitesi kontrollerini bir arada tutmanızı sağlar.

1. Gerekli Bağımlılıkları Yükleyin:

npm install eslint-plugin-prettier eslint-config-prettier --save-dev
veya
yarn add eslint-plugin-prettier eslint-config-prettier --dev

2. config/eslint.js Dosyasını Güncelleyin:

extends ve plugins bölümlerine Prettier’ı ekleyin ve rules kısmına Prettier kuralını tanımlayın.

// config/eslint.js
module.exports = {
  // ... diğer ayarlar
  extends: [
    'react-app',
    'react-app/jest',
    'prettier', // Prettier yapılandırmasını en sona ekleyin
  ],
  plugins: [
    'react',
    'jsx-a11y',
    'import',
    'prettier', // Prettier eklentisini ekleyin
  ],
  rules: {
    // ... diğer kurallar
    'prettier/prettier': 'error', // Prettier ihlallerini hata olarak göster
  },
  // ...
};

extends dizisinde prettier‘ın en sonda olması önemlidir, çünkü Prettier, diğer tüm biçimlendirme kurallarını geçersiz kılar ve kendi kurallarını uygular.

Örnek: TypeScript Desteği (Eğer projenizde TypeScript kullanıyorsanız)

Eğer projeniz TypeScript kullanıyorsa, ESLint’in TypeScript kodunu doğru bir şekilde lintlemesi için özel parser ve eklentilere ihtiyacınız olacaktır.

1. Gerekli Bağımlılıkları Yükleyin:

npm install @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev
veya
yarn add @typescript-eslint/parser @typescript-eslint/eslint-plugin --dev

2. config/eslint.js Dosyasını Güncelleyin:

// config/eslint.js
module.exports = {
  // ...
  parser: '@typescript-eslint/parser', // TypeScript parser'ı kullan
  parserOptions: {
    // ... diğer parserOptions
    project: './tsconfig.json', // TypeScript projenizin tsconfig.json dosyasını belirtin
  },
  extends: [
    'react-app',
    'react-app/jest',
    'plugin:@typescript-eslint/recommended', // TypeScript için önerilen kurallar
    'plugin:@typescript-eslint/eslint-recommended', // TypeScript'in ESLint'i devre dışı bırakmasını sağlar
    // Eğer prettier da kullanıyorsanız:
    // 'prettier/@typescript-eslint', // Prettier ile TypeScript çakışmasını önler (eski versiyonlar için)
    // 'plugin:prettier/recommended' // Prettier'ın son sürümü için bu yeterli olabilir
  ],
  plugins: [
    'react',
    'jsx-a11y',
    'import',
    '@typescript-eslint', // TypeScript eklentisini ekleyin
    // 'prettier' // Eğer prettier kullanıyorsanız
  ],
  rules: {
    // ... diğer kurallar
    // TypeScript'e özel kurallar ekleyebilirsiniz
    '@typescript-eslint/explicit-module-boundary-types': 'off', // Fonksiyon dönüş tiplerini zorunlu kılma
    '@typescript-eslint/no-unused-vars': ['warn', { args: 'none' }], // Kullanılmayan TS değişkenleri için uyarı
  },
  // ...
};

TypeScript ile ESLint entegrasyonu biraz daha karmaşık olabilir. Özellikle parserOptions.project ayarı, performans için önemlidir.

Pratik İpuçları ve En İyi Uygulamalar

1. Sürüm Kontrolü ve Yedekleme

Eject işleminden önce ve sonra projenizi Git ile commit etmek, olası sorunlarda geri dönmenizi sağlar. Yapılandırma dosyalarında değişiklik yaparken de sık sık commit yapın.

2. Kademeli Değişiklikler

Tüm ESLint kurallarını bir kerede değiştirmeye çalışmayın. Küçük, artımlı değişiklikler yapın ve her değişiklikten sonra lint testlerini çalıştırın (npm run lint veya yarn lint). Bu, hataları izole etmenizi kolaylaştırır.

3. Editor Entegrasyonu

VS Code, WebStorm gibi modern kod editörleri, ESLint eklentileriyle birlikte gelir. Bu eklentiler, kod yazarken hataları ve uyarıları anında görmenizi sağlar, bu da geliştirme hızınızı artırır.

4. Takım Çalışması ve Ortak Standartlar

Eğer bir takımda çalışıyorsanız, ESLint yapılandırmanızın herkes tarafından anlaşılması ve benimsenmesi önemlidir. Ortak bir kod standardı, takımın verimliliğini ve kod kalitesini artırır. Yapılandırma dosyasını Git’e dahil edin.

5. Alternatif Yaklaşımlar

Eject işlemi, projeniz üzerinde tam kontrol sağlar, ancak aynı zamanda yapılandırma dosyalarının bakımını üstlenmeniz gerektiği anlamına gelir. Eğer sadece küçük yapılandırma değişiklikleri yapmak istiyorsanız ve tam kontrol ihtiyacınız yoksa, CRACO (Create React App Configuration Override) veya react-app-rewired gibi araçları düşünebilirsiniz. Bu araçlar, eject yapmadan CRA’nın dahili yapılandırmasını değiştirmenize olanak tanır.

6. Lint Komutunu Çalıştırma

Değişikliklerinizi test etmek için projenizin kök dizininde aşağıdaki komutu çalıştırın:

npm run lint
veya
yarn lint

Bu komut, projenizdeki tüm dosyaları ESLint kurallarınıza göre kontrol edecek ve varsa hataları veya uyarıları rapor edecektir.

Sonuç ve Sıkça Sorulan Sorular (SSS)

Ejected bir Create React App projesinde ESLint kurallarını özelleştirmek, projeniz üzerinde tam kontrol sahibi olmanın ve kod kalitenizi kendi standartlarınıza göre şekillendirmenin güçlü bir yoludur. Bu süreç, ilk başta karmaşık görünse de, adım adım ilerleyerek ve yapılandırma dosyasının temel bileşenlerini anlayarak kolayca yönetilebilir hale gelir.

Doğru ESLint yapılandırması ile:

• Kodunuz daha tutarlı ve okunabilir olur.
• Potansiyel hatalar erken aşamada yakalanır.
• Takım içi kod standartları daha kolay uygulanır.
• Geliştirme süreci daha verimli hale gelir.

Unutmayın, eject işlemi geri alınamaz olsa da, sunduğu esneklik ve kontrol, büyük ve özelleştirilmiş React projeleri için paha biçilmezdir.

Sıkça Sorulan Sorular (SSS)

Eject işlemi geri alınabilir mi?

Hayır, eject işlemi geri alınamaz. Bu nedenle, işlemi yapmadan önce projenizin yedeğini almak veya Git ile commit etmek kritik öneme sahiptir.

Eject sonrası ESLint hataları nasıl çözülür?

Eject sonrası beklenmedik ESLint hatalarıyla karşılaşırsanız, genellikle config/eslint.js dosyasını düzenleyerek ilgili kuralı kapatabilir ("off") veya seviyesini düşürebilirsiniz ("warn"). Hata mesajlarını dikkatlice okuyarak hangi kuralın ihlal edildiğini belirleyin.

Neden CRACO veya react-app-rewired kullanmayayım?

CRACO veya react-app-rewired gibi araçlar, eject yapmadan CRA’nın dahili yapılandırmasını değiştirmek için harika alternatiflerdir. Ancak bu araçlar, CRA’nın temel yapılandırmasını sadece “üzerine yazma” (override) imkanı sunar. Eject işlemi ise, tüm yapılandırma dosyalarını projenize çıkararak size tam ve sınırsız kontrol sağlar. Seçiminiz, projenizin karmaşıklığına ve ihtiyaç duyduğunuz kontrol seviyesine bağlı olmalıdır.

ESLint config dosyasını ayrı bir yere taşıyabilir miyim?

Evet, taşıyabilirsiniz. Ancak, ESLint’in yeni konumu bilmesi için package.json dosyanızdaki eslintConfig alanını veya ESLint CLI komutunuzu (--config) güncellemeniz gerekebilir. Ejected CRA’da genellikle config/eslint.js varsayılan olarak kullanılır.

Yeni bir ESLint kuralı ekledim ama çalışmıyor, ne yapmalıyım?

Şu adımları kontrol edin:

1. Kural adının doğru yazıldığından emin olun.
2. Eğer kural bir eklentiye aitse, o eklentinin yüklü olduğundan ve plugins dizisinde tanımlandığından emin olun.
3. npm run lint komutunu çalıştırarak konsoldaki hata mesajlarını kontrol edin. Bazen ESLint, yapılandırma dosyasındaki sözdizimi hatalarını veya geçersiz kural adlarını bildirir.
4. Önbelleği temizlemek için node_modules/.cache klasörünü silebilir ve tekrar deneyebilirsiniz.