Erste Schritte mit GitHub Copilot in Visual Studio Code

Teste GitHub Copilot

Informationen zu GitHub Copilot und Visual Studio Code

GitHub Copilot unterbreitet dir während des Programmierens als KI-Paarprogrammierer AutoVervollständigen-Vorschläge. Weitere Informationen findest du unter Informationen zu GitHub Copilot.

Wenn du Visual Studio Code verwendest, kannst du Vorschläge aus GitHub Copilot direkt im Editor anzeigen und übernehmen. Diese Anleitung zeigt die Verwendung von GitHub Copilot innerhalb von Visual Studio Code für macOS, Windows oder Linux.

Voraussetzungen

• Um GitHub Copilot verwenden zu können, benötigst du ein aktives GitHub Copilot-Abonnement. Weitere Informationen findest du unter Informationen zur Abrechnung für GitHub Copilot.

• Um GitHub Copilot in Visual Studio Code zu verwenden, muss Visual Studio Code installiert sein. Weitere Informationen findest du auf der Downloadseite zu Visual Studio Code.

Installation der Visual Studio Code-Erweiterung

Um GitHub Copilot zu verwenden, musst du zuerst die Visual Studio Code-Erweiterung installieren.

1. Wechsele im Visual Studio Code-Marketplace zur Seite GitHub Copilot-Erweiterung, und klicke auf Installieren.
2. Ein Popupfenster mit der Abfrage, ob Visual Studio Code geöffnet werden soll, wird angezeigt. Klicke auf Visual Studio Code öffnen.
3. Klicke auf der Registerkarte „Erweiterung: GitHub Copilot“ in Visual Studio Code auf Installieren.
4. Wenn du Visual Studio Code noch nicht in deinem GitHub-Konto autorisiert hast, wirst du aufgefordert, dich bei GitHub in Visual Studio Code anzumelden.
   • Wenn du zuvor Visual Studio Code für dein Konto auf GitHub autorisiert hast, wird GitHub Copilot automatisch autorisiert.
5. In deinem Browser wird GitHub die notwendigen Berechtigungen für GitHub Copilot anfordern. Um diese Berechtigungen zu genehmigen, klicke auf Visual Studio Code autorisieren.
6. Klicke in Visual Studio Code im Dialogfeld „Visual Studio Code“ auf Öffnen, um die Authentifizierung zu bestätigen.

Anzeigen deines ersten Vorschlags

GitHub Copilot bietet Vorschläge für zahlreiche Sprachen und eine vielzahl von Frameworks, funktioniert aber besonders gut für Python, JavaScript, TypeScript, Ruby, Go, C# und C++. Die folgenden Beispiele sind in JavaScript enthalten, andere Sprachen funktionieren jedoch ähnlich.

1. Erstelle in Visual Studio Code eine neue JavaScript-Datei ( *.js).
2. Gib in der JavaScript-Datei den folgenden Funktionsheader ein. GitHub Copilot schlägt automatisch einen ganzen Funktionstext in ausgegrautem Text vor, wie unten gezeigt. Der genaue Vorschlag kann variieren.
   JavaScript

   function calculateDaysBetweenDates(begin, end) {

   1. Um den Vorschlag zu akzeptieren, drücke die TAB-TASTE.

Anzeigen alternativer Vorschläge

Für jede Eingabe kann GitHub Copilot mehrere Vorschläge anbieten. Du kannst auswählen, welche Vorschläge verwendet werden sollen, oder alle Vorschläge ablehnen.

1. Erstelle in Visual Studio Code eine neue JavaScript-Datei ( *.js).

2. Gib in der JavaScript-Datei den folgenden Funktionsheader ein. GitHub Copilot zeigt dir einen Vorschlag an.

   JavaScript

   function calculateDaysBetweenDates(begin, end) {

3. Optional kannst du dir, falls vorhanden, alternative Vorschläge anzeigen lassen.

   OS	Nächsten Vorschlag anzeigen	Vorherigen Vorschlag anzeigen
   macOS	Option (⌥) oder ALT+]	Option (⌥) oder ALT+[
   Windows	ALT+]	ALT+[
   Linux	ALT+]	ALT+[

4. Alternativ kannst du mit dem Mauszeiger auf den Vorschlag zeigen, um die GitHub Copilot-Befehlspalette zur Anzeige von Vorschlägen auszuwählen.

5. Um einen Vorschlag anzunehmen, drücke die TAB-TASTE. Um alle Vorschläge abzulehnen, drücke ESC.

Anzeigen mehrerer Vorschläge auf einer neuen Registerkarte

Es kann sein, dass du keinen der anfänglichen Vorschläge von GitHub Copilot befolgen möchtest. Mittels einer Tastenkombination kannst du GitHub Copilot dazu auffordern, dir mehrere Vorschläge in einer neuen Registerkarte anzuzeigen.

1. Erstelle in Visual Studio Code eine neue JavaScript-Datei ( *.js).
2. Gib in der JavaScript-Datei den folgenden Funktionsheader ein. GitHub Copilot zeigt dir einen Vorschlag an.
   JavaScript

   function calculateDaysBetweenDates(begin, end) {

3. Um eine neue Registerkarte mit mehreren zusätzlichen Optionen zu öffnen, drücke STRG+EINGABETASTE.
4. Um einen Vorschlag zu akzeptieren, klicke oberhalb des Vorschlags auf Lösung annehmen. Um alle Vorschläge abzulehnen, schließe die Registerkarte.

Generieren von Codevorschlägen aus Kommentaren

Sie können in einem Kommentar Ihre Absicht in natürlicher Sprache beschreiben, woraufhin GitHub Copilot den Code vorschlägt, mit dem Sie Ihr Ziel erreichen.

1. Erstelle in Visual Studio Code eine neue JavaScript-Datei ( *.js).
2. Gib in der JavaScript-Datei den folgenden Kommentar ein. GitHub Copilot schlägt eine Implementierung der Funktion vor.
   JavaScript

   // find all images without alternate text
   // and give them a red border
   function process() {

Verwenden eines Frameworks

Du kannst auch mit GitHub Copilot Vorschläge für APIs und Frameworks generieren. Im folgenden Beispiel wird mit GitHub Copilot ein einfacher Express-Server erstellt, der die aktuelle Uhrzeit zurückgibt.

1. Erstelle in Visual Studio Code eine neue JavaScript-Datei ( *.js).
2. Gib in der JavaScript-Datei den folgenden Kommentar ein, und drücke dann die EINGABETASTE. GitHub Copilot schlägt eine Implementierung der Express-App vor.
   JavaScript

   // Express server on port 3000

3. To accept each line, press Tab, then Enter.
4. Type the following comment and then press Enter. GitHub Copilot will suggest an implementation for the default handler.
   JavaScript

   // Return the current time

5. Um jede Zeile zu akzeptieren, drücke die TABULATORTASTE.

Aktivieren oder Deaktivieren von GitHub Copilot

Du kannst GitHub Copilot in Visual Studio Code aktivieren oder deaktivieren. Das Statussymbol GitHub Copilot im unteren Bereich des Visual Studio Code-Fensters gibt an, ob GitHub Copilot aktiviert oder deaktiviert ist. Wenn es aktiviert ist, stimmt die Hintergrundfarbe des Symbols mit der Farbe der Statusleiste überein. Ist es deaktiviert, kontrastiert die Hintergrundfarbe des Symbols mit der Farbe der Statusleiste.

1. Zum Aktivieren oder Deaktivieren von GitHub Copilot klicke im unteren Bereich des Visual Studio Code-Fensters auf das Statussymbol.

2. Wenn du GitHub Copilot deaktivierst, wirst du gefragt, ob du Vorschläge global oder für die Sprache der aktuell bearbeiteten Datei deaktivieren möchtest.

   • Um Vorschläge von GitHub Copilot global zu deaktivieren, klicke auf Global deaktivieren.
   • Wenn du Vorschläge von GitHub Copilot für die angegebene Sprache deaktivieren möchtest, klicke auf Für SPRACHE deaktivieren.

Weitere Informationsquellen

• GitHub Copilot