ESLint + React-regler samt Prettier-integrasjon
Sett opp ESLint med React-regler, og integrer Prettier for konsekvent formatering. Kjør lint- og fiksekommandoer.
ESLint + React-regler samt Prettier-integrasjon er en gratis leksjon i React Academy på CoddyKit. Dette er leksjon 1 av 3. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i React Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i React Academy inneholder totalt 3 leksjoner.
Hvorfor ESLint og Prettier
Mål: Oppdag kodeproblemer med ESLint, og hold stilen konsekvent med Prettier.
- ESLint: regler, programtillegg, retting
- Prettier: meningsbestemt formateringsverktøy
- Kjør i utvikling og CI
Installasjon og programtillegg
- ESLint: eslint, @typescript-eslint/* (ved TS), eslint-plugin-react, eslint-plugin-react-hooks
- Prettier: prettier, eslint-config-prettier
- Skript: "lint", "lint:fix", "format"
Demonstrasjon: lint-utdata og rettinger
ESLint markerer problemer, mens Prettier retter stil. Sammenlign dårlig og god kode, og se eksempelutdata.
<div id="root"></div>
Demonstrasjon: simuler Prettier-formatering
Slå på for å simulere en Prettier-kjøring; koden blir konsekvent formatert.
<div id="root"></div>
Tips og pakkeskript
- Skript: "lint", "lint:fix", "format"
- Bruk eslint-config-prettier til å deaktivere stilregler
- Aktiver react-hooks-reglene: exhaustive-deps og rules-of-hooks
React-regler De bør kjenne til
React-regler:
- react/jsx-key — legg til key i lister
- react-hooks/rules-of-hooks — kall bare hooks på øverste nivå
- react-hooks/exhaustive-deps — sørg for riktige avhengigheter for effekter
Rollene til ESLint og Prettier
Oppsummering
Oppsummering: ESLint finner problemer, mens Prettier formaterer. Legg til React-programtillegg og hooks-regler, og koble skriptene til linting, retting og formatering.
Lær deg React med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 88
- Leksjoner
- 324
Ofte stilte spørsmål
Er leksjonen «ESLint + React-regler samt Prettier-integrasjon» gratis?
Ja – hele teksten i «ESLint + React-regler samt Prettier-integrasjon» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av React Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i React Academy inneholder totalt 3 leksjoner.
Hva lærer jeg i «ESLint + React-regler samt Prettier-integrasjon»?
Sett opp ESLint med React-regler, og integrer Prettier for konsekvent formatering. Kjør lint- og fiksekommandoer. Du øver på React Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med React Academy?
Ingen tidligere erfaring er nødvendig. React Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 1 av 3.
Hvor lang tid tar leksjonen «ESLint + React-regler samt Prettier-integrasjon»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne React Academy-leksjonen?
Ja. Alle React Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- ESLint + React-regler samt Prettier-integrasjon
- Filnavn, komponentgrenser og navn på props
- Miljøvariabler og organisering av konfigurasjon