Klassesortering og Prettier-plugin

Når flere Tailwind-utviklere arbeider på det samme prosjektet, vil verktøyklassene uunngåelig vises i ulik rekkefølge i forskjellige filer. Selv om rekkefølgen på klassene sjelden påvirker gjengivelsen, gjør inkonsekvent rekkefølge kodegjennomganger mer støyende og diff-utdata vanskeligere å lese. En konsekvent, kanonisk rekkefølge gjør det enklere for alle å forstå komponentstrukturen med et øyekast.

prettier-plugin-tailwindcss er det offisielle Tailwind CSS-programtillegget for Prettier, vedlikeholdt av Tailwind-teamet. Det sorterer automatisk verktøyklassene i markeringen etter en kanonisk rekkefølge hver gang Prettier formaterer en fil. Ingen manuell innsats er nødvendig – det er bare å lagre, så organiseres klassene på nytt.

Etter installasjonen legger du til programtillegget i konfigurasjonsfilen for Prettier. Programtillegget fungerer automatisk uten ekstra alternativer i de fleste prosjekter. Hvis tailwind.config.js ligger på en uvanlig plassering, angir du plasseringen for Prettier med alternativet tailwindConfig.

Programtillegget sorterer klasser etter Tailwinds anbefalte rekkefølge: layout-verktøy først (display, posisjon, overflow), deretter box model (bredde, høyde, padding, margin), så typografi, etterfulgt av visuelle egenskaper (bakgrunn, kantlinje, skygge), og til slutt interaktive tilstander og responsive varianter. Dette gjenspeiler hvordan CSS-spesifisitet arves.

Når alt er konfigurert, kjører du Prettier på alle malfilene for å sortere dem samlet. Legg til et format-skript i package.json for enkel tilgang. Utviklere bør kjøre dette før hver commit, eller enda bedre: koble det til en pre-commit-hook med Husky.

For å få best mulig utvikleropplevelse konfigurerer du editoren til å formatere ved lagring. I VS Code installerer du Prettier-utvidelsen og angir editor.formatOnSave: true i innstillingene. Det betyr at klassene sorteres automatisk hver gang du lagrer en fil, slik at markupen holdes ryddig uten ekstra trinn.

Automatisk formatering ved commit med Husky og lint-staged sikrer at ingen usorterte klasser kommer inn i repositoriet. Når en utvikler gjør en commit, formateres og stages bare de stage-de filene på nytt – en rask og målrettet operasjon, selv i store prosjekter.

Programtillegget håndterer også JSX- og TSX-filer. Det sorterer klasser i className-attributter og strengargumenter til verktøy som clsx og tailwind-merge. Det bruker statisk analyse til å finne klassestrenger, så dynamisk konstruerte strenger forblir uendret – bare statiske strengliteraler sorteres.

Programtillegget gjenkjenner klassestrenger som sendes til populære hjelpefunksjoner som clsx, cn og tailwind-merge når de kalles med strengargumenter. Dermed forblir den betingede klasselogikken sortert, selv når den er fordelt på flere argumenter, og komposisjonsmønstrene holdes ryddige og lesbare.

Legg til Prettiers --check-modus i CI-pipelinen for å få bygg til å feile når filer inneholder usorterte klasser. Dermed sørger du for at usortert kode ikke merges inn i main, selv om en utvikler hopper over pre-commit-hooken. Sjekken avsluttes med en statuskode som ikke er null når det finnes formateringsforskjeller.

Programtillegget sorterer kjente Tailwind-klasser, men lar ukjente klassenavn stå til slutt. Hvis du bruker egendefinerte utilities som er lagt til via programtillegg, konfigurerer du alternativet tailwindConfig slik at programtillegget kjenner til dem. Egendefinerte klasser som programtillegget ikke kan identifisere, vises fortsatt, men de forstyrrer ikke sorteringen av kjente utilities.

I denne leksjonen har du lært å installere og konfigurere prettier-plugin-tailwindcss for å automatisere klassesortering, integrere formatering ved lagring i editoren for en sømløs arbeidsflyt og håndheve sorterte klasser i CI med Prettiers sjekkmodus. Neste gang skal vi se på linting av Tailwind med ESLint.