ESLint + React Kuralları; Prettier Entegrasyonu
ESLint'i React kurallarıyla kurun ve tutarlı biçimlendirme için Prettier'ı entegre edin; lint ve düzeltme komutlarını çalıştırın.
ESLint + React Kuralları; Prettier Entegrasyonu, CoddyKit'te ücretsiz bir React Academy dersidir. Bu, 3 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, React Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. React Academy kursu toplamda 3 dersten oluşur.
ESLint ve Prettier neden kullanılır
Amaç: ESLint ile kod sorunlarını yakalamak ve Prettier ile biçimi tutarlı tutmak.
- ESLint: kurallar, eklentiler, düzeltme
- Prettier: görüş bildiren biçimlendirici
- Geliştirme ortamında ve CI'da çalıştırın
Kurulum ve eklentiler
- ESLint: eslint, @typescript-eslint/* (TS kullanılıyorsa), eslint-plugin-react, eslint-plugin-react-hooks
- Prettier: prettier, eslint-config-prettier
- Komut dosyaları: "lint", "lint:fix", "format"
Örnek: lint çıktısı ve düzeltmeler
ESLint sorunları bildirir; Prettier biçimi düzeltir. Hatalı ve doğru hâlleri karşılaştırın ve örnek çıktıyı inceleyin.
<div id="root"></div>
Örnek: Prettier biçimlendirmesini benzetme
Bir Prettier çalıştırmasını benzetmek için geçişi değiştirin; kod tutarlı biçimde biçimlendirilir.
<div id="root"></div>
İpuçları ve paket komut dosyaları
- Komut dosyaları: "lint", "lint:fix", "format"
- Biçim kurallarını devre dışı bırakmak için eslint-config-prettier kullanın
- react-hooks kurallarını etkinleştirin: exhaustive-deps ve rules-of-hooks
Bilinmesi gereken React kuralları
React kuralları:
- react/jsx-key — listelerde key ekleyin
- react-hooks/rules-of-hooks — kancaları yalnızca üst düzeyde çağırın
- react-hooks/exhaustive-deps — effect bağımlılıklarını doğru tutun
ESLint ve Prettier'ın rolleri
Özet
Özet: ESLint sorunları bulur; Prettier biçimlendirir. React eklentilerini ve kanca kurallarını ekleyin, ardından komut dosyalarını lint, düzeltme ve biçimlendirme işlemlerine bağlayın.
Sıkça Sorulan Sorular
“ESLint + React Kuralları; Prettier Entegrasyonu” dersi ücretsiz mi?
Evet — “ESLint + React Kuralları; Prettier Entegrasyonu” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve React Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. React Academy kursu toplamda 3 dersten oluşur.
“ESLint + React Kuralları; Prettier Entegrasyonu” dersinde ne öğreneceğim?
ESLint'i React kurallarıyla kurun ve tutarlı biçimlendirme için Prettier'ı entegre edin; lint ve düzeltme komutlarını çalıştırın. React Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
React Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te React Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 3 dersinin 1. dersidir.
“ESLint + React Kuralları; Prettier Entegrasyonu” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu React Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her React Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- ESLint + React Kuralları; Prettier Entegrasyonu
- Dosya Adlandırma, Bileşen Sınırları, Özellik Adlandırma
- Ortam Değişkenleri ve Yapılandırma Düzeni