Tailwind’i ESLint ile Lint Etme
Geçersiz sınıf adları ve çakışan yardımcı sınıflar hakkında uyarı vermesi ve ekibinizin sınıf kurallarını uygulaması için eslint-plugin-tailwindcss eklentisini yapılandırın.
Tailwind’i ESLint ile Lint Etme, CoddyKit'te ücretsiz bir Tailwind CSS Academy dersidir. Bu, 4 dersinin 3. 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, Tailwind CSS Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Tailwind CSS Academy kursu toplamda 4 dersten oluşur.
Tailwind Classes'ınızı Neden Lint Etmelisiniz
Tailwind class adlarındaki yazım hataları sessiz hatalardır — tarayıcı bilinmeyen classes'ları konsolda herhangi bir uyarı vermeden yok sayar. bg-blue-50O örneğinde olduğu gibi bir harfin eksik olması (sıfır yerine büyük O) arka planın uygulanmamasına neden olur ve hata günlerce fark edilmeyebilir. Tailwind eklentisine sahip ESLint bu sorunları üretim ortamına ulaşmadan, geliştirme sırasında yakalar.
eslint-plugin-tailwindcss'i Yükleme
eslint-plugin-tailwindcss, Tailwind için en yaygın kullanılan ESLint eklentisidir. Class adlarını Tailwind yapılandırmanıza göre doğrular, çakışan yardımcı programlar hakkında uyarır ve ekibinizin class sıralama kurallarını zorunlu kılabilir. Bunu projenizin geliştirme bağımlılıklarına ESLint ile birlikte yükleyin.
npm install -D eslint eslint-plugin-tailwindcss
# If using a flat config (ESLint 9+)
npm install -D @eslint/jsEklentiyi Yapılandırma (Eski Yapılandırma)
Geleneksel .eslintrc biçiminde, eklentiler dizisine tailwindcss ekleyin ve önerilen yapılandırmayı genişletin. Önerilen küme üç temel kuralı etkinleştirir: classnames-order, no-custom-classname ve no-contradicting-classname.
// .eslintrc.js
module.exports = {
extends: ['plugin:tailwindcss/recommended'],
plugins: ['tailwindcss'],
rules: {
'tailwindcss/classnames-order': 'warn',
'tailwindcss/no-custom-classname': 'warn',
'tailwindcss/no-contradicting-classname': 'error',
},
};Eklentiyi Yapılandırma (Düz Yapılandırma)
ESLint 9'un yeni düz yapılandırma biçimi için eklentiyi içe aktarın ve önerilen yapılandırmayı yapılandırma dizinize açarak ekleyin. Eklentinin class adlarını doğrularken özel tema değerlerinizi ve eklentilerinizi okuyabilmesi için tailwindConfig ayarını yapılandırma dosyanıza yönlendirin.
// eslint.config.js
import tailwind from 'eslint-plugin-tailwindcss';
export default [
...tailwind.configs['flat/recommended'],
{
settings: {
tailwindcss: {
config: './tailwind.config.js',
},
},
},
];no-contradicting-classname Kuralı
no-contradicting-classname kuralı, aynı öğeye uygulanan çakışan yardımcı programları yakalar — örneğin aynı div üzerinde hem block hem de inline kullanılması ya da duyarlı bir ön ek olmadan w-full ile w-auto'nun birlikte kullanılması. Bu çakışmalar, lint desteği olmadan hata ayıklanması zor, öngörülemeyen sonuçlar üretir.
<!-- ESLint error: block and inline conflict -->
<div class="block inline text-red-500">
<!-- Correct: use responsive prefix to switch at breakpoints -->
<div class="block md:inline text-red-500">no-custom-classname Kuralı
no-custom-classname kuralı, Tailwind çıktısının parçası olmayan bir class yazdığınızda uyarır — bu class ne yerleşik bir yardımcı programdır ne de yapılandırmanızda veya eklentilerinizde tanımlanmış özel bir yardımcı programdır. Bu, yazım hatalarını yakalamanıza yardımcı olur ve geliştiricilerin uygun yolları izlemeden Tailwind projesine düz CSS class adları yazmasını önler.
<!-- ESLint warning: 'card-header' is not a Tailwind utility -->
<div class="card-header p-4 bg-white">
<!-- Option 1: Use only Tailwind utilities -->
<div class="rounded-lg bg-white p-4 shadow">
<!-- Option 2: Add 'card-header' to whitelist in ESLint config -->
/* settings: { tailwindcss: { whitelist: ['card-header'] } } */classnames-order Kuralı
classnames-order kuralı, Prettier eklentisinin ürettiği kurallı class sırasının aynısını zorunlu kılar. Her iki aracı da kullandığınızda, sıralama için hangisinin doğru kaynak olacağını belirleyin. Çoğu ekip otomatik biçimlendirme için Prettier'ı kullanır ve iki araç arasındaki çakışmaları önlemek amacıyla ESLint sıralama kuralını devre dışı bırakır.
// .eslintrc.js — disable ordering rule when using Prettier plugin
module.exports = {
extends: ['plugin:tailwindcss/recommended'],
rules: {
// Prettier handles ordering — disable here to avoid conflicts
'tailwindcss/classnames-order': 'off',
// Keep these enabled
'tailwindcss/no-custom-classname': 'warn',
'tailwindcss/no-contradicting-classname': 'error',
},
};Kasıtlı Özel Classes'ı Beyaz Listeye Alma
Projenizde Tailwind yardımcı programlarının yanında özel CSS class adları kullanıyorsanız — örneğin üçüncü taraf bir animasyon kütüphanesinden veya eski CSS'ten gelen classes — bunları whitelist ayarına ekleyin. Böylece yanlış pozitifler susturulurken Tailwind class adlarındaki gerçek yazım hataları yakalanmaya devam eder.
// .eslintrc.js
module.exports = {
extends: ['plugin:tailwindcss/recommended'],
settings: {
tailwindcss: {
config: './tailwind.config.js',
// Allow these non-Tailwind class names
whitelist: ['animate-fade-in', 'swiper-slide', 'js-modal-open'],
},
},
};ESLint'i Terminalde Çalıştırma
Tüm şablon dosyalarını hedefleyen bir lint betiğini package.json dosyanıza ekleyin. Birleştirilmeden önce class adı hatalarını ortaya çıkarmak için bunu yerel ortamda ve CI'da çalıştırın. --fix seçeneği sıralama sorunlarını otomatik olarak düzeltir, ancak yazım hatalarını düzeltemez — bunların elle incelenmesi gerekir.
// package.json
{
"scripts": {
"lint": "eslint 'src/**/*.{js,jsx,ts,tsx,html}'",
"lint:fix": "eslint --fix 'src/**/*.{js,jsx,ts,tsx,html}'"
}
}Gerçek Zamanlı Geri Bildirim için Düzenleyici Entegrasyonu
Yazarken altı çizili hataları doğrudan düzenleyicide görmek için ESLint VS Code uzantısını yükleyin. Tailwind class hataları satır içinde sarı uyarılar veya kırmızı hatalar olarak görünür; böylece bir yazım hatasını gözden kaçırmanız imkânsız hale gelir. Bunu otomatik tamamlama sağlayan Tailwind CSS IntelliSense uzantısıyla birleştirdiğinizde lint işlemi geri bildirim döngüsünü tamamen kapatır.
// .vscode/extensions.json — recommended extensions for the team
{
"recommendations": [
"dbaeumer.vscode-eslint",
"esbenp.prettier-vscode",
"bradlc.vscode-tailwindcss"
]
}ESLint ve Prettier'ı Etkili Bir Şekilde Birleştirme
Doğrulama için ESLint'i kullanın — yazım hatalarını, çelişkileri ve bilinmeyen class adlarını yakalasın. Biçimlendirme için Prettier'ı kullanın — classes'ları kurallı sıraya yerleştirsin. Sıralama işini yalnızca Prettier'a bırakmak için classnames-order ESLint kuralını devre dışı bırakın. Bu sorumluluk ayrımı, iki aracın birbiriyle çakışmadan sunduğu avantajlardan en iyi şekilde yararlanmanızı sağlar.
// Recommended combined setup
// ESLint: validates correctness
// Prettier: formats order
// package.json scripts
"lint": "eslint src/",
"format": "prettier --write src/",
"precommit": "npm run lint && npm run format"Kısa Denetim
Bu dersteki Tailwind CSS Mastery kavramlarını anlayıp anlamadığınızı test edin.
Ders Özeti
Bu derste şunları öğrendiniz: yazım hatalarını ve çelişkileri yakalamak için eslint-plugin-tailwindcss'i yükleme, üç temel kuralı (no-contradicting-classname, no-custom-classname, classnames-order) ve her aracın kendi sorumluluğunu üstlenmesi için ESLint'i Prettier ile birleştirme. Sırada ekip kurallarını ve bir stil kılavuzunu tanımlayacağız.
Yapay zeka eğitmeniyle HTML öğren — ücretsiz
Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.
- Kurslar
- 30
- Dersler
- 120
Sıkça Sorulan Sorular
“Tailwind’i ESLint ile Lint Etme” dersi ücretsiz mi?
Evet — “Tailwind’i ESLint ile Lint Etme” 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 Tailwind CSS Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Tailwind CSS Academy kursu toplamda 4 dersten oluşur.
“Tailwind’i ESLint ile Lint Etme” dersinde ne öğreneceğim?
Geçersiz sınıf adları ve çakışan yardımcı sınıflar hakkında uyarı vermesi ve ekibinizin sınıf kurallarını uygulaması için eslint-plugin-tailwindcss eklentisini yapılandırın. Tailwind CSS 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.
Tailwind CSS Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Tailwind CSS 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, 4 dersinin 3. dersidir.
“Tailwind’i ESLint ile Lint Etme” 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 Tailwind CSS Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Tailwind CSS 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
- CSS Çıktınızı Denetleme
- Sınıf Sıralama ve Prettier Eklentisi
- Tailwind’i ESLint ile Lint Etme
- Ekip Kuralları ve Stil Kılavuzu