Lint Tailwind dengan ESLint
Konfigurasikan eslint-plugin-tailwindcss untuk memberi amaran tentang nama kelas tidak sah dan utiliti bercanggah, serta menguatkuasakan konvensyen kelas pasukan anda.
Lint Tailwind dengan ESLint ialah pelajaran Tailwind CSS Academy percuma di CoddyKit. Ini ialah pelajaran 3 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Tailwind CSS Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Tailwind CSS Academy merangkumi sejumlah 4 pelajaran.
Mengapa Classes Tailwind Perlu Diperiksa Lint
Kesilapan taip dalam nama class Tailwind ialah ralat senyap — pelayar hanya mengabaikan classes yang tidak diketahui tanpa sebarang amaran dalam konsol. Huruf yang hilang seperti bg-blue-50O (huruf O besar dan bukannya sifar) tidak akan menggunakan latar belakang, dan pepijat itu mungkin tidak disedari selama berhari-hari. ESLint dengan plugin Tailwind mengesan isu ini semasa pembangunan sebelum isu tersebut sampai ke pengeluaran.
Memasang eslint-plugin-tailwindcss
eslint-plugin-tailwindcss ialah plugin ESLint yang paling banyak digunakan untuk Tailwind. Plugin ini mengesahkan nama class berbanding konfigurasi Tailwind anda, memberikan amaran tentang utiliti yang bercanggah, dan boleh menguatkuasakan konvensyen pengisihan class pasukan anda. Pasangnya bersama ESLint dalam kebergantungan pembangunan projek anda.
npm install -D eslint eslint-plugin-tailwindcss
# If using a flat config (ESLint 9+)
npm install -D @eslint/jsMengkonfigurasikan Plugin (Konfigurasi Legasi)
Dalam format .eslintrc tradisional, tambahkan tailwindcss pada tatasusunan plugin dan lanjutkan konfigurasi yang disyorkan. Set yang disyorkan ini mengaktifkan tiga peraturan teras: classnames-order, no-custom-classname dan 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',
},
};Mengkonfigurasikan Plugin (Konfigurasi Rata)
Untuk format konfigurasi rata baharu ESLint 9, import plugin tersebut dan sebarkan konfigurasi yang disyorkan ke dalam tatasusunan konfigurasi anda. Halakan tetapan tailwindConfig kepada fail konfigurasi anda supaya plugin dapat membaca nilai tema dan plugin tersuai anda semasa mengesahkan nama class.
// eslint.config.js
import tailwind from 'eslint-plugin-tailwindcss';
export default [
...tailwind.configs['flat/recommended'],
{
settings: {
tailwindcss: {
config: './tailwind.config.js',
},
},
},
];Peraturan no-contradicting-classname
Peraturan no-contradicting-classname mengesan utiliti yang bercanggah dan digunakan pada elemen yang sama — contohnya, menggunakan kedua-dua block dan inline pada div yang sama, atau w-full dan w-auto bersama-sama tanpa awalan responsif. conflicts ini menghasilkan keputusan yang tidak dapat dijangka dan sukar dinyahpepijat tanpa sokongan lint.
<!-- 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">Peraturan no-custom-classname
Peraturan no-custom-classname memberikan amaran apabila anda menulis class yang bukan sebahagian daripada output Tailwind — sama ada utiliti terbina dalam atau utiliti tersuai yang ditakrifkan dalam konfigurasi atau plugin anda. Ini membantu mengesan kesilapan taip dan menghalang pembangun daripada menulis nama class CSS biasa dalam projek Tailwind tanpa melalui saluran yang betul.
<!-- 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'] } } */Peraturan classnames-order
Peraturan classnames-order menguatkuasakan susunan class kanonik yang sama seperti yang dihasilkan oleh plugin Prettier. Apabila anda menggunakan kedua-dua alat, konfigurasikan salah satu daripadanya sebagai sumber kebenaran untuk susunan tersebut. Kebanyakan pasukan menggunakan Prettier untuk pemformatan automatik dan melumpuhkan peraturan pengisihan ESLint bagi mengelakkan conflicts antara kedua-dua alat.
// .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',
},
};Menyenarai Putih Classes Tersuai yang Disengajakan
Jika projek anda menggunakan nama class CSS tersuai bersama utiliti Tailwind — contohnya, classes daripada pustaka animasi pihak ketiga atau CSS legasi — tambahkan classes tersebut pada tetapan whitelist. Ini menyenyapkan positif palsu sambil terus mengesan kesilapan taip sebenar dalam nama class Tailwind.
// .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'],
},
},
};Menjalankan ESLint dalam Terminal
Tambahkan skrip lint pada package.json anda yang menyasarkan semua fail templat. Jalankannya secara setempat dan dalam CI untuk mendedahkan ralat nama class sebelum digabungkan. Bendera --fix membetulkan isu susunan secara automatik tetapi tidak dapat membetulkan kesilapan taip — isu tersebut memerlukan semakan manual.
// package.json
{
"scripts": {
"lint": "eslint 'src/**/*.{js,jsx,ts,tsx,html}'",
"lint:fix": "eslint --fix 'src/**/*.{js,jsx,ts,tsx,html}'"
}
}Integrasi Editor untuk Maklum Balas Masa Nyata
Pasang sambungan ESLint untuk VS Code bagi melihat ralat bergaris terus dalam editor semasa anda menaip. Ralat class Tailwind muncul sebagai amaran kuning atau ralat merah sebaris, menjadikan kesilapan taip sukar terlepas pandang. Gabungkan ini dengan sambungan Tailwind CSS IntelliSense untuk pelengkapan automatik, dan proses lint akan melengkapkan kitaran maklum balas sepenuhnya.
// .vscode/extensions.json — recommended extensions for the team
{
"recommendations": [
"dbaeumer.vscode-eslint",
"esbenp.prettier-vscode",
"bradlc.vscode-tailwindcss"
]
}Menggabungkan ESLint dan Prettier dengan Berkesan
Gunakan ESLint untuk pengesahan — mengesan kesilapan taip, percanggahan dan nama class yang tidak diketahui. Gunakan Prettier untuk pemformatan — mengisih classes mengikut susunan kanonik. Lumpuhkan peraturan ESLint classnames-order supaya Prettier mengendalikan pengisihan sepenuhnya. Pemisahan tanggungjawab ini membolehkan anda mendapatkan manfaat terbaik daripada kedua-dua alat tanpa konflik.
// 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"Semakan Pantas
Uji pemahaman anda tentang konsep Tailwind CSS Mastery daripada pelajaran ini.
Imbas Kembali Pelajaran
Dalam pelajaran ini, anda mempelajari: memasang eslint-plugin-tailwindcss untuk mengesan kesilapan taip dan percanggahan, tiga peraturan teras (no-contradicting-classname, no-custom-classname, classnames-order), dan menggabungkan ESLint dengan Prettier supaya setiap alat mengendalikan tanggungjawabnya. Seterusnya, kita akan mentakrifkan konvensyen pasukan dan panduan gaya.
Pelajari HTML dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 30
- Pelajaran
- 120
Soalan Lazim
Adakah pelajaran “Lint Tailwind dengan ESLint” percuma?
Ya — teks penuh “Lint Tailwind dengan ESLint” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus Tailwind CSS Academy, tingkat taraf kepada CoddyKit PRO. Kursus Tailwind CSS Academy merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “Lint Tailwind dengan ESLint”?
Konfigurasikan eslint-plugin-tailwindcss untuk memberi amaran tentang nama kelas tidak sah dan utiliti bercanggah, serta menguatkuasakan konvensyen kelas pasukan anda. Anda berlatih Tailwind CSS Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan Tailwind CSS Academy?
Tiada pengalaman terdahulu diperlukan. Pembelajaran Tailwind CSS Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 3 daripada 4.
Berapa lamakah pelajaran “Lint Tailwind dengan ESLint” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran Tailwind CSS Academy ini?
Ya. Setiap pelajaran Tailwind CSS Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- Mengaudit Keluaran CSS Anda
- Pengisihan Kelas dan Pemalam Prettier
- Lint Tailwind dengan ESLint
- Konvensyen Pasukan dan Panduan Gaya