Vibe-programmering · Lektion

Hold koden vedligeholdelsesvenlig

Strukturér den, så De kan ændre den senere.

Lektion 3 af 413 trin

Hold koden vedligeholdelsesvenlig er en gratis Vibe-programmering-lektion på CoddyKit. Dette er lektion 3 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i Vibe-programmering, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Vibe-programmering-kurset indeholder 4 lektioner i alt.

Kode læses mere, end den skrives

AI kan generere en fungerende app på få minutter. Men seks uger senere, når du beder den om at tilføje en funktion, gør rodet kode alting langsommere — både for dig og AI. Vedligeholdelsesvenlig kode er kode, som fremtidens dig (og fremtidens AI) kan ændre uden bekymring.

Denne lektion handler om at holde et vibe-kodet projekt rent nok til at vokse.

Tydelige navne slår smart kode

Den vane, der giver den største effekt: gode navne. En funktion, der hedder calculateMonthlyTotal, fortæller dig, hvad den gør; doStuff2 fortæller dig ingenting.

AI vælger nogle gange dovne navne. Bed den blot om at omdøbe dem, så de bliver tydeligere.

// 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 én opgave hver

En funktion, der gør fem ting, er svær at forstå og risikabel at ændre. Opdel arbejdet i små funktioner, der hver især gør én ting. Når du ændrer én, ødelægger du ikke ved et uheld de andre.

AI refaktorerer gerne, når du beder den om det.

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.

Organiser filer efter formål

Én fil på 3000 linjer er et mareridt. Gruppér relateret kode i mapper: ting om brugere ét sted, betalinger et andet og brugergrænsefladen et tredje. Du finder koden hurtigere, og det gør AI også.

Bed AI om at foreslå en struktur, før du organiserer det hele.

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.

Gentag ikke dig selv

Når den samme logik findes tre steder, betyder en fejlrettelse tre ændringer — og du glemmer én af dem. Flyt gentagen logik til en enkelt delt funktion. Det er DRY-princippet: Gentag ikke dig selv.

AI elsker at kopiere og indsætte, så her skal du være ekstra opmærksom.

// 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));

Kommentér hvorfor, ikke hvad

God kode forklarer hvad den gør gennem tydelige navne. Kommentarer bør forklare hvorfor — den begrundelse, som koden ikke kan vise. AI kommenterer ofte det indlysende for meget; fjern de overflødige, og behold de meningsfulde.

// 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å du ikke glemmer det

Om tre måneder kan du ikke huske, hvordan du kører din egen app. En README-fil indeholder det vigtigste: hvad projektet er, hvordan det installeres, hvordan det køres, og hvad miljøvariablerne betyder.

Få AI til at generere en ud fra din kode.

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.

Bevar en ensartet stil

Blandede citationstegn, tilfældig indrykning og uensartede mellemrum gør kode sværere at læse. En formatter som Prettier retter automatisk alt dette, og en linter som ESLint markerer risikable mønstre.

Du behøver ikke konfigurere dem manuelt — bed AI om at sætte dem op.

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.

Refaktorér i små, sikre trin

Den største fælde for vedligeholdelse er at omskrive alt på én gang og ødelægge appen. Ryd i stedet op i små trin — og brug de tests, du skrev tidligere, til at bekræfte, at intet gik i stykker efter hver ændring.

Bed AI om at arbejde trinvist.

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.

Undgå magiske tal

Et råt tal som 0.07, der er gemt i koden, er et mysterium. Giv det et navn. Navngivne konstanter gør koden læsbar og betyder, at du ændrer værdien ét sted.

// 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));

Vedligeholdelsesvenlig kode hjælper også AI

Her er gevinsten, der er særligt relevant ved vibe-kodning: ren, velnavngiven og velorganiseret kode giver AI bedre svar i fremtiden. Når AI kan forstå din struktur, bliver dens ændringer mere præcise, og den ødelægger færre ting.

Vedligeholdelsesvenlighed er ikke kun for mennesker — det er sådan, du holder din AI-samarbejdspartner effektiv, mens projektet vokser.

Hurtigt tjek

Du opdager, at den samme logik til prisformatering er kopieret og indsat i syv forskellige filer. Hvad bør du gøre, hvis du følger gode vaner for vedligeholdelse?

Opsummering: Byg til at holde

Vedligeholdelsesvenlig kode gør det muligt for et vibe-kodet projekt at blive ved med at vokse. Dine vaner er: tydelige navne, små funktioner med ét formål, organiserede filer, delt logik efter DRY-princippet, meningsfulde kommentarer, en README, ensartet formatering via Prettier/ESLint og små, sikre refaktoreringer understøttet af tests.

Og husk: Ren kode gør AI bedre til at hjælpe dig næste gang. Næste emne er ydeevne og omkostninger — sådan holder du din app hurtig og dine regninger på et fornuftigt niveau.

Gratis at komme i gang

Lær JavaScript med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser
25
Lektioner
100

Ofte stillede spørgsmål

Er lektionen “Hold koden vedligeholdelsesvenlig” gratis?

Ja — alle 3 lektioner i læringssporet Vibe-programmering, inklusive “Hold koden vedligeholdelsesvenlig”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Vibe-programmering-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Hold koden vedligeholdelsesvenlig”?

Strukturér den, så De kan ændre den senere. Du øver dig i Vibe-programmering med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på Vibe-programmering?

Der kræves ingen tidligere erfaring. Vibe-programmering på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 3 af 4.

Hvor lang tid tager lektionen “Hold koden vedligeholdelsesvenlig”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne Vibe-programmering-lektion?

Ja. Alle Vibe-programmering-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

  1. Tilføj tests med AI
  2. Grundlæggende sikkerhed for AI-kode
  3. Hold koden vedligeholdelsesvenlig
  4. Ydeevne og omkostninger
← Tilbage til Vibe-programmering