Breng uw codeerproductiviteit naar een hoger niveau door ChatGPT te integreren met VS Code.
U kunt de baas zijn over uw taken en uw productiviteit verhogen wanneer u leert gebruik te maken van de AI-tools die dagelijks uit onderzoekslaboratoria komen. VS Code beschikt over de ChatGPT-extensie om u een OpenAI-compatibele coderingsomgeving te bieden.
U kunt gebruikmaken van het uitgebreide coderingsmodel van ChatGPT om uw projecten efficiënter en sneller te voltooien, rechtstreeks in de IDE. Hier zijn handige manieren waarop u ChatGPT met VS Code kunt gebruiken.
Hoe de ChatGPT-extensie in VS Code te installeren en te gebruiken
Wanneer u zoekt naar "ChatGPT" of "Code GPT" in de VS Code-extensiemarktplaats, verschijnen er veel gerelateerde extensies. In tegenstelling tot GitHub Copilot zijn deze niet officieel rechtstreeks van OpenAI.
De meeste gesamplede VS Code ChatGPT-extensies werken echter op dezelfde manier. Maar we houden ons eraan De ChatGPT-extensie van EasyCode voor dit artikel, omdat het behoorlijk goed is voor het demonstreren van ChatGPT-use-cases in VS Code. Het ondersteunt GPT-4 en GPT-3.5, heeft een gratis laag en vereist geen API-sleutel.
De ChatGPT-extensie in VS Code installeren:
- Open VS Code en klik op het instellingenpictogram linksonder in de linkerzijbalk.
- Ga naar Extensies.
- U kunt ook op drukken Ctrl+Shift+X (Command + Shift + X voor Mac) om de marktplaats voor extensies direct te openen.
- Typ "ChatGPT - EasyCode" in de zoekbalk linksboven.
- Klik op de extensie wanneer deze wordt gezien.
- Klik ten slotte Installeren.
- Na installatie ziet u het extensiepictogram in de linkerzijbalk.
- Klik op het extensiepictogram. Klik Probeer zonder account. Maar voel je vrij om Aanmelden als je een account hebt of Aanmelden voor een nieuw account bij de extensieprovider.
Hoe de ChatGPT-extensie te gebruiken
- Als u een ingebouwde prompt wilt gebruiken, markeert u de doelcode en klikt u er met de rechtermuisknop op. Selecteer een van de beschikbare prompts.
- Als u een aangepaste prompt wilt schrijven, klikt u met de rechtermuisknop op de gemarkeerde code en selecteert u Ask GPT. Typ uw prompt in het chatvenster bovenaan en druk op Binnenkomen.
Hoe u de ChatGPT-extensie gebruikt met uw codebasis
Als u VS Code heeft geopend in uw codebasismap en u wilt dat ChatGPT toegang heeft tot onderliggende modules:
- Klik op het extensiepictogram in de linkerzijbalk. Controleer dan de Vraag Codebase doos.
- Kopieer de doelcode en plak deze in de chatbox.
- Typ uw prompt onder de code (druk op Verschuiving + Enter) in de chatbox.
- druk op Binnenkomen of klik op het verzendpictogram.
Laten we nu eens kijken naar de verschillende manieren om ChatGPT in VS Code te gebruiken.
1. Refactor en code wijzigen
ChatGPT is nuttig gebleken voor het wijzigen van procedurele, functionele en objectgeoriënteerde code.
Met deze extensie hebben we ChatGPT bijvoorbeeld gevraagd om de foutieve code hieronder te refactoren, een Python-functie om een willekeurig woordenboek te maken en 'Kopen' aan elke waarde toe te voegen.
defmaakDict(n: str, **kwargs)->dict:
sommige: dict
voor sleutel waarde in kwargs.items():
sommige = n+" "+waarde
opbrengst sommige
nieuwDict = maakDict("Kopen", item1="GPT-boek", item2="Java-zelfstudie", item3="Wandelgids")
Het deed het redelijk goed om de juiste code te produceren die de verwachte uitvoer geeft, met gedetailleerde redenen voor de wijziging:
Verder kunt u gebruik maken van de Vraag een vervolg box om ChtGPT te vertellen de code om te zetten in een klasse en te laten zien hoe deze moet worden geïnstantieerd:
De gegenereerde code hierboven is meer modulair en herbruikbaar.
2. Foutopsporing in uw code
Als uw code een fout genereert of niet werkt zoals zou moeten, bespaart u tijd door ChatGPT te vragen om deze rechtstreeks in VS Code te debuggen.
Hoewel er geen ingebouwde prompt voor foutopsporing is, kunt u de Vraag GPT optie om een aangepaste prompt te maken om uw code te debuggen.
We hebben de ChatGPT-extensie gevraagd om de code te debuggen die we eerder gebruikten. Het debugde niet alleen. Het legde het uit en genereerde de juiste, inclusief de verwachte output.
3. Schrijf uw code in een andere taal
Misschien wil je naast je kern een programma in een bepaalde taal schrijven. U kunt uw code schrijven in uw kerntaal en ChatGPT vragen deze te herschrijven in de gekozen programmeertaal.
De gegenereerde code vereist mogelijk echter weinig menselijke input, omdat ChatGPT in sommige gevallen mogelijk geen volledig werkende geconverteerde code levert.
We hebben bijvoorbeeld de volgende Python-code geconverteerd naar zijn C-equivalent met behulp van de VS Code ChatGPT-extensie:
U kunt dit bereiken door met de rechtermuisknop op de gemarkeerde code te klikken en de Vraag GPT keuze.
Dit is onze prompt in VS Code:
Hoewel het het C-equivalent twee keer heeft gegenereerd voordat het goed was, werkt de uiteindelijke code.
4. Genereer een frontend-component voor uw API
Als je een API met verschillende eindpunten hebt geschreven, kun je de ChatGPT-extensie vragen om een frontend-component te leveren om deze te gebruiken met een bepaald framework. Dit kan React, Vue of Angular zijn.
We hebben de extensie bijvoorbeeld gebruikt om een React-component te genereren voor het maken van een vergaderschema op basis van een API-eindpunt dat is gemaakt met Python's FastAPI:
Zoals hierboven gedaan, wilt u misschien de Vraag Codebase box als je te maken hebt met een grote codebasis.
Na te hebben verwezen naar onze codebasis, bood de VS Code ChatGPT-extensie een handige React-component om het geleverde eindpunt te gebruiken:
5. Leg codeblokken uit
Stel dat je een stukje code hebt gepakt van Stack Overflow of een GitHub-repository. U kunt de ChatGPT-extensie in VS Code vragen om uit te leggen hoe het werkt voor een beter begrip. Dit helpt u dergelijke code gemakkelijk te debuggen als er bugs optreden als gevolg van toekomstige codewijzigingen.
In dit voorbeeld hebben we de ChatGPT-extensie gevraagd om de volgende code uit te leggen; een Python-klasse voor het verifiëren van e-mailadressen van gebruikers.
Het leverde de volgende reactie op:
6. Genereer HTML-sjablonen voor uw toepassing
Met behulp van de ChatGPT-extensie in VS Code kunt u een HTML-sjabloon (zoals invoervelden) helemaal opnieuw maken, rechtstreeks met behulp van de extensie-chatbox. U kunt het bijvoorbeeld vertellen om een HTML-sjabloon te maken voor gebruikersregistratie.
Maar wat als u een toepassing schrijft die gegevens rechtstreeks in HTML weergeeft (een niet-SPA) en een projectspecifieke sjabloon wilt? U kunt de ChatGPT-extensie in VS Code gebruiken om HTML-sjablonen te maken die de backend-gegevens aan gebruikers weergeven.
Als u bijvoorbeeld een Op MVT-architectuur gebaseerd raamwerk zoals Django, kunt u de extensie gebruiken om HTML-sjablonen te vervalsen voor uw Django-weergaven.
Nogmaals, voor dit type use-case wilt u misschien op de Vraag Codebase selectievakje voor ChatGPT om toegang te krijgen tot uw codebasis.
7. Unit-test uw code
Hoe essentieel het testen van eenheden ook is, het kan een tijdrovende bezigheid zijn. U kunt de VS Code ChatGPT-extensie gebruiken om unit-tests voor uw code te genereren en waardevolle ontwikkelingstijd te besparen.
Hoewel de ChatGPT-extensie een ingebouwde prompt heeft voor het genereren van unit-tests, wilt u misschien een aangepaste prompt schrijven met behulp van de Vraag Codebase optie voor specificiteit en een beter resultaat.
We hebben ChatGPT gevraagd om een unit-test te schrijven voor een registratie-eindpunt gemaakt met Python's FastAPI:
Het bemonsterde de codebasis efficiënt om de vereiste unit-test te genereren:
8. Vind potentiële beveiligingsproblemen
Hoewel het misschien geen gedetailleerde beveiligingsanalyse biedt, kan de VS Code ChatGPT-extensie een handig hulpmiddel zijn om snel controleer op beveiligingsproblemen in uw toepassing code base en bespaart u tijd bij het handmatig scannen.
Om ChatGPT toe te staan je codebase te scannen, gebruik je de Vraag Codebase optie (klik op het extensiepictogram en vink het Vraag Codebase doos).
Als je je gewoonlijk een weg baant rond een of ander oud of nieuwe VS Code-functies, voel je vrij om je weg te vragen in de IDE vanuit de ChatGPT-extensie.
U kunt de extensie bijvoorbeeld vragen om de beste extensies aan te bevelen voor het debuggen van een bepaalde programmeertaal.
Of u kunt het een meer technische vraag stellen, zoals hoe u VS Code opent vanaf de opdrachtregel.
10. Schrijf documentatie rechtstreeks vanuit VS Code
U kunt eenvoudig gedetailleerde documentatie voor een stuk code rechtstreeks vanuit VS Code schrijven met behulp van de ChatGPT-extensie.
Hier is bijvoorbeeld een gedetailleerde documentatie van een functie voor het maken van zoomlinks (in HTML-indeling) die we hebben gegenereerd met de VS Code ChatGPT-extensie:
Efficiënt coderen met ChatGPT in VS Code
Als programmeur in een razendsnel internet wil je in de kortst mogelijke tijd een minimaal levensvatbaar product realiseren. Hoewel ChatGPT niet helemaal betrouwbaar is, kan het uw ontwikkelingstraject helpen als het creatief wordt gebruikt. En er zijn nog veel meer use-cases van ChatGPT bij het programmeren. Dat gezegd hebbende, zorg er echter voor dat u de resultaten van ChatGPT valideert, aangezien deze soms misleidend kunnen zijn.