10 Möglichkeiten, wie Sie ChatGPT mit VS-Code verwenden können (2023)

Leser wie Sie unterstützen MUO. Wenn Sie über Links auf unserer Website einen Kauf tätigen, erhalten wir möglicherweise eine Affiliate-Provision.Weiterlesen.

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 Forschungslaboren 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 dabeiDie ChatGPT-Erweiterung von EasyCodefü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 zuErweiterungen.
    10 Möglichkeiten, wie Sie ChatGPT mit VS-Code verwenden können (1)
  3. Alternativ drücken SieStrg + Umschalt + X(Befehl + Umschalt + Xfü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ßendInstallieren.
    10 Möglichkeiten, wie Sie ChatGPT mit VS-Code verwenden können (2)
  7. Nach der Installation wird das Erweiterungssymbol in der linken Seitenleiste angezeigt.
  8. Klicken Sie auf das Erweiterungssymbol. KlickenVersuchen Sie es ohne Konto. Aber zögern Sie nichtAnmeldenwenn Sie ein Konto haben oderAnmeldungfür ein neues Konto beim Erweiterungsanbieter.
    10 Möglichkeiten, wie Sie ChatGPT mit VS-Code verwenden können (3)

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.
    10 Möglichkeiten, wie Sie ChatGPT mit VS-Code verwenden können (4)
  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 SieEingeben.
    10 Möglichkeiten, wie Sie ChatGPT mit VS-Code verwenden können (5)

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:

10 Möglichkeiten, wie Sie ChatGPT mit VS-Code verwenden können (6)
  1. Klicken Sie auf das Erweiterungssymbol in der linken Seitenleiste. Dann überprüfen Sie dieFragen Sie CodebaseKasten.
  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 SieUmschalt + Eingabetaste) im Chat-Feld.
  4. Drücken SieEingebenoder 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.

 def makeDict(n: str, **kwargs)->dict:
einige: dict
    fürSchlüsselwertInkwargs.items():
einige = n+" "+Wert
    zurückkehrenmanche

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:

10 Möglichkeiten, wie Sie ChatGPT mit VS-Code verwenden können (7)

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

10 Möglichkeiten, wie Sie ChatGPT mit VS-Code verwenden können (8)

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 verwendenFragen Sie GPTOption 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.

10 Möglichkeiten, wie Sie ChatGPT mit VS-Code verwenden können (9)

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:

10 Möglichkeiten, wie Sie ChatGPT mit VS-Code verwenden können (10)

Dies erreichen Sie, indem Sie mit der rechten Maustaste auf den hervorgehobenen Code klicken und den auswählenFragen Sie GPTMöglichkeit.

Hier ist unsere Eingabeaufforderung in VS Code:

10 Möglichkeiten, wie Sie ChatGPT mit VS-Code verwenden können (11)

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

10 Möglichkeiten, wie Sie ChatGPT mit VS-Code verwenden können (12)

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:

10 Möglichkeiten, wie Sie ChatGPT mit VS-Code verwenden können (13)

Wie oben beschrieben, möchten Sie vielleicht das überprüfenFragen Sie CodebaseBox, 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:

10 Möglichkeiten, wie Sie ChatGPT mit VS-Code verwenden können (14)

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.

10 Möglichkeiten, wie Sie ChatGPT mit VS-Code verwenden können (15)

Es wurde die folgende Antwort generiert:

10 Möglichkeiten, wie Sie ChatGPT mit VS-Code verwenden können (16)

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.

10 Möglichkeiten, wie Sie ChatGPT mit VS-Code verwenden können (17)

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 verwendenAuf der MVT-Architektur basierendes Framework wie Djangokönnen Sie mit der Erweiterung HTML-Vorlagen für Ihre Django-Ansichten erstellen.

10 Möglichkeiten, wie Sie ChatGPT mit VS-Code verwenden können (18)

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

7. Unit-Testen Sie Ihren Code

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 schreibenFragen Sie CodebaseOption 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:

10 Möglichkeiten, wie Sie ChatGPT mit VS-Code verwenden können (19)

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

10 Möglichkeiten, wie Sie ChatGPT mit VS-Code verwenden können (20)

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ückenCodebasis und sparen Sie Zeit beim manuellen Scannen.

10 Möglichkeiten, wie Sie ChatGPT mit VS-Code verwenden können (21)

Damit ChatGPT Ihre Codebasis scannen kann, verwenden Sie dieFragen Sie CodebaseOption (klicken Sie auf das Erweiterungssymbol und aktivieren Sie die OptionFragen Sie CodebaseKasten).

Wenn Sie sich normalerweise durch alte oder alte Spiele herumspielenneue 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.

10 Möglichkeiten, wie Sie ChatGPT mit VS-Code verwenden können (22)

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

10 Möglichkeiten, wie Sie ChatGPT mit VS-Code verwenden können (23)

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:

10 Möglichkeiten, wie Sie ChatGPT mit VS-Code verwenden können (24)

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.

Top Articles
Latest Posts
Article information

Author: Nicola Considine CPA

Last Updated: 04/20/2023

Views: 5243

Rating: 4.9 / 5 (49 voted)

Reviews: 88% of readers found this page helpful

Author information

Name: Nicola Considine CPA

Birthday: 1993-02-26

Address: 3809 Clinton Inlet, East Aleisha, UT 46318-2392

Phone: +2681424145499

Job: Government Technician

Hobby: Calligraphy, Lego building, Worldbuilding, Shooting, Bird watching, Shopping, Cooking

Introduction: My name is Nicola Considine CPA, I am a determined, witty, powerful, brainy, open, smiling, proud person who loves writing and wants to share my knowledge and understanding with you.