Vibbekoda JetBrains-plugin: «Hadde null erfaring»

– AI-en er like god som prompteren. Gir du den gull – og nok kontekst – får du gullkode tilbake – pluss litt ekstra som må støvsuges bort. Derfor tar jeg alltid en manuell siste-håndsredigering før noe går i produksjon.

Det sier Stian Larsen, som jobber som utvikler i SpareBank 1 Utvikling. Han forteller at de har fagtid hver torsdag, og har brukt tiden til å bygge en ny plugin – CSS Variables Assistant. Den skal gjøre livet enklere for frontendutviklere som bruker JetBrains' editorer.

– Det er en vibe-kodet plugin. Jeg har faktisk null erfaring med IntelliJ Platform Gradle Plugin-prosjektet. Det var nytt for meg og ganske ugjenkjennelig, kanskje også uforståelig. 

– Men heldigvis har vi akseptert vibe-koding, og jeg syntes det er utrolig kult at man kan lage noe så brukbart og produksjonsklart bare ved forstå prompt-engineering og ta i bruk AI, selv om man selv kommer til kort, sier Larsen.

Hjelper deg med CSS

Kort fortalt er CSS Variables Assistant en plugin som skal gi bedre informasjon til utvikleren når man begynner å taste inn et CSS-variabelnavn eller "hovrer" over CSS-variabelnavn.

– For de som har brukt Tailwind er det snacks at man ofte ser den representerte verdien av en størrelse ved typing av klassenavnet. Men det er ganske mange som ikke bruker Tailwind, men heller vanlig css, eller scss, eller less, eller sass, eller moduler, forklarer Larsen.

Ofte bruker man CSS-variabler (custom properties), og haken da er at man kanskje mister oversikten over hva verdiene kan være i form av størrelser eller farger. 

– JetBrains har vært gode på å vise preview farge-swatcher i editor-sidebaren, men den vet ikke fargens fulle kontekst i form av @media query re-deklarasjoner, ei heller faktisk verdi.

Eksempel:

Du har deklarert disse CSS-variablene:

Hvis du ikke har CSS Variables Assistant installert, ser det slik ut når du begynner å skrive inn et variabelnavn:

Med CSS Varibles Assistant vil du se hvilke verdier som ligger bak hver variabel når du begynner å skrive:

Pluginen har også en masse annet – som nyttige oversikter og annet når du holder musemarkøren over variabler ("hovrer"). Du kan lese mer om det på nettsiden og på plugin-siden på JetBrains marketplace.

Larsen forteller at pluginen ble lansert på JetBrains Marketplace rundt 16. mai, og så langt har fått 1.500 nedlastinger. Han har også fått enkelte i SpareBank 1 Utvikling til å ta den i bruk.

– Flere på teamet mitt bruker den, men om det er fordi de vil supporte meg eller ei vet jeg ikke.

Viktig med "prompt engineering"

Larsen synes det er gøy at man ved hjelp av AI kan gå fra idé til ferdig produkt, selv om man ikke kan programmeringsspråket fra før. 

Men det er en del ting man bør tenke på for at AI-en skal gi deg de resultatene du ønsker. Det som gjerne kalles "prompt engineering" er viktig.

Larsen anslår at han brukte rundt 70 prosent av tiden på å finpusse på prompts, og 30 prosent på selve koden.

– AI-en leverer boilerplate, jeg sørger for at det faktisk fungerer, sier han.

Han har laget dette diagrammet som beskriver prosessen steg for steg (klikk for større bilde):

Kort sagt så bruker han to AI-modeller – ChatGPT (o3) og Claude Sonnet 4. 

Hvert forslag kvalitetssjekkes for å se om svaret er på rett vei, hvis ikke gis det mer kontekst i form av bilder, krav og test-caser, før spørsmålet stilles på nytt. 

– Vibbekoding kan gi teknisk gjeld og frustrasjon

– Å kunne skrive kode er ikke det samme som å kunne utvikle programvare, skriver utvikleren Rickard Falck.

God på mye

– Hva er AI-en god på, og ikke fullt så god på?

– Den er god på boilerplate og mønstergjenkjenning.

– Og den leser og forstår dokumentasjon for meg. Så lenge jeg limer inn alle sidene med dokumentasjon på det gitte API-et, gir den pinlig presise kodeeksempler.

AI-en er ifølge Larsen også god til å forstå kontekst bare den får nok informasjon. 

– Hvis jeg sender med fysiske kodefiler, bilder eller kopiert kode, kommer den med overraskende smarte forslag og intuitive forslag. Det trengs noen ganger å re-iterere et par ganger før vi er på mål. Men den kommer veldig godt «up to speed» på gitte problematikker.

Han mener AI-en med en god prompt oppfører seg som en hyperaktiv seniorutvikler som elsker repetitive oppgaver.

Her svikter det

Men AI-en er ikke alltid like bra. Som nevnt innledningsvis kan den gi deg "gullkode" tilbake hvis du gir den bra input og nok kontekst, men ofte snubler den:

AI-en gir for eksempel ofte altfor "verbos" kode:

– Den gir meg hele fila fra topp til bunn når jeg ba om én liten metode eller et mindre avsnitt fra en full fil.

Et annet problem er at den ofte dupliserer kode, og har utdatert API-kunnskap.

– Den bruker metoder som er markert som "deprecated" hvis jeg ikke limer inn fersk dokumentasjon selv. 

Og så hallusinerer den, for eksempel ved å finne opp klasser som aldri har eksistert. Heldigvis avsløres bløffen av kompilatoren.

Noe av det verste er imidlertid token-taket:

– Midt i flytsonen får du «Du har brukt opp kvoten din». All kontekst borte, produktiviteten parkerer...

Digga vibbekoding - så ble hele databasen sletta

Til tross for flere klare instrukser, endte forsøket til SaaStr-grunnleggeren med en sletta database.

Tips til andre

Larsen har disse tipsene til andre som vil vibekode – og få best mulig resultater:

• Behandle modellen som en ivrig junior-dev. Gi tydelige akseptansekriterier og test-cases – og forvent revisjon.
• Små, isolerte oppgaver. «Skriv denne action-klassen» > «Bygg hele pluginen».
• Kompilér tidlig og ofte. Kjør linter og enhetstester mellom hver prompt-runde.
• Dokumentér promtene dine. Legg dem i repoet; nyttig både for deg selv og sikkerhets-/IP-gjennomgang.
• Markdown – Bruk gjerne markdown for å la AI’en enklere forstå hva den leser.
• Produksjon ≠ Poc. For forretningskritisk kode: manuelt code-review, SAST-skanning og ytelsestester før deploy.

40 prosent av AI-genererte apper lekker data

Sjekka tusenvis av apper fra Lovable, Bolt, Base44, Replit og v0, og ble ikke spesielt imponert.