Under de senaste två åren har jag och mitt team på Work & Co testat och gradvis integrerat AI-kodningsverktyg som Copilot, Cursor, Claude och ChatGPT för att hjälpa oss att skicka webbupplevelser som används av massorna. Visserligen, efter lite inledande skepsis och några aha-ögonblick, har olika AI-verktyg hittat in i mitt dagliga bruk. Med tiden började listan över applikationer där vi fann det vettigt att låta AI ta över växa, så jag bestämde mig för att dela med mig av några praktiska användningsfall för AI-verktyg för vad jag kallar den "ansvarige utvecklaren". Vad menar jag med en ansvarig utvecklare? Vi måste se till att vi levererar kvalitetskod som förväntas av våra intressenter och kunder. Våra bidrag (d.v.s. pull-förfrågningar) bör inte bli en börda för våra kollegor som kommer att behöva granska och testa vårt arbete. Dessutom, om du arbetar för ett företag: Verktygen vi använder måste godkännas av vår arbetsgivare. Känsliga aspekter som säkerhet och integritet måste hanteras korrekt: Klistra inte in hemligheter, kunddata (PII) eller proprietär kod i verktyg utan policygodkännande. Behandla det som kod från en främling på internet. Testa och verifiera alltid. Obs: Den här artikeln förutsätter en mycket grundläggande förtrogenhet med AI-kodningsverktyg som Copilot inuti VSCode eller Cursor. Om allt detta låter helt nytt och obekant för dig, kan Github Copilot-videohandledningarna vara en fantastisk utgångspunkt för dig.
Användbara tillämpningar av AI-kodningsverktyg Obs: Följande exempel kommer huvudsakligen att fokusera på att arbeta i JavaScript-baserade webbapplikationer som React, Vue, Svelte eller Angular. Att få en förståelse för en obekant kodbas Det är inte ovanligt att arbeta på etablerade kodbaser, och att gå med i en stor äldre kodbas kan vara skrämmande. Öppna helt enkelt ditt projekt och din AI-agent (i mitt fall Copilot Chat i VSCode) och börja ställa frågor precis som du skulle ställa till en kollega. I allmänhet gillar jag att prata med vilken AI-agent som helst precis som jag skulle göra med en medmänniska. Här är ett mer raffinerat exempel: "Ge mig en översikt över arkitektur på hög nivå: ingångspunkter, routing, auth, datalager, byggverktyg. Lista sedan 5 filer att läsa i ordning. Behandla förklaringar som hypoteser och bekräfta genom att hoppa till refererade filer."
Du kan fortsätta ställa uppföljningsfrågor som "Hur fungerar routingen i detalj?" eller "Berätta för mig genom autentiseringsprocessen och -metoderna" och det kommer att leda dig till användbara anvisningar för att skina lite ljus i mörkret i en obekant kodbas. Triaging bryta ändringar vid uppgradering av beroenden Att uppdatera npm-paket, särskilt när de kommer med brytande förändringar, kan vara tråkigt och tidskrävande arbete och få dig att felsöka en hel del regressioner. Jag var nyligen tvungen att uppgradera datavisualiseringsbiblioteket plotly.js upp en större version från version 2 till 3, och som ett resultat av det slutade axelmärkningen i några av graferna att fungera. Jag fortsatte med att fråga ChatGPT: "Jag uppdaterade mitt Angular-projekt som använder Plotly. Jag uppdaterade plotly.js - dist-paketet från version 2.35.2 till 3.1.0 - och nu är etiketterna på x- och y-axeln borta. Vad hände?"
Agenten kom tillbaka med en lösning omgående (se själv nedan). Obs: Jag verifierade fortfarande förklaringen mot den officiella migreringsguiden innan jag skickade korrigeringen.
Replikera Refactors säkert över filer Växande kodbaser visar med all säkerhet möjligheter för kodkonsolidering. Till exempel märker du kodduplicering över filer som kan extraheras till en enda funktion eller komponent. Som ett resultat bestämmer du dig för att skapa en delad komponent som kan inkluderas istället och utföra den refactor i en fil. Nu, istället för att manuellt utföra dessa ändringar i dina återstående filer, ber du din agent att rulla ut refaktorn åt dig. Agenter låter dig välja flera filer som sammanhang. När refaktorn för en fil är klar kan jag lägga till både de refaktorerade och orörda filerna i sammanhanget och uppmana agenten att rulla ut ändringarna till andra filer så här: "Replicera ändringarna jag gjorde i fil A till fil B också". Implementera funktioner i okända tekniker Ett av mina favorit-aha-ögonblick med hjälp av AI-kodningsverktyg var när det hjälpte mig att skapa en ganska komplex animerad gradientanimation i GLSL, ett språk som jag har varit ganska obekant med. I ett nyligen genomfört projekt kom våra designers på en animerad gradient som ett laddningstillstånd på ett 3D-objekt. Jag gillade verkligen konceptet och ville leverera något unikt och spännande till våra kunder. Deproblem: Jag hade bara två dagar på mig att implementera det, och GLSL har en ganska brant inlärningskurva. Återigen kom ett AI-verktyg (i det här fallet ChatGPT) väl till pass, och jag började helt enkelt att uppmana det att skapa en fristående HTML-fil åt mig som återger en duk och en mycket enkel animerad färggradient. Steg efter steg uppmanade jag AI:n att lägga till mer finess till den tills jag kom fram till ett anständigt resultat så att jag kunde börja integrera shadern i min faktiska kodbas. Slutresultatet: Våra kunder var supernöjda och vi levererade en komplex funktion på kort tid tack vare AI. Att skriva prov Enligt min erfarenhet finns det sällan tillräckligt med tid på projekt för att kontinuerligt skriva och underhålla en ordentlig uppsättning enhets- och integrationstester, och utöver det tycker många utvecklare inte riktigt om uppgiften att skriva tester. Att uppmana din AI-hjälpare att ställa in och skriva tester åt dig är fullt möjligt och kan göras på kort tid. Naturligtvis bör du som utvecklare fortfarande se till att dina tester faktiskt tar en titt på de kritiska delarna av din applikation och följer vettiga testprinciper, men du kan "outsourca" skrivandet av testerna till vår AI-hjälpare. Exempeluppmaning: "Skriv enhetstester för den här funktionen med hjälp av Jest. Täck lycklig väg, kantfall och fellägen. Förklara varför varje test existerar."
Du kan till och med förmedla testgurun Kent C. Dodds bästa praxis för testning som riktlinjer för din agent, som nedan:
Internt verktyg Lite likt shaderexemplet som nämndes tidigare fick jag nyligen i uppdrag att analysera kodduplicering i en kodbas och jämföra före och efter en refactor. Absolut inte en trivial uppgift om du inte vill gå den tidskrävande vägen att jämföra filer manuellt. Med hjälp av Copilot skapade jag ett script som analyserade kodduplicering åt mig, ordnade och beställde utdata i en tabell och exporterade det till Excel. Sedan tog jag det ett steg längre. När vår kodrefaktor var klar, uppmanade jag agenten att ta mitt befintliga Excel-ark som baslinje, lägga till det aktuella dupliceringsläget i separata kolumner och beräkna delta. Uppdatering av kod som skrevs för länge sedan Nyligen slog en gammal kund till mig, eftersom några funktioner med tiden inte fungerade korrekt på hans webbplats längre. Haken: Webbplatsen byggdes för nästan tio år sedan, och JavaScript och SCSS använde ganska gamla kompileringsverktyg som requireJS, och installationen krävde en äldre version av Node.js som inte ens skulle köras på min 2025 MacBook. Att uppdatera hela byggprocessen för hand skulle ha tagit mig dagar, så jag bestämde mig för att fråga AI-agenten: "Kan du uppdatera JS- och SCSS-byggprocessen till en mager 2025-stack som Vite?" Det gjorde det verkligen, och efter ungefär en timmes förfining med agenten bytte jag min SCSS- och JS-build till Vite, och jag kunde fokusera på faktiska buggfixar. Se bara till att korrekt validera utdata och kompilerade filer när du gör sådana integrerade ändringar i din byggprocess. Sammanfattning och utformning Vill du sammanfatta alla dina senaste kodändringar i en mening för ett commit-meddelande, eller har du en lång lista med commits och vill sammanfatta dem i tre punkter? Inga problem, låt AI:n ta hand om det, men se till att korrekturläsa den. Ett exempel på uppmaning är så enkelt som att skicka meddelanden till en medmänniska: "Sammanfatta mina senaste ändringar i kortfattade punktpunkter". Mitt råd här skulle vara att använda GPT för att skriva med försiktighet, och som med kod, kontrollera utdata innan du skickar eller skickar. Rekommendationer och bästa praxis Uppmaning En av de inte så uppenbara fördelarna med att använda AI är att ju mer specifika och skräddarsydda dina meddelanden är, desto bättre blir resultatet. Processen att uppmana en AI-agent tvingar oss att formulera våra krav så specifikt som möjligt innan vi skriver och kodar. Det är därför, som en allmän regel, jag rekommenderar starkt att vara så specifik som möjligt med din uppmaning. Ryan Florence, medförfattare till Remix, föreslår ett enkelt men kraftfullt sätt att förbättra denna process genom att avsluta din första uppmaning med meningen: "Innan vi börjar, har du några frågor till mig?"
Vid denna tidpunkt kommer AI vanligtvis tillbaka med användbara frågor där du kan förtydliga din specifika avsikt och vägleda agenten att ge dig ett mer skräddarsytt tillvägagångssätt för din uppgift.
Använd versionskontroll och arbeta i smältbara bitar Att använda versionskontroll som git är inte bara praktiskt när du samarbetar som ett team på en enda kodbas utan också för att ge dig som enindividuell bidragsgivare med stabila punkter att rulla tillbaka till i händelse av en nödsituation. På grund av sin icke-deterministiska natur kan AI ibland bli oseriös och göra ändringar som helt enkelt inte är användbara för det du försöker uppnå och så småningom bryta saker oåterkalleligt. Att dela upp ditt arbete i flera åtaganden hjälper dig att skapa stabila poäng som du kan återgå till om saker och ting går åt sidan. Och dina lagkamrater kommer att tacka dig också, eftersom de kommer att ha lättare att granska din kod när den delas upp i semantiskt välstrukturerade bitar. Granska grundligt Detta är mer av en allmän bästa praxis, men enligt min mening blir det ännu viktigare när du använder AI-verktyg för utvecklingsarbete: Var den första kritiska granskaren av din kod. Se till att ta lite tid att gå igenom dina ändringar rad för rad, precis som du skulle granska någon annans kod, och skicka in ditt arbete först när det har klarat din egen självgranskning. "Två saker är båda sanna för mig just nu: AI-agenter är fantastiska och en enorm produktivitetsökning. De är också enorma slopmaskiner om du stänger av din hjärna och släpper taget helt." — Armin Ronacher i sitt blogginlägg Agent Psychosis: Are We Going Insane?
Slutsats och kritiska tankar Enligt min åsikt kan AI-kodningsverktyg förbättra vår produktivitet som utvecklare på daglig basis och frigöra mental kapacitet för mer planering och tänkande på hög nivå. De tvingar oss att artikulera vårt önskade resultat med noggranna detaljer. Vilken AI som helst kan ibland hallucinera, vilket i princip betyder att den ligger i en självsäker ton. Så se till att kontrollera och testa, speciellt när du är osäker. AI är ingen silverkula, och jag tror att spetskompetens och förmågan att lösa problem som utvecklare aldrig kommer att gå ur modet. För utvecklare som precis har börjat i sin karriär kan dessa verktyg vara mycket frestande att göra större delen av arbetet åt dem. Det som kan gå vilse här är det ofta dränerande och smärtsamma arbetet genom buggar och problem som är svåra att felsöka och lösa, aka "the grind". Till och med Cursor AI:s egen Lee Robinson ifrågasätter detta i ett av sina inlägg:
AI-kodningsverktyg utvecklas i snabb takt, och jag är spänd på vad som kommer härnäst. Jag hoppas att du tyckte att den här artikeln och dess tips var till hjälp och att du är glad att prova några av dessa själv.
