Prettier-integration och regelkonflikter
Integrera Prettier med ESLint, undvik dubbla regler och hantera konflikter mellan stilregler och logikregler.
Prettier-integration och regelkonflikter är en gratis lektion i TypeScript Academy på CoddyKit. Detta är lektion 2 av 3. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för TypeScript Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i TypeScript Academy innehåller totalt 3 lektioner.
Introduktion
Mål: Kombinera Prettier (formatering) med ESLint (logik och stil) utan konflikter.
Installation
Installera Prettier samt ESLint-pluginer och konfigurationer för att integrera verktygen smidigt.
npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettierPrettier-konfiguration
Prettier har en egen konfigurationsfil. Använd den för alternativ som endast rör formatering (citattecken, semikolon och radlängd).
// .prettierrc.json
{
"semi": false,
"singleQuote": true
}Integrera konfigurationen
Lägg till plugin:prettier/recommended i ESLint:s extends. Det inkluderar eslint-config-prettier och eslint-plugin-prettier.
// .eslintrc.js
module.exports = {
extends: [
"plugin:@typescript-eslint/recommended",
"plugin:prettier/recommended"
]
}Exempel på konflikt
Utan konfiguration kan ESLint och Prettier vara oense, till exempel om semikolon. Konfigurationen inaktiverar motstridiga ESLint-regler.
// demo.ts
const msg = "hi"
console.log(msg)
// ESLint: missing semicolon
// Prettier: auto removes semicolons if disabled
// Solution: use eslint-config-prettierKör kontroller
Kör ESLint för logik och stil och Prettier för formatering. Ni kan även integrera båda verktygen i er editor.
npx eslint "src/**/*.{ts,tsx}"
npx prettier --check "src/**/*.{ts,tsx}"Fråga
Snabb kontroll: Vad gör eslint-config-prettier?
Sammanfattning
Sammanfattning: Installera Prettier + konfigurationer, lägg till dem i ESLint:s extends, inaktivera motstridiga regler och kör båda verktygen för en harmonisk kodstil.
Lär dig TypeScript med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 101
- Lektioner
- 352
Vanliga frågor
Är lektionen ”Prettier-integration och regelkonflikter” gratis?
Ja – hela texten till ”Prettier-integration och regelkonflikter” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i TypeScript Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i TypeScript Academy innehåller totalt 3 lektioner.
Vad lär jag mig i ”Prettier-integration och regelkonflikter”?
Integrera Prettier med ESLint, undvik dubbla regler och hantera konflikter mellan stilregler och logikregler. Ni övar på TypeScript Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig TypeScript Academy?
Du behöver inga förkunskaper. Utbildningen i TypeScript Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 3.
Hur lång tid tar lektionen ”Prettier-integration och regelkonflikter”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här TypeScript Academy-lektionen?
Ja. Varje TypeScript Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- ESLint och @typescript-eslint
- Prettier-integration och regelkonflikter
- Vanliga regeluppsättningar i verkliga projekt