Hålla koden underhållbar
Strukturera så att framtida du kan ändra den.
Hålla koden underhållbar är en gratis lektion i Vibe Coding på CoddyKit. Detta är lektion 3 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Vibe Coding, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Vibe Coding innehåller totalt 4 lektioner.
Kod läses oftare än den skrivs
AI kan generera en fungerande app på några minuter. Men sex veckor senare, när du ber den lägga till en funktion, gör rörig kod allt långsammare — både för dig och för AI. Underhållbar kod är kod som framtida du (och framtida AI) kan ändra utan oro.
Den här lektionen handlar om att hålla ett vibe-kodat projekt tillräckligt rent för att kunna växa.
Tydliga namn slår smart kod
Den vana som ger störst effekt är bra namn. En funktion som heter calculateMonthlyTotal berättar vad den gör; doStuff2 berättar ingenting.
AI väljer ibland lata namn. Be den helt enkelt byta namn för tydlighetens skull.
// Hard to follow
function d(x, y) { return x - (x * y / 100); }
// Self-explaining
function applyDiscount(price, percentOff) {
return price - (price * percentOff / 100);
}
console.log(applyDiscount(100, 20));Små funktioner med ett enda ansvar
En funktion som gör fem saker är svår att förstå och riskabel att ändra. Dela upp arbetet i små funktioner som var och en gör en sak. När du ändrar en av dem råkar du inte av misstag förstöra de andra.
AI hjälper gärna till att refaktorera när du ber den.
Refactor this function so each step is its own small, well-named function. Don't change behavior. Here it is:
function checkout(cart) {
// calculates totals, applies discount, charges card, sends email...
<paste the big function>
}
Return the refactored version with a short note on what each function does.Organisera filer efter syfte
En enda fil på 3 000 rader är en mardröm. Gruppera relaterad kod i mappar: sådant som rör användare på ett ställe, betalningar på ett annat och gränssnittet på ett tredje. Du hittar koden snabbare, och det gör AI också.
Be AI föreslå en struktur innan du organiserar om.
My project is one big app.js file. Suggest a clean folder structure for a small web app with users, products, and checkout. Show me which functions go in which file, and explain the reasoning. Don't move anything yet — just propose the layout.Upprepa inte dig själv
När samma logik finns på tre ställen innebär en buggfix tre ändringar — och du kommer att glömma en. Flytta upprepad logik till en enda gemensam funktion. Det här är DRY-principen: Don't Repeat Yourself.
AI älskar att kopiera och klistra in, så här behöver du vara uppmärksam.
// Repeated formatting in many places
const a = '$' + price1.toFixed(2);
const b = '$' + price2.toFixed(2);
// One source of truth
function formatPrice(value) {
return '$' + value.toFixed(2);
}
console.log(formatPrice(9.5), formatPrice(120));Kommentera varför, inte vad
Bra kod förklarar vad den gör genom tydliga namn. Kommentarer ska förklara varför — resonemanget som koden inte kan visa. AI kommenterar ofta det uppenbara för mycket; ta bort sådana kommentarer och behåll de meningsfulla.
// Noise: the code already says this
let count = 0; // set count to zero
// Useful: explains a non-obvious decision
// Stripe rounds to cents, so we store integers to avoid float errors
const amountInCents = Math.round(dollars * 100);En README så att du inte glömmer
Om tre månader kommer du inte att minnas hur du kör din egen app. En README-fil samlar det viktigaste: vad projektet är, hur det installeras, hur det körs och vad miljövariablerna betyder.
Be AI skapa en utifrån din kod.
Read my project and write a README.md with: a one-line description, setup steps (install + run commands), required environment variables and what each is for, and how to run the tests. Keep it short and skimmable.Håll en konsekvent stil
Blandade citattecken, slumpmässig indragning och inkonsekventa mellanrum gör koden svårare att läsa. En formatterare som Prettier fixar allt detta automatiskt, och en linter som ESLint flaggar riskabla mönster.
Du behöver inte konfigurera dem manuellt — be AI sätta upp dem.
Set up Prettier and ESLint for this JavaScript project. Add a "format" and a "lint" script to package.json, sensible default configs, and tell me the one command to auto-format the whole codebase.Refaktorera i små, säkra steg
Den största underhållbarhetsfällan är att skriva om allt på en gång och råka ha sönder appen. Städa i stället upp i små steg — och använd testerna du skrev tidigare för att bekräfta att inget gick sönder efter varje ändring.
Be AI arbeta stegvis.
Refactor this module for readability, but do it in small steps. After each change, keep the behavior identical so my existing tests still pass. List the steps you'd take in order before changing anything.Undvik magiska tal
Ett råtal som 0.07 gömt i koden är ett mysterium. Ge det ett namn. Namngivna konstanter gör koden lättläst och innebär att du ändrar värdet på ett ställe.
// Magic number — what is 0.07?
function withTax(price) { return price * 1.07; }
// Clear and easy to update
const TAX_RATE = 0.07;
function withTax(price) {
return price * (1 + TAX_RATE);
}
console.log(withTax(100));Underhållbar kod hjälper även AI
Här är den särskilda vinsten med vibe coding: ren, väl namngiven och välorganiserad kod ger AI bättre framtida svar. När AI kan förstå din struktur blir ändringarna mer träffsäkra och färre saker går sönder.
Underhållbarhet är inte bara till för människor — det är så du håller din AI-partner effektiv när projektet växer.
Snabbtest
Du upptäcker att samma logik för prisformatering har kopierats och klistrats in i sju olika filer. Vad bör du göra enligt goda vanor för underhållbarhet?
Sammanfattning: bygg för att hålla
Underhållbar kod gör att ett vibe-kodat projekt kan fortsätta växa. Dina vanor är: tydliga namn, små funktioner med ett enda syfte, organiserade filer, gemensam logik enligt DRY, meningsfulla kommentarer, en README, konsekvent formatering via Prettier/ESLint samt små och säkra refaktoreringar med stöd av tester.
Kom också ihåg: ren kod gör AI bättre på att hjälpa dig nästa gång. Nästa ämne är prestanda och kostnad — att hålla appen snabb och räkningarna rimliga.
Lär dig JavaScript 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
- 25
- Lektioner
- 100
Vanliga frågor
Är lektionen ”Hålla koden underhållbar” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Vibe Coding, inklusive ”Hålla koden underhållbar”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Vibe Coding innehåller totalt 4 lektioner.
Vad lär jag mig i ”Hålla koden underhållbar”?
Strukturera så att framtida du kan ändra den. Ni övar på Vibe Coding 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 Vibe Coding?
Du behöver inga förkunskaper. Utbildningen i Vibe Coding 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 3 av 4.
Hur lång tid tar lektionen ”Hålla koden underhållbar”?
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 Vibe Coding-lektionen?
Ja. Varje Vibe Coding-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
- Lägga till tester med AI
- Grunderna i säkerhet för AI-kod
- Hålla koden underhållbar
- Prestanda och kostnad