Bringen Sie Ihre Programmierproduktivität auf die nächste Stufe, indem Sie ChatGPT mit VS Code integrieren.

Sie können der Chef Ihrer Aufgaben sein und Ihre Produktivität steigern, wenn Sie lernen, die KI-Tools zu nutzen, die täglich aus Forschungslabors hervorströmen. VS Code verfügt über die ChatGPT-Erweiterung, um Ihnen eine OpenAI-fähige Codierungsumgebung bereitzustellen.

Sie können das umfangreiche Codierungsmodell von ChatGPT nutzen, um Ihre Projekte effizienter und schneller abzuschließen – direkt in der IDE. Hier finden Sie praktische Möglichkeiten, wie Sie ChatGPT mit VS Code verwenden können.

So installieren und verwenden Sie die ChatGPT-Erweiterung in VS Code

Wenn Sie im VS Code-Erweiterungsmarktplatz nach „ChatGPT“ oder „Code GPT“ suchen, werden viele verwandte Erweiterungen angezeigt. Im Gegensatz zu GitHub Copilot stammen diese nicht offiziell direkt von OpenAI.

Die meisten der getesteten VS Code ChatGPT-Erweiterungen funktionieren jedoch auf die gleiche Weise. Aber wir bleiben dabei

instagram viewer
Die ChatGPT-Erweiterung von EasyCode für diesen Artikel, da er für die Demonstration von ChatGPT-Anwendungsfällen in VS Code recht gut geeignet ist. Es unterstützt GPT-4 und GPT-3.5, verfügt über ein kostenloses Kontingent und erfordert keinen API-Schlüssel.

So installieren Sie die ChatGPT-Erweiterung in VS Code:

  1. Öffnen Sie VS Code und klicken Sie unten links in der linken Seitenleiste auf das Einstellungssymbol.
  2. Gehe zu Erweiterungen.
  3. Alternativ drücken Sie Strg + Umschalt + X (Befehl + Umschalt + X für Mac), um den Marktplatz der Erweiterungen direkt zu öffnen.
  4. Geben Sie „ChatGPT – EasyCode“ in die Suchleiste oben links ein.
  5. Klicken Sie auf die Erweiterung, wenn Sie sie sehen.
  6. Klicken Sie abschließend Installieren.
  7. Nach der Installation wird das Erweiterungssymbol in der linken Seitenleiste angezeigt.
  8. Klicken Sie auf das Erweiterungssymbol. Klicken Versuchen Sie es ohne Konto. Aber zögern Sie nicht Anmelden wenn Sie ein Konto haben oder Anmeldung für ein neues Konto beim Erweiterungsanbieter.

So verwenden Sie die ChatGPT-Erweiterung

  1. Um eine integrierte Eingabeaufforderung zu verwenden, markieren Sie den Zielcode und klicken Sie mit der rechten Maustaste darauf. Wählen Sie eine der verfügbaren Eingabeaufforderungen aus.
  2. Um eine benutzerdefinierte Eingabeaufforderung zu schreiben, klicken Sie mit der rechten Maustaste auf den hervorgehobenen Code und wählen Sie „GPT fragen“. Geben Sie Ihre Aufforderung in das Chatfeld oben ein und drücken Sie Eingeben.

So verwenden Sie die ChatGPT-Erweiterung mit Ihrer Codebasis

Wenn Sie VS Code in Ihrem Codebasisverzeichnis geöffnet haben und möchten, dass ChatGPT auf zugrunde liegende Module zugreift:

  1. Klicken Sie auf das Erweiterungssymbol in der linken Seitenleiste. Dann überprüfen Sie die Fragen Sie Codebase Kasten.
  2. Kopieren Sie den Zielcode und fügen Sie ihn in das Chat-Feld ein.
  3. Geben Sie Ihre Eingabeaufforderung unter dem Code ein (drücken Sie Umschalt + Eingabetaste) im Chat-Feld.
  4. Drücken Sie Eingeben oder klicken Sie auf das Senden-Symbol.

Sehen wir uns nun die verschiedenen Möglichkeiten zur Verwendung von ChatGPT in VS Code an.

1. Code umgestalten und ändern

ChatGPT hat sich beim Ändern von prozeduralem, funktionalem und objektorientiertem Code als hilfreich erwiesen.

Mithilfe dieser Erweiterung haben wir beispielsweise ChatGPT gebeten, den folgenden fehlerhaften Code umzugestalten, eine Python-Funktion, um ein beliebiges Wörterbuch zu erstellen und jedem Wert „Kaufen“ hinzuzufügen.

defmakeDict(n: str, **kwargs)->dict:
 einige: dict
für Schlüsselwert In kwargs.items():
 einige = n+" "+Wert
zurückkehren manche
newDict = makeDict("Besorgen", Artikel1=„GPT-Buch“, Artikel2=„Java-Tutorial“, item3=„Wanderführer“)

Es gelang ziemlich gut, den richtigen Code zu erzeugen, der die erwartete Ausgabe liefert, mit detaillierten Gründen für die Änderung:

Darüber hinaus können Sie die verwenden Bitten Sie um eine Nachverfolgung Feld, um ChtGPT anzuweisen, den Code in eine Klasse zu konvertieren und zu zeigen, wie er instanziiert wird:

Der oben generierte Code ist modularer und wiederverwendbar.

2. Debuggen Sie Ihren Code

Wenn Ihr Code einen Fehler auslöst oder nicht ordnungsgemäß funktioniert, können Sie Zeit sparen, indem Sie ChatGPT bitten, ihn direkt in VS Code zu debuggen.

Obwohl es keine integrierte Eingabeaufforderung zum Debuggen gibt, können Sie die verwenden Fragen Sie GPT Option zum Erstellen einer benutzerdefinierten Eingabeaufforderung zum Debuggen Ihres Codes.

Wir haben die ChatGPT-Erweiterung gebeten, den zuvor verwendeten Code zu debuggen. Es wurde nicht nur debuggt. Es erklärte es und generierte das richtige, einschließlich der erwarteten Ausgabe.

3. Schreiben Sie Ihren Code in einer anderen Sprache

Möglicherweise möchten Sie neben Ihrem Kernprogramm auch ein Programm in einer bestimmten Sprache schreiben. Sie können Ihren Code in Ihrer Kernsprache schreiben und ChatGPT bitten, ihn in der gewählten Programmiersprache neu zu schreiben.

Der generierte Code erfordert jedoch möglicherweise nur wenig menschliche Eingaben, da ChatGPT in einigen Fällen möglicherweise keinen vollständig funktionsfähigen konvertierten Code bereitstellen kann.

Beispielsweise haben wir den folgenden Python-Code mithilfe der VS Code ChatGPT-Erweiterung in sein C-Äquivalent konvertiert:

Dies erreichen Sie, indem Sie mit der rechten Maustaste auf den hervorgehobenen Code klicken und den auswählen Fragen Sie GPT Möglichkeit.

Hier ist unsere Eingabeaufforderung in VS Code:

Obwohl das C-Äquivalent zweimal generiert wurde, bevor es richtig gemacht wurde, funktioniert der endgültige Code.

4. Generieren Sie eine Frontend-Komponente für Ihre API

Wenn Sie eine API mit verschiedenen Endpunkten geschrieben haben, können Sie die ChatGPT-Erweiterung bitten, eine Frontend-Komponente bereitzustellen, um sie mithilfe eines bestimmten Frameworks zu nutzen. Dies kann React, Vue oder Angular sein.

Beispielsweise haben wir die Erweiterung verwendet, um eine React-Komponente zum Erstellen eines Besprechungsplans basierend auf einem API-Endpunkt zu generieren, der mit Pythons FastAPI erstellt wurde:

Wie oben beschrieben, möchten Sie vielleicht das überprüfen Fragen Sie Codebase Box, wenn Sie mit einer großen Codebasis arbeiten.

Nachdem wir auf unsere Codebasis verwiesen hatten, stellte die VS Code ChatGPT-Erweiterung eine praktische React-Komponente zur Verwendung des bereitgestellten Endpunkts bereit:

5. Erklären Sie Codeblöcke

Angenommen, Sie haben einen Code von Stack Overflow oder einem GitHub-Repository abgerufen. Zum besseren Verständnis können Sie die ChatGPT-Erweiterung in VS Code bitten, ihre Funktionsweise zu erklären. Dies hilft Ihnen, solchen Code einfacher zu debuggen, wenn aufgrund zukünftiger Codeänderungen Fehler auftreten.

In diesem Beispielanwendungsfall haben wir die ChatGPT-Erweiterung gebeten, den folgenden Code zu erklären; eine Python-Klasse zur Überprüfung der E-Mail-Adressen von Benutzern.

Es wurde die folgende Antwort generiert:

6. Generieren Sie HTML-Vorlagen für Ihre Anwendung

Mit der ChatGPT-Erweiterung in VS Code können Sie eine HTML-Vorlage (wie Eingabefelder) von Grund auf erstellen – indem Sie das Chat-Feld der Erweiterung direkt verwenden. Sie können es beispielsweise anweisen, eine HTML-Vorlage für die Benutzerregistrierung zu erstellen.

Aber was ist, wenn Sie eine Anwendung schreiben, die Daten direkt in HTML rendert (nicht SPA) und eine projektspezifische Vorlage benötigen? Sie können die ChatGPT-Erweiterung in VS Code verwenden, um HTML-Vorlagen zu erstellen, die den Benutzern die Backend-Daten anzeigen.

Wenn Sie beispielsweise eine verwenden Auf der MVT-Architektur basierendes Framework wie Djangokönnen Sie mit der Erweiterung HTML-Vorlagen für Ihre Django-Ansichten erstellen.

Auch hier gilt: Für diese Art von Anwendungsfall möchten Sie möglicherweise auf klicken Fragen Sie Codebase Kontrollkästchen für ChatGPT, um auf Ihre Codebasis zuzugreifen.

7. Führen Sie einen Unit-Test Ihres Codes durch

So wichtig Unit-Tests auch sind, sie können zeitraubend sein. Sie können die VS Code ChatGPT-Erweiterung nutzen, um Komponententests für Ihren Code zu generieren und wertvolle Entwicklungszeit zu sparen.

Obwohl die ChatGPT-Erweiterung über eine integrierte Eingabeaufforderung zum Generieren von Komponententests verfügt, möchten Sie möglicherweise eine benutzerdefinierte Eingabeaufforderung mit der schreiben Fragen Sie Codebase Option für Spezifität und ein besseres Ergebnis.

Wir haben ChatGPT gebeten, einen Komponententest für einen Registrierungsendpunkt zu schreiben, der mit Pythons FastAPI erstellt wurde:

Es hat die Codebasis effizient abgetastet, um den erforderlichen Komponententest zu generieren:

8. Finden Sie potenzielle Sicherheitslücken

Auch wenn sie möglicherweise keine detaillierte Sicherheitsanalyse bietet, kann die VS Code ChatGPT-Erweiterung ein praktisches Tool sein, um schnell zu helfen Überprüfen Sie Ihre Anwendung auf Sicherheitslücken Codebasis und sparen Sie Zeit beim manuellen Scannen.

Damit ChatGPT Ihre Codebasis scannen kann, verwenden Sie die Fragen Sie Codebase Option (klicken Sie auf das Erweiterungssymbol und aktivieren Sie die Option Fragen Sie Codebase Kasten).

Wenn Sie sich normalerweise durch alte oder alte Spiele herumspielen neue VS-Code-Funktionen, fragen Sie sich gerne in der IDE der ChatGPT-Erweiterung um.

Beispielsweise können Sie die Erweiterung bitten, die besten Erweiterungen zum Debuggen einer bestimmten Programmiersprache zu empfehlen.

Oder Sie können eine eher technische Frage stellen, z. B. wie man VS-Code über die Befehlszeile öffnet.

10. Schreiben Sie Dokumentation direkt aus VS-Code

Mit der ChatGPT-Erweiterung können Sie problemlos eine detaillierte Dokumentation für einen Codeabschnitt direkt aus VS Code schreiben.

Hier ist beispielsweise eine detaillierte Dokumentation einer Zoom-Link-Erstellungsfunktion (im HTML-Format), die wir mit der VS Code ChatGPT-Erweiterung generiert haben:

Effizientes Codieren mit ChatGPT in VS Code

Als Programmierer in einem schnelllebigen Internet möchten Sie in kürzester Zeit ein Produkt mit minimaler Lebensfähigkeit erstellen. Obwohl ChatGPT nicht völlig zuverlässig ist, kann es bei kreativer Nutzung Ihren Entwicklungsweg unterstützen. Und es gibt noch viele weitere Anwendungsfälle von ChatGPT in der Programmierung. Stellen Sie jedoch nach alledem sicher, dass Sie die Ergebnisse von ChatGPT validieren, da diese manchmal irreführend sein können.