Tag din kodningsproduktivitet til næste niveau ved at integrere ChatGPT med VS Code.

Du kan være chef for dine opgaver og øge din produktivitet, når du lærer at udnytte AI-værktøjerne, der dagligt tropper ud af forskningslaboratorier. VS Code har ChatGPT-udvidelsen for at give dig et OpenAI-aktiveret kodningsmiljø.

Du kan udnytte ChatGPTs store kodningsmodel til at fuldføre dine projekter mere effektivt og hurtigere – lige inde i IDE. Her er praktiske måder, du kan bruge ChatGPT med VS-kode på.

Sådan installeres og bruger du ChatGPT-udvidelsen i VS-kode

Når du søger efter "ChatGPT" eller "Code GPT" på VS Code extension marketplace, kommer der mange relaterede udvidelser op. I modsætning til GitHub Copilot er disse ikke officielt direkte fra OpenAI.

De fleste VS Code ChatGPT-udvidelser samplet fungerer dog på samme måde. Men vi bliver ved EasyCodes ChatGPT-udvidelse for denne artikel, da den er ret anstændig til at demonstrere ChatGPT-brugssager i VS-kode. Det understøtter GPT-4 og GPT-3.5, har et gratis niveau og kræver ikke en API-nøgle.

instagram viewer

Sådan installeres ChatGPT-udvidelsen i VS Code:

  1. Åbn VS Code og klik på indstillingsikonet nederst til venstre i venstre sidebjælke.
  2. Gå til Udvidelser.
  3. Alternativt, tryk på Ctrl + Shift + X (Kommando + Shift + X for Mac) for at åbne udvidelsernes markedsplads direkte.
  4. Skriv "ChatGPT - EasyCode" i søgefeltet øverst til venstre.
  5. Klik på udvidelsen, når den ses.
  6. Klik til sidst Installere.
  7. Du vil se udvidelsesikonet i venstre sidebjælke, når det er installeret.
  8. Klik på udvidelsesikonet. Klik Prøv uden konto. Men du må gerne Log ind hvis du har en konto eller Tilmelde for en ny konto hos udvidelsesudbyderen.

Sådan bruger du ChatGPT-udvidelsen

  1. For at bruge en indbygget prompt skal du fremhæve målkoden og højreklikke på den. Vælg en af ​​de tilgængelige prompter.
  2. For at skrive en brugerdefineret prompt skal du højreklikke på den fremhævede kode og vælge Spørg GPT. Indtast din prompt i chatboksen øverst og tryk Gå ind.

Sådan bruger du ChatGPT-udvidelsen med din kodebase

Hvis du har åbnet VS-kode til din kodebase-mappe og vil have ChatGPT til at få adgang til underliggende moduler:

  1. Klik på udvidelsesikonet i venstre sidebjælke. Tjek derefter Spørg Codebase boks.
  2. Kopiér målkoden og indsæt den i chatboksen.
  3. Indtast din prompt under koden (tryk Shift + Enter) i chatboksen.
  4. Trykke Gå ind eller klik på send-ikonet.

Lad os nu se de forskellige måder at bruge ChatGPT i VS Code.

1. Refaktorer og ændre kode

ChatGPT har vist sig at være nyttigt til at ændre proceduremæssig, funktionel og objektorienteret kode.

For eksempel, ved at bruge denne udvidelse, bad vi ChatGPT om at refaktorisere den defekte kode nedenfor, en Python-funktion til at oprette en vilkårlig ordbog og tilføje "Køb" til hver værdi.

defmakeDict(n: str, **kwargs)-> dikt:
 nogle: dikt
til nøgle, værdi i kwargs.items():
 nogle = n+" "+værdi
Vend tilbage nogle
newDict = makeDict("Købe", vare1="GPT-bog", item2="Java Tutorial", item3="Vandreguide")

Det lykkedes ret godt at producere den korrekte kode, der giver det forventede output, med detaljerede årsager til ændringen:

Yderligere kan du bruge Spørg en opfølgning boks for at bede ChtGPT om at konvertere koden til en klasse og vise, hvordan man instansierer den:

Den genererede kode ovenfor er mere modulær og genbrugelig.

2. Debug din kode

Hvis din kode kaster en fejl eller ikke virker, som den skal, sparer du tid ved at bede ChatGPT om at debugge den direkte inde i VS Code.

Selvom der ikke er nogen indbygget prompt til fejlretning, kan du bruge Spørg GPT mulighed for at oprette en brugerdefineret prompt for at fejlfinde din kode.

Vi bad ChatGPT-udvidelsen om at fejlsøge den kode, vi brugte tidligere. Det fejlede ikke kun. Det forklarede det og genererede det korrekte, inklusive dets forventede output.

3. Skriv din kode på et andet sprog

Du vil måske skrive et program på et bestemt sprog udover din kerne. Du kan skrive din kode på dit kernesprog og bede ChatGPT om at omskrive den til det valgte programmeringssprog.

Den genererede kode kan dog kræve lidt menneskelig input, da ChatGPT muligvis ikke leverer en fuldt fungerende konverteret kode i nogle tilfælde.

For eksempel konverterede vi følgende Python-kode til dens C-ækvivalent ved hjælp af VS Code ChatGPT-udvidelse:

Du kan opnå dette ved at højreklikke på den fremhævede kode og vælge Spørg GPT mulighed.

Her er vores prompt i VS-kode:

Selvom den genererede C-ækvivalenten to gange, før den fik den rigtige, fungerer den endelige kode.

4. Generer en frontend-komponent til din API

Hvis du har skrevet en API med forskellige slutpunkter, kan du bede ChatGPT-udvidelsen om at levere en frontend-komponent til at forbruge den ved hjælp af en bestemt ramme. Dette kunne være React, Vue eller Angular.

For eksempel brugte vi udvidelsen til at generere en React-komponent til at oprette en mødeplan baseret på et API-slutpunkt oprettet ved hjælp af Pythons FastAPI:

Som gjort ovenfor, vil du måske tjekke Spørg Codebase boks, hvis du har at gøre med en stor kodebase.

Efter at have henvist til vores kodebase, gav VS Code ChatGPT-udvidelsen en praktisk React-komponent til at bruge det medfølgende slutpunkt:

5. Forklar kodeblokke

Antag, at du fik fat i et stykke kode fra Stack Overflow eller et GitHub-lager. Du kan bede ChatGPT-udvidelsen i VS Code om at forklare, hvordan det virker for bedre forståelse. Dette hjælper dig med at debugge sådan kode nemt, hvis der opstår fejl på grund af fremtidige kodeændringer.

I dette eksempel har vi bedt ChatGPT-udvidelsen om at forklare følgende kode; en Python-klasse til at bekræfte brugernes e-mailadresser.

Det gav følgende svar:

6. Generer HTML-skabeloner til din applikation

Ved at bruge ChatGPT-udvidelsen i VS Code kan du oprette en HTML-skabelon (som inputfelter) fra bunden – direkte ved at bruge chatboksen til udvidelsen. For eksempel kan du bede den om at oprette en HTML-skabelon til brugerregistrering.

Men hvad hvis du skriver en applikation, der gengiver data direkte til HTML (en ikke-SPA) og ønsker en projektspecifik skabelon? Du kan bruge ChatGPT-udvidelsen i VS Code til at oprette HTML-skabeloner, der viser backend-dataene til brugerne.

For eksempel, hvis du bruger en MVT arkitektur-baseret ramme som Django, kan du bruge udvidelsen til at skabe HTML-skabeloner til dine Django-visninger.

Igen, for denne type brug, vil du måske klikke på Spørg Codebase afkrydsningsfeltet for ChatGPT for at få adgang til din kodebase.

7. Unit-Test din kode

Lige så vigtigt som enhedstest er, kan det være en tidsforbruger. Du kan udnytte VS Code ChatGPT-udvidelsen til at generere enhedstests for din kode og spare værdifuld udviklingstid.

Selvom ChatGPT-udvidelsen har en indbygget prompt til generering af enhedstests, vil du måske skrive en brugerdefineret prompt ved hjælp af Spørg Codebase mulighed for specificitet og et bedre resultat.

Vi bad ChatGPT om at skrive en enhedstest for et registreringsslutpunkt oprettet ved hjælp af Pythons FastAPI:

Det samplede kodebasen effektivt for at generere den nødvendige enhedstest:

8. Find potentielle sikkerhedssårbarheder

Selvom det muligvis ikke giver detaljeret sikkerhedsanalyse, kan VS Code ChatGPT-udvidelsen være et praktisk værktøj til hurtigt kontrollere for sikkerhedssårbarheder i din applikation kodebase og sparer dig tid ved at scanne manuelt.

For at tillade ChatGPT at scanne din kodebase, skal du bruge Spørg Codebase mulighed (klik på udvidelsesikonet og marker Spørg Codebase boks).

Hvis du normalt gambler dig rundt i nogle gamle eller nye VS Code funktioner, spørg gerne rundt i IDE'en fra ChatGPT-udvidelsen.

For eksempel kan du bede udvidelsen om at anbefale de bedste udvidelser til fejlretning af et bestemt programmeringssprog.

Eller du kan stille det et mere teknisk spørgsmål, som hvordan man åbner VS-kode fra kommandolinjen.

10. Skriv dokumentation direkte fra VS-kode

Du kan nemt skrive detaljeret dokumentation for et stykke kode direkte fra VS Code ved hjælp af ChatGPT-udvidelsen.

For eksempel er her en detaljeret dokumentation af en Zoom-link oprettelsesfunktion (i HTML-format), som vi genererede ved hjælp af VS Code ChatGPT-udvidelsen:

Kod effektivt med ChatGPT i VS-kode

Som programmør i et hastigt tempo internet ønsker du at opnå et minimum levedygtigt produkt på den korteste minimumstid. Selvom ChatGPT ikke er helt pålidelig, kan det hjælpe din udviklingsrejse, hvis det bruges kreativt. Og der er mange flere use cases af ChatGPT i programmering. Men med alt det sagt, sørg for at validere ChatGPTs resultater, da de nogle gange kan være vildledende.