Ta kodeproduktiviteten til neste nivå ved å integrere ChatGPT med VS Code.
Du kan være sjefen for oppgavene dine og øke produktiviteten din når du lærer å utnytte AI-verktøyene som kommer ut av forskningslaboratoriene daglig. VS Code har ChatGPT-utvidelsen for å gi deg et OpenAI-aktivert kodemiljø.
Du kan utnytte ChatGPTs enorme kodemodell for å fullføre prosjektene dine mer effektivt og raskere – rett inne i IDE. Her er nyttige måter du kan bruke ChatGPT med VS-kode på.
Hvordan installere og bruke ChatGPT-utvidelsen i VS-kode
Når du søker etter "ChatGPT" eller "Code GPT" i VS Code extension marketplace, kommer mange relaterte utvidelser opp. I motsetning til GitHub Copilot, er disse ikke offisielt direkte fra OpenAI.
De fleste VS Code ChatGPT-utvidelser samplet fungerer på samme måte. Men vi holder oss til EasyCodes ChatGPT-utvidelse for denne artikkelen, siden den er ganske grei for å demonstrere ChatGPT-brukstilfeller i VS-kode. Den støtter GPT-4 og GPT-3.5, har et gratis nivå og krever ingen API-nøkkel.
Slik installerer du ChatGPT-utvidelsen i VS Code:
- Åpne VS-kode og klikk på innstillingsikonet nederst til venstre på venstre sidefelt.
- Gå til Utvidelser.
- Alternativt, trykk Ctrl + Shift + X (Kommando + Shift + X for Mac) for å åpne utvidelsenes markedsplass direkte.
- Skriv "ChatGPT - EasyCode" i søkefeltet øverst til venstre.
- Klikk på utvidelsen når den vises.
- Klikk til slutt Installere.
- Du vil se utvidelsesikonet i venstre sidefelt når det er installert.
- Klikk på utvidelsesikonet. Klikk Prøv uten konto. Men gjerne Logg inn hvis du har en konto eller Melde deg på for en ny konto hos utvidelsesleverandøren.
Slik bruker du ChatGPT-utvidelsen
- For å bruke en innebygd ledetekst, uthev målkoden og høyreklikk den. Velg en av de tilgjengelige ledetekstene.
- For å skrive en egendefinert melding, høyreklikk på den uthevede koden og velg Spør GPT. Skriv inn forespørselen i chat-boksen øverst og trykk Tast inn.
Slik bruker du ChatGPT-utvidelsen med kodebasen din
Hvis du har åpnet VS-kode til kodebasekatalogen din og vil at ChatGPT skal få tilgang til underliggende moduler:
- Klikk på utvidelsesikonet på venstre sidefelt. Sjekk deretter Spør Codebase eske.
- Kopier målkoden og lim den inn i chat-boksen.
- Skriv inn ledeteksten under koden (trykk Shift + Enter) i chatteboksen.
- trykk Tast inn eller klikk på send-ikonet.
La oss nå se de forskjellige måtene å bruke ChatGPT i VS Code.
1. Refaktorer og endre kode
ChatGPT har vist seg nyttig for å endre prosessuell, funksjonell og objektorientert kode.
For eksempel, ved å bruke denne utvidelsen, ba vi ChatGPT om å refaktorisere den defekte koden nedenfor, en Python-funksjon for å lage en vilkårlig ordbok og legge til "Kjøp" til hver verdi.
defmakeDict(n: str, **kwargs)->dikt:
noen: dikt
til nøkkel, verdi i kwargs.items():
noen = n+" "+verdi
komme tilbake noen
newDict = makeDict("Kjøpe", item1="GPT-bok", element2="Java-opplæring", item3="Turguide")
Det gjorde det ganske bra å produsere den riktige koden som gir forventet utgang, med detaljerte årsaker for endringen:
Videre kan du bruke Spør en oppfølging boks for å fortelle ChtGPT om å konvertere koden til en klasse og vise hvordan du instansierer den:
Den genererte koden ovenfor er mer modulær og gjenbrukbar.
2. Feilsøk koden din
Hvis koden din gir en feil eller ikke fungerer som den skal, sparer du tid ved å be ChatGPT om å feilsøke den direkte i VS Code.
Selv om det ikke er noen innebygd melding for feilsøking, kan du bruke Spør GPT mulighet for å lage en tilpasset melding for å feilsøke koden din.
Vi ba ChatGPT-utvidelsen om å feilsøke koden vi brukte tidligere. Ikke bare feilsøkte det. Den forklarte det og genererte den riktige, inkludert forventet utgang.
3. Skriv koden din på et annet språk
Du vil kanskje skrive et program på et bestemt språk ved siden av kjernen din. Du kan skrive koden på kjernespråket ditt og be ChatGPT om å skrive den om på det valgte programmeringsspråket.
Imidlertid kan den genererte koden kreve lite menneskelig input, ettersom ChatGPT kan mislykkes i å gi en fullt fungerende konvertert kode i noen tilfeller.
For eksempel konverterte vi følgende Python-kode til C-ekvivalenten ved hjelp av VS Code ChatGPT-utvidelsen:
Du kan oppnå dette ved å høyreklikke på den uthevede koden og velge Spør GPT alternativ.
Her er forespørselen vår i VS-kode:
Selv om den genererte C-ekvivalenten to ganger før den ble riktig, fungerer den endelige koden.
4. Generer en grensesnittkomponent for API-en din
Hvis du har skrevet et API med forskjellige endepunkter, kan du be ChatGPT-utvidelsen om å gi en grensesnittkomponent for å konsumere den ved hjelp av et bestemt rammeverk. Dette kan være React, Vue eller Angular.
For eksempel brukte vi utvidelsen til å generere en React-komponent for å lage en møteplan basert på et API-endepunkt opprettet ved hjelp av Pythons FastAPI:
Som gjort ovenfor, kan det være lurt å sjekke Spør Codebase boks hvis du har å gjøre med en stor kodebase.
Etter å ha referert til kodebasen vår, ga VS Code ChatGPT-utvidelsen en hendig React-komponent for å bruke det oppgitte endepunktet:
5. Forklar kodeblokker
Anta at du tok et stykke kode fra Stack Overflow eller et GitHub-depot. Du kan be ChatGPT-utvidelsen i VS Code om å forklare hvordan den fungerer for bedre forståelse. Dette hjelper deg med å feilsøke slik kode enkelt hvis det oppstår feil på grunn av fremtidige kodeendringer.
I dette eksempelet ba vi ChatGPT-utvidelsen om å forklare følgende kode; en Python-klasse for å bekrefte brukernes e-postadresser.
Det genererte følgende svar:
6. Generer HTML-maler for applikasjonen din
Ved å bruke ChatGPT-utvidelsen i VS-kode kan du lage en HTML-mal (som inndatafelt) fra bunnen av – direkte ved å bruke chatboksen for utvidelsen. Du kan for eksempel be den lage en HTML-mal for brukerregistrering.
Men hva om du skriver en applikasjon som gjengir data direkte til HTML (en ikke-SPA) og vil ha en prosjektspesifikk mal? Du kan bruke ChatGPT-utvidelsen i VS Code for å lage HTML-maler som viser backend-dataene til brukerne.
For eksempel, hvis du bruker en MVT-arkitekturbasert rammeverk som Django, kan du bruke utvidelsen til å forfalske HTML-maler for Django-visningene dine.
Igjen, for denne typen brukstilfeller, vil du kanskje klikke på Spør Codebase avmerkingsboksen for ChatGPT for å få tilgang til kodebasen din.
7. Enhetstest koden din
Like viktig som enhetstesting er, kan det være en tidsforbruker. Du kan utnytte VS Code ChatGPT-utvidelsen for å generere enhetstester for koden din og spare verdifull utviklingstid.
Selv om ChatGPT-utvidelsen har en innebygd forespørsel for å generere enhetstester, kan det være lurt å skrive en tilpasset forespørsel ved å bruke Spør Codebase mulighet for spesifisitet og et bedre resultat.
Vi ba ChatGPT om å skrive en enhetstest for et registreringsendepunkt opprettet ved hjelp av Pythons FastAPI:
Den samplet kodebasen effektivt for å generere den nødvendige enhetstesten:
8. Finn potensielle sikkerhetssårbarheter
Selv om det kanskje ikke gir detaljert sikkerhetsanalyse, kan VS Code ChatGPT-utvidelsen være et nyttig verktøy for raskt se etter sikkerhetssårbarheter i applikasjonen din kodebase og sparer tid ved manuell skanning.
For å tillate ChatGPT å skanne kodebasen din, bruk Spør Codebase alternativet (klikk på utvidelsesikonet og merk av Spør Codebase eske).
Hvis du vanligvis gambler deg rundt noen gamle eller nye VS-kodefunksjoner, spør deg gjerne rundt i IDE fra ChatGPT-utvidelsen.
Du kan for eksempel be utvidelsen om å anbefale de beste utvidelsene for å feilsøke et bestemt programmeringsspråk.
Eller du kan stille et mer teknisk spørsmål, som hvordan du åpner VS-kode fra kommandolinjen.
10. Skriv dokumentasjon direkte fra VS-kode
Du kan enkelt skrive detaljert dokumentasjon for et kodestykke direkte fra VS Code ved å bruke ChatGPT-utvidelsen.
For eksempel, her er en detaljert dokumentasjon av en Zoom-lenkeopprettingsfunksjon (i HTML-format) som vi genererte ved hjelp av VS Code ChatGPT-utvidelsen:
Kode effektivt med ChatGPT i VS-kode
Som programmerer i et raskt internett, ønsker du å oppnå et minimum levedyktig produkt på den minste minimumstid. Selv om ChatGPT ikke er helt pålitelig, kan det hjelpe utviklingsreisen din hvis den brukes kreativt. Og det er mange flere brukstilfeller av ChatGPT i programmering. Men med alt som er sagt, sørg for at du validerer ChatGPTs resultater, da de noen ganger kan være villedende.
