Prettier entegrasyonu ve kural çakışmaları
Prettier'i ESLint ile entegre edin, yinelenen kurallardan kaçının ve biçim ile mantık kuralları arasındaki çakışmaları yönetin.
Prettier entegrasyonu ve kural çakışmaları, CoddyKit'te ücretsiz bir TypeScript Academy dersidir. Bu, 3 dersinin 2. 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, TypeScript Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. TypeScript Academy kursu toplamda 3 dersten oluşur.
Giriş
Hedef: Prettier (biçimlendirme) ile ESLint'i (mantık/biçem) çakışma olmadan birleştirin.
Yükleme
Prettier'i ve sorunsuz tümleştirme için ESLint eklentilerini ve yapılandırmalarını yükleyin.
npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettierPrettier yapılandırması
Prettier'in kendine ait bir yapılandırma dosyası vardır. Bunu yalnızca biçimlendirmeye yönelik seçenekler için kullanın (tırnaklar, noktalı virgüller, satır uzunluğu).
// .prettierrc.json
{
"semi": false,
"singleQuote": true
}Yapılandırmayı tümleştirme
ESLint'i genişletmek için plugin:prettier/recommended ekleyin. Bu, eslint-config-prettier ve eslint-plugin-prettier paketlerini içerir.
// .eslintrc.js
module.exports = {
extends: [
"plugin:@typescript-eslint/recommended",
"plugin:prettier/recommended"
]
}Çakışma örneği
Yapılandırma olmadan ESLint ve Prettier aynı fikirde olmayabilir (ör. noktalı virgüller konusunda). Yapılandırma, çakışan ESLint kurallarını devre dışı bırakır.
// demo.ts
const msg = "hi"
console.log(msg)
// ESLint: missing semicolon
// Prettier: auto removes semicolons if disabled
// Solution: use eslint-config-prettierKontrolleri çalıştırma
ESLint'i mantık ve biçem için, Prettier'i ise biçimlendirme için çalıştırın. Her ikisini de düzenleyicinize tümleştirebilirsiniz.
npx eslint "src/**/*.{ts,tsx}"
npx prettier --check "src/**/*.{ts,tsx}"Soru
Hızlı kontrol: eslint-config-prettier ne yapar?
Özet
Özet: Prettier'i ve yapılandırmalarını yükleyin, ESLint'in extends ayarına ekleyin, çakışan kuralları devre dışı bırakın ve uyum için her iki aracı da çalıştırın.
Sıkça Sorulan Sorular
“Prettier entegrasyonu ve kural çakışmaları” dersi ücretsiz mi?
Evet — “Prettier entegrasyonu ve kural çakışmaları” 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 TypeScript Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. TypeScript Academy kursu toplamda 3 dersten oluşur.
“Prettier entegrasyonu ve kural çakışmaları” dersinde ne öğreneceğim?
Prettier'i ESLint ile entegre edin, yinelenen kurallardan kaçının ve biçim ile mantık kuralları arasındaki çakışmaları yönetin. TypeScript 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.
TypeScript Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te TypeScript 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 2. dersidir.
“Prettier entegrasyonu ve kural çakışmaları” 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 TypeScript Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her TypeScript 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 ve @typescript-eslint
- Prettier entegrasyonu ve kural çakışmaları
- Yaygın gerçek dünya kural kümeleri