Übung – Einrichten von GitHub Copilot für die Arbeit mit Visual Studio Code

Abgeschlossen

In dieser Übung erstellen wir ein neues Repository unter Verwendung der GitHub-Vorlage der JavaScript-Front-End-Webanwendung für persönliche Portfolios.

Zugriff auf GitHub Copilot

Um GitHub Copilot zu verwenden, müssen Sie die folgenden Schritte ausführen:

  1. GitHub-Konto:

    • Erstellen Sie bei Bedarf ein GitHub-Konto.
    • Da Copilot ein GitHub-Dienst ist, benötigen Sie ein GitHub-Konto, um ihn zu verwenden.
  2. Überprüfung des Zugriffs auf Copilot:

    • Informieren Sie sich über die Copilot-Preispläne für Ihre Situation.
    • Für Lerninhalte sollte die Copilot Free-Option mit Nutzungsgrenzwerten ausreichen. Sie hat folgenden Inhalt:
      • Zugriff auf Inline-Codevervollständigungen
      • Bearbeiten von mehreren Dateien
      • Copilot Chat
      • Auswählen von mehreren Modellen
      • Unterstützen in allen Editoren und auf github.com

Hinweis

Lehrkräfte, Lernende und ausgewählte Open-Source-Maintainer können Copilot Pro kostenlos nutzen. Wie dies funktioniert, erfahren Sie unter: https://aka.ms/Copilot4Students

  1. Überprüfen Sie, ob der Zugriff auf Copilot aktiviert ist:

    • Wechseln Sie in GitHub zu Ihrem Profil und dann zu Einstellungen.
    • Wählen Sie im linken Navigationsbereich Copilot aus.
    • Überprüfen Sie, ob Copilot aktiv ist und Copilot-Chat in der IDE aktiviert ist.
  2. Installieren der Erweiterung:

    • Erweiterungen sind für wichtige IDEs wie Visual Studio und Visual Studio Code, JetBrains IDEs, VIM und Xcode verfügbar.
    • Suchen Sie einfach auf dem Erweiterungsmarktplatz Ihrer IDE nach GitHub Copilot und installieren Sie die Erweiterung.

Einrichten der Umgebung

Zuerst müssen Sie die Codespaces-Umgebung starten, die mit der GitHub Copilot-Erweiterung vorkonfiguriert ist.

  1. Wählen Sie die folgende Schaltfläche aus, um den Codespace mit der vorkonfigurierten Umgebung zu öffnen.

    In GitHub Codespaces öffnen

  2. Überprüfen Sie auf der Seite Codespace erstellen die Codespace-Konfigurationseinstellungen, und wählen Sie dann Neuen Codespace erstellen aus.

  3. Warten Sie den Start des Codespaces ab. Dieser Startvorgang kann einige Minuten dauern.

  4. Die restlichen Übungen in diesem Projekt finden im Kontext dieses Entwicklungscontainers statt.

Wichtig

Alle GitHub-Konten können Codespaces für bis zu 60 Stunden pro Monat mit zwei Kerninstanzen kostenlos verwenden. Weitere Informationen finden Sie im Artikel zu monatlich enthaltener Speicherkapazität und Kernstunden in GitHub Codespaces.

JavaScript-Portfolio

Nach Abschluss wird Codespaces mit einem Terminalabschnitt am unteren Rand geladen. Codespaces installiert alle erforderlichen Erweiterungen und Abhängigkeiten in Ihrem Container. Nach Abschluss des Vorgangs ist diese Vorlage so konfiguriert, dass npm start verwendet wird, um die Webanwendung in Ihrem Codespace zu starten.

Wenn die Webanwendung erfolgreich gestartet wurde, zeigt eine Meldung im Terminal an, dass der Server an Port 1234 im Codespace ausgeführt wird.