Tailwind CSS Academy · Pelajaran

Pengisihan Kelas dan Pemalam Prettier

Pasang prettier-plugin-tailwindcss untuk mengisih kelas utiliti secara automatik mengikut susunan piawai, sekali gus meningkatkan kebolehbacaan dan mengurangkan konflik penggabungan.

Pelajaran 2 daripada 413 langkah

Pengisihan Kelas dan Pemalam Prettier ialah pelajaran Tailwind CSS Academy percuma di CoddyKit. Ini ialah pelajaran 2 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 Susunan Kelas Penting

Apabila beberapa pembangun Tailwind bekerja pada projek yang sama, kelas utiliti pasti muncul dalam susunan yang berbeza dalam fail yang berbeza. Walaupun susunan kelas jarang mempengaruhi pemaparan, susunan yang tidak konsisten menjadikan semakan kod bising dan output perbezaan sukar dibaca. Susunan kanonik yang konsisten membantu semua orang memahami struktur komponen sepintas lalu.

Memperkenalkan prettier-plugin-tailwindcss

prettier-plugin-tailwindcss ialah plugin Prettier CSS Tailwind rasmi yang diselenggara oleh pasukan Tailwind. Plugin ini mengisih kelas utiliti dalam markup anda kepada susunan kanonik setiap kali Prettier memformat fail. Tiada usaha manual diperlukan — hanya simpan dan kelas akan disusun semula secara automatik.

npm install -D prettier prettier-plugin-tailwindcss

Mengkonfigurasi Plugin

Selepas pemasangan, tambahkan plugin pada fail konfigurasi Prettier anda. Plugin ini berfungsi secara automatik tanpa pilihan tambahan bagi kebanyakan projek. Jika tailwind.config.js anda berada di lokasi bukan standard, arahkan Prettier kepadanya dengan pilihan tailwindConfig.

// .prettierrc
{
  "plugins": ["prettier-plugin-tailwindcss"],
  "tailwindConfig": "./tailwind.config.js"
}

Susunan Pengisihan Kanonik

Plugin ini mengisih kelas mengikut susunan yang disyorkan Tailwind: utiliti susun atur terlebih dahulu (paparan, kedudukan, limpahan), kemudian model kotak (lebar, tinggi, lapik, jidar), diikuti tipografi, kemudian sifat visual (latar belakang, jidar, bayang), dan akhirnya keadaan interaktif serta variasi responsif. Ini mencerminkan cara kekhususan CSS bertingkat.

<!-- BEFORE sorting -->
<div class="text-white hover:bg-blue-700 p-4 rounded-lg bg-blue-500 flex items-center gap-2">

<!-- AFTER prettier-plugin-tailwindcss sorts -->
<div class="flex items-center gap-2 rounded-lg bg-blue-500 p-4 text-white hover:bg-blue-700">

Menjalankan Prettier pada Projek Anda

Setelah dikonfigurasikan, jalankan Prettier pada semua fail templat anda untuk menggunakan pengisihan secara pukal. Tambahkan skrip format pada package.json anda supaya mudah diakses. Pembangun hendaklah menjalankannya sebelum setiap commit, atau lebih baik lagi, sambungkannya pada cangkuk pracommit dengan Husky.

// package.json
{
  "scripts": {
    "format": "prettier --write \"src/**/*.{html,jsx,tsx,vue}\"",
    "format:check": "prettier --check \"src/**/*.{html,jsx,tsx,vue}\""
  }
}

Integrasi Editor

Untuk pengalaman pembangun yang terbaik, konfigurasikan editor anda supaya memformat semasa disimpan. Dalam VS Code, pasang sambungan Prettier dan tetapkan editor.formatOnSave: true dalam tetapan anda. Ini bermakna classes diisih secara automatik setiap kali anda menyimpan fail, menjadikan markup anda kemas tanpa langkah tambahan.

// .vscode/settings.json
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

Cangkuk Pracommit dengan Husky

Mengautomatikkan pemformatan semasa commit dengan Husky dan lint-staged memastikan tiada classes yang tidak diisih masuk ke dalam repositori. Apabila pembangun membuat commit, hanya fail yang dipentaskan diformatkan dan dipentaskan semula — operasi yang pantas dan tertumpu walaupun dalam projek besar.

npm install -D husky lint-staged
npx husky init

// package.json
{
  "lint-staged": {
    "*.{html,jsx,tsx,vue}": "prettier --write"
  }
}

Pengisihan dalam Fail JSX dan TSX

Plugin ini turut mengendalikan fail JSX dan TSX dengan mengisih classes dalam atribut className dan argumen rentetan kepada utiliti seperti clsx dan tailwind-merge. Plugin ini menggunakan analisis statik untuk mencari rentetan class, jadi rentetan yang dibina secara dinamik dibiarkan tanpa perubahan — hanya literal rentetan statik yang diisih.

// Before
const Button = () => (
  <button className="font-semibold text-white hover:bg-blue-700 rounded bg-blue-500 px-4 py-2">
    Click me
  </button>
);

// After sorting
const Button = () => (
  <button className="rounded bg-blue-500 px-4 py-2 font-semibold text-white hover:bg-blue-700">
    Click me
  </button>
);

Pengisihan dalam Literal Templat dan clsx

Plugin ini mengenali rentetan class yang dihantar kepada pembantu popular seperti clsx, cn dan tailwind-merge apabila dipanggil dengan argumen rentetan. Ini bermakna logik class bersyarat anda kekal diisih walaupun tersebar merentasi beberapa argumen, sekali gus memastikan corak composition kekal kemas dan mudah dibaca.

import { clsx } from 'clsx';

// The plugin sorts string arguments inside clsx calls
const classes = clsx(
  'rounded bg-blue-500 px-4 py-2 text-white',
  isActive && 'ring-2 ring-blue-300',
  isDisabled && 'cursor-not-allowed opacity-50'
);

Penguatkuasaan CI dengan Pemeriksaan Prettier

Tambahkan mod --check Prettier pada pipeline CI anda supaya binaan gagal apabila fail mengandungi classes yang tidak diisih. Ini memastikan bahawa walaupun pembangun melangkau cangkuk pracommit, kod yang tidak diisih tidak akan digabungkan ke dalam cabang utama. Pemeriksaan ini keluar dengan kod status bukan sifar apabila perbezaan pemformatan ditemui.

# .github/workflows/ci.yml
jobs:
  format-check:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: npm ci
      - run: npm run format:check

Mengendalikan Kes Tepi dan Classes Tersuai

Plugin ini mengisih classes Tailwind yang diketahui tetapi membiarkan nama class yang tidak dikenali di hujung tanpa perubahan. Jika anda menggunakan utiliti tersuai yang ditambahkan melalui plugin, konfigurasikan pilihan tailwindConfig supaya plugin mengenalinya. Classes tersuai yang tidak dapat dikenal pasti oleh plugin masih akan dipaparkan, tetapi tidak akan mengganggu pengisihan utiliti yang dikenali.

// .prettierrc — point to config so custom utilities are recognized
{
  "plugins": ["prettier-plugin-tailwindcss"],
  "tailwindConfig": "./tailwind.config.js"
}

// tailwind.config.js — custom utility plugin
plugins: [
  plugin(({ addUtilities }) => {
    addUtilities({ '.text-shadow': { 'text-shadow': '2px 2px 4px rgba(0,0,0,0.5)' } });
  }),
],

Semakan Pantas

Uji pemahaman anda tentang konsep Tailwind CSS Mastery daripada pelajaran ini.

Jawab dalam pelajaran interaktif

Imbas Kembali Pelajaran

Dalam pelajaran ini, anda mempelajari: memasang dan mengkonfigurasikan prettier-plugin-tailwindcss untuk mengautomatikkan pengisihan class, mengintegrasikan pemformatan editor semasa penyimpanan bagi aliran kerja yang lancar, dan menguatkuasakan classes yang diisih dalam CI menggunakan mod pemeriksaan Prettier. Seterusnya, kita akan meneroka pemeriksaan lint Tailwind dengan ESLint.

Percuma untuk bermula

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

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Pengisihan Kelas dan Pemalam Prettier” percuma?

Ya — teks penuh “Pengisihan Kelas dan Pemalam Prettier” 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 “Pengisihan Kelas dan Pemalam Prettier”?

Pasang prettier-plugin-tailwindcss untuk mengisih kelas utiliti secara automatik mengikut susunan piawai, sekali gus meningkatkan kebolehbacaan dan mengurangkan konflik penggabungan. 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 2 daripada 4.

Berapa lamakah pelajaran “Pengisihan Kelas dan Pemalam Prettier” 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

← Kembali ke Tailwind CSS Academy