Prettier-integratie en conflicterende regels
Integreer Prettier met ESLint, vermijd dubbele regels en los conflicten tussen stijl- en logica-regels op.
Prettier-integratie en conflicterende regels is een gratis TypeScript Academy-les op CoddyKit. Dit is les 2 van 3. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject TypeScript Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus TypeScript Academy bevat in totaal 3 lessen.
Inleiding
Doel: Combineer Prettier (opmaak) met ESLint (logica/stijl) zonder conflicten.
Installeren
Installeer Prettier en ESLint-plug-ins en -configuraties om ze soepel te integreren.
npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettierPrettier-configuratie
Prettier heeft een eigen configuratiebestand. Gebruik dit voor opties die alleen de opmaak bepalen, zoals aanhalingstekens, puntkomma's en regellengte.
// .prettierrc.json
{
"semi": false,
"singleQuote": true
}Configuratie integreren
Voeg plugin:prettier/recommended toe om de ESLint-configuratie uit te breiden. Deze bevat eslint-config-prettier en eslint-plugin-prettier.
// .eslintrc.js
module.exports = {
extends: [
"plugin:@typescript-eslint/recommended",
"plugin:prettier/recommended"
]
}Voorbeeld van een conflict
Zonder configuratie kunnen ESLint en Prettier van mening verschillen, bijvoorbeeld over puntkomma's. De configuratie schakelt tegenstrijdige ESLint-regels uit.
// demo.ts
const msg = "hi"
console.log(msg)
// ESLint: missing semicolon
// Prettier: auto removes semicolons if disabled
// Solution: use eslint-config-prettierControles uitvoeren
Voer ESLint uit voor logica en stijl en Prettier voor opmaak. Je kunt beide ook in je teksteditor integreren.
npx eslint "src/**/*.{ts,tsx}"
npx prettier --check "src/**/*.{ts,tsx}"Vraag
Snelle controle: Wat doet eslint-config-prettier?
Samenvatting
Samenvatting: Installeer Prettier en de configuraties, voeg ze toe aan de extends-configuratie van ESLint, schakel tegenstrijdige regels uit en voer beide hulpmiddelen uit voor een consistente stijl.
Leer TypeScript met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 101
- Lessen
- 352
Veelgestelde vragen
Is de les “Prettier-integratie en conflicterende regels” gratis?
Ja — de volledige tekst van “Prettier-integratie en conflicterende regels” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus TypeScript Academy wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus TypeScript Academy bevat in totaal 3 lessen.
Wat leer ik in “Prettier-integratie en conflicterende regels”?
Integreer Prettier met ESLint, vermijd dubbele regels en los conflicten tussen stijl- en logica-regels op. Je oefent met TypeScript Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met TypeScript Academy te beginnen?
Ervaring vooraf is niet nodig. TypeScript Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 2 van 3.
Hoe lang duurt de les “Prettier-integratie en conflicterende regels”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over TypeScript Academy?
Ja. Elke les over TypeScript Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- ESLint + @typescript-eslint
- Prettier-integratie en conflicterende regels
- Veelgebruikte regelsets uit de praktijk