I løbet af de sidste to år har mit team hos Work & Co og jeg afprøvet og gradvist integreret AI-kodningsværktøjer som Copilot, Cursor, Claude og ChatGPT for at hjælpe os med at sende weboplevelser, der bruges af masserne. Indrømmet, efter nogle indledende skepsis og et par aha-øjeblikke, har forskellige AI-værktøjer fundet vej til min daglige brug. Med tiden begyndte listen over applikationer, hvor vi fandt det fornuftigt at lade AI tage over, at vokse, så jeg besluttede at dele nogle praktiske use cases for AI-værktøjer til det, jeg kalder den "ansvarlige udvikler". Hvad mener jeg med en ansvarlig udvikler? Vi skal sikre, at vi leverer kvalitetskode, som vores interessenter og kunder forventer. Vores bidrag (dvs. pull-anmodninger) bør ikke blive en byrde for vores kolleger, som skal gennemgå og teste vores arbejde. Også, hvis du arbejder for en virksomhed: De værktøjer, vi bruger, skal godkendes af vores arbejdsgiver. Følsomme aspekter som sikkerhed og privatliv skal håndteres korrekt: Indsæt ikke hemmeligheder, kundedata (PII) eller proprietær kode i værktøjer uden politikgodkendelse. Behandl det som kode fra en fremmed på internettet. Test og bekræft altid. Bemærk: Denne artikel antager en vis meget grundlæggende kendskab til AI-kodningsværktøjer som Copilot inde i VSCode eller Cursor. Hvis alt dette lyder helt nyt og ukendt for dig, kan Github Copilot video tutorials være et fantastisk udgangspunkt for dig.
Nyttige applikationer af AI-kodningsværktøjer Bemærk: De følgende eksempler vil hovedsageligt fokusere på at arbejde i JavaScript-baserede webapplikationer som React, Vue, Svelte eller Angular. Få en forståelse af en ukendt kodebase Det er ikke ualmindeligt at arbejde på etablerede kodebaser, og det kan være skræmmende at tilslutte sig en stor ældre kodebase. Du skal blot åbne dit projekt og din AI-agent (i mit tilfælde Copilot Chat i VSCode) og begynde at stille spørgsmål, ligesom du ville stille en kollega. Generelt kan jeg godt lide at tale med enhver AI-agent ligesom jeg ville med et medmenneske. Her er et mere raffineret eksempel på prompt: "Giv mig et overblik over arkitektur på højt niveau: indgangspunkter, routing, godkendelse, datalag, byggeværktøjer. Angiv derefter 5 filer, der skal læses i rækkefølge. Behandl forklaringer som hypoteser, og bekræft ved at hoppe til refererede filer."
Du kan blive ved med at stille opfølgende spørgsmål som "Hvordan fungerer routingen i detaljer?" eller "Tal mig gennem godkendelsesprocessen og -metoderne", og det vil føre dig til nyttige anvisninger til at skinne lidt lys ind i mørket af en ukendt kodebase. Triaging bryde ændringer ved opgradering af afhængigheder Opdatering af npm-pakker, især når de kommer med brydende ændringer, kan være kedeligt og tidskrævende arbejde og få dig til at fejlsøge en hel del regressioner. Jeg var for nylig nødt til at opgradere datavisualiseringsbiblioteket plotly.js op i en større udgivelsesversion fra version 2 til 3, og som et resultat af det holdt aksemærkningen i nogle af graferne op med at fungere. Jeg fortsatte med at spørge ChatGPT: "Jeg opdaterede mit Angular-projekt, der bruger Plotly. Jeg opdaterede plotly.js - dist-pakken fra version 2.35.2 til 3.1.0 - og nu er etiketterne på x- og y-aksen væk. Hvad skete der?"
Agenten kom tilbage med en løsning med det samme (se selv nedenfor). Bemærk: Jeg bekræftede stadig forklaringen i forhold til den officielle migrationsvejledning, før jeg sendte rettelsen.
Sikker replikering af refaktorer på tværs af filer Voksende kodebaser afslører helt sikkert muligheder for kodekonsolidering. For eksempel bemærker du kodeduplikering på tværs af filer, der kan udtrækkes til en enkelt funktion eller komponent. Som et resultat beslutter du dig for at oprette en delt komponent, der kan inkluderes i stedet, og udføre denne refactor i én fil. Nu, i stedet for manuelt at udføre disse ændringer i dine resterende filer, beder du din agent om at udrulle refactor for dig. Agenter lader dig vælge flere filer som kontekst. Når refactoren for en fil er færdig, kan jeg tilføje både de refactored og uberørte filer i kontekst og bede agenten om at udrulle ændringerne til andre filer som dette: "Repliker de ændringer, jeg lavede i fil A til fil B også". Implementering af funktioner i ukendte teknologier Et af mine yndlings-aha-øjeblikke ved at bruge AI-kodningsværktøjer var, da det hjalp mig med at skabe en ret kompleks animeret gradientanimation i GLSL, et sprog jeg har været ret ukendt med. På et nyligt projekt kom vores designere med en animeret gradient som en indlæsningstilstand på et 3D-objekt. Jeg kunne virkelig godt lide konceptet og ville gerne levere noget unikt og spændende til vores kunder. Deproblem: Jeg havde kun to dage til at implementere det, og GLSL har en ret stejl indlæringskurve. Igen kom et AI-værktøj (i dette tilfælde ChatGPT) til nytte, og jeg begyndte ganske enkelt at bede det om at oprette en selvstændig HTML-fil til mig, der gengiver et lærred og en meget enkel animeret farvegradient. Trin efter trin bad jeg AI'en om at tilføje mere finesse til det, indtil jeg nåede frem til et anstændigt resultat, så jeg kunne begynde at integrere shaderen i min egentlige kodebase. Slutresultatet: Vores kunder var super glade, og vi leverede en kompleks funktion på kort tid takket være AI. Skrivning af prøver Min erfaring er, at der sjældent er tid nok på projekter til løbende at skrive og vedligeholde en ordentlig suite af enheds- og integrationstests, og oven i købet nyder mange udviklere ikke rigtig opgaven med at skrive test. At bede din AI-hjælper om at opsætte og skrive test for dig er fuldt ud muligt og kan gøres på kort tid. Selvfølgelig skal du som udvikler stadig sikre dig, at dine test faktisk tager et kig på de kritiske dele af din applikation og følger fornuftige testprincipper, men du kan "outsource" skrivningen af testene til vores AI-hjælper. Eksempel på prompt: "Skriv enhedstests for denne funktion ved hjælp af Jest. Dæk glad sti, kanttilfælde og fejltilstande. Forklar, hvorfor hver test eksisterer."
Du kan endda videregive testguruen Kent C. Dodds' bedste praksis for testning som retningslinjer for din agent, som nedenfor:
Intern værktøj Noget lignende shader-eksemplet nævnt tidligere, fik jeg for nylig til opgave at analysere kodeduplikering i en kodebase og sammenligne før og efter en refactor. Bestemt ikke en triviel opgave, hvis du ikke ønsker at gå den tidskrævende vej med at sammenligne filer manuelt. Ved hjælp af Copilot lavede jeg et script, der analyserede kodeduplikering for mig, arrangerede og bestilte outputtet i en tabel og eksporterede det til Excel. Så tog jeg det et skridt videre. Da vores koderefaktor var færdig, bad jeg agenten om at tage mit eksisterende Excel-ark som basislinje, tilføje den aktuelle duplikeringstilstand i separate kolonner og beregne deltaet. Opdatering af kode skrevet for lang tid siden For nylig slog en gammel klient mig op, da nogle få funktioner over tid ikke fungerede korrekt på hans hjemmeside længere. Fangsten: Hjemmesiden blev bygget for næsten ti år siden, og JavaScript og SCSS brugte ret gamle kompileringsværktøjer som requireJS, og opsætningen krævede en ældre version af Node.js, der ikke engang ville køre på min 2025 MacBook. At opdatere hele byggeprocessen manuelt ville have taget mig dage, så jeg besluttede at spørge AI-agenten: "Kan du opdatere JS- og SCSS-byggeprocessen til en mager 2025-stack som Vite?" Det gjorde det bestemt, og efter omkring en times raffinering med agenten fik jeg min SCSS- og JS-build skiftet til Vite, og jeg var i stand til at fokusere på faktisk fejlrettelse. Bare sørg for at validere outputtet og de kompilerede filer korrekt, når du laver sådanne integrerede ændringer i din byggeproces. Opsummering og udarbejdelse Vil du opsummere alle dine seneste kodeændringer i én sætning for en commit-besked, eller har du en lang liste over commits og vil du gerne opsummere dem i tre punktopstillinger? Intet problem, lad AI'en tage sig af det, men sørg for at læse korrektur. Et eksempel på en prompt er så simpel som at sende en besked til et medmenneske: "Opsummer venligst mine seneste ændringer i kortfattede punktopstillinger". Mit råd her vil være at bruge GPT til at skrive med forsigtighed, og som med kode, bedes du kontrollere outputtet, før du sender eller sender. Anbefalinger og bedste praksis Spørg En af de ikke så indlysende fordele ved at bruge AI er, at jo mere specifikke og skræddersyede dine prompter er, jo bedre er output. Processen med at tilskynde en AI-agent tvinger os til at formulere vores krav så specifikt som muligt, før vi skriver og koder. Derfor anbefaler jeg som en generel regel at være så specifik som muligt med din prompt. Ryan Florence, medforfatter til Remix, foreslår en enkel, men kraftfuld måde at forbedre denne proces på ved at afslutte din indledende prompt med sætningen: "Inden vi starter, har du nogle spørgsmål til mig?"
På dette tidspunkt kommer AI normalt tilbage med nyttige spørgsmål, hvor du kan afklare din specifikke hensigt og vejlede agenten til at give dig en mere skræddersyet tilgang til din opgave.
Brug versionskontrol og arbejd i fordøjelige bidder Brug af versionskontrol som git er ikke kun praktisk, når du samarbejder som et team på en enkelt kodebase, men også for at give dig som enindividuel bidragyder med stabile punkter at rulle tilbage til i tilfælde af en nødsituation. På grund af dens ikke-deterministiske karakter kan AI nogle gange blive useriøs og foretage ændringer, der simpelthen ikke er nyttige for det, du forsøger at opnå, og til sidst ødelægge tingene uopretteligt. At dele dit arbejde op i flere commits vil hjælpe dig med at skabe stabile point, som du kan vende tilbage til, hvis tingene går sidelæns. Og dine holdkammerater vil også takke dig, da de vil have lettere ved at gennemgå din kode, når den er delt op i semantisk velstrukturerede bidder. Gennemgå grundigt Dette er mere en generel best practice, men efter min mening bliver det endnu vigtigere, når du bruger AI-værktøjer til udviklingsarbejde: Vær den første kritiske anmelder af din kode. Sørg for at bruge lidt tid på at gennemgå dine ændringer linje for linje, ligesom du ville gennemgå en andens kode, og indsend først dit arbejde, når det har bestået din egen selvanmeldelse. "To ting er begge sande for mig lige nu: AI-agenter er fantastiske og et enormt produktivitetsboost. De er også massive slopmaskiner, hvis du slukker for din hjerne og giver helt slip." - Armin Ronacher i sit blogindlæg Agent Psychosis: Are We Going Insane?
Konklusion og kritiske tanker Efter min mening kan AI-kodningsværktøjer forbedre vores produktivitet som udviklere på daglig basis og frigøre mental kapacitet til mere planlægning og tænkning på højt niveau. De tvinger os til at formulere vores ønskede resultat med omhyggelige detaljer. Enhver AI kan til tider hallucinere, hvilket dybest set betyder, at den ligger i en selvsikker tone. Så sørg for at tjekke og teste, især når du er i tvivl. AI er ikke en sølvkugle, og jeg tror, at ekspertise og evnen til at løse problemer som udvikler aldrig vil gå af mode. For udviklere, der lige er startet i deres karriere, kan disse værktøjer være meget fristende til at gøre størstedelen af arbejdet for dem. Det, der kan gå tabt her, er det ofte drænende og smertefulde arbejde gennem fejl og problemer, der er vanskelige at fejlfinde og løse, også kaldet "the grind". Selv Cursor AI's helt egen Lee Robinson sætter spørgsmålstegn ved dette i et af hans indlæg:
AI-kodningsværktøjer udvikler sig i et hurtigt tempo, og jeg er spændt på, hvad der kommer næste gang. Jeg håber, du fandt denne artikel og dens tips nyttige, og jeg glæder mig til at prøve nogle af disse selv.
