Skriptum 09 · DW2

GitHub Copilot

Installation · Bedienung · Tipps & Tricks für VS Code

Hier lernst du

Installation

Copilot in VS Code einrichten

Shortcuts

Die wichtigsten Tastenkürzel

Chat & Befehle

Slash-Commands und Kontext-Variablen

Tipps

Profi-Tricks für den Alltag

1 Was ist GitHub Copilot?

GitHub Copilot ist ein KI-Assistent direkt im Editor. Er analysiert deinen Code und Kommentare in Echtzeit und schlägt automatisch Code-Vervollständigungen vor — von einzelnen Zeilen bis zu ganzen Funktionen.

Dazu kommt Copilot Chat: ein eingebetteter KI-Chatbot, dem du Fragen stellen, Code erklären lassen oder Fehler analysieren kannst — ohne den Editor zu verlassen.

Kostenlos testen: Es gibt eine 30-Tage-Testversion oder einen eingeschränkten Free-Plan.

2 Installation

1

GitHub-Account anlegen / anmelden

Auf github.com registrieren oder einloggen.

2

Extensions in VS Code installieren

Extensions-Panel öffnen (Ctrl+Shift+X) und beide Plugins suchen und installieren:

GitHub Copilot

Inline-Vorschläge im Editor

GitHub Copilot Chat

Chat-Interface & Inline-Chat

3

Mit GitHub anmelden

Nach der Installation erscheint unten rechts in VS Code ein Copilot-Symbol. Darauf klicken → Sign in to GitHub → Browser öffnet sich → Zugriff erlauben → fertig.

4

Funktion testen

Eine .php-Datei öffnen, einen Kommentar schreiben wie // Verbindung zur Datenbank herstellen — Copilot sollte nach kurzer Pause einen Vorschlag in grau einblenden.

Copilot ist aktiv wenn …

  • ✓ Das Copilot-Icon unten rechts in der Statusleiste ist weiß (nicht durchgestrichen)
  • ✓ Beim Tippen erscheinen graue Vorschläge im Editor (Ghost Text)
  • ✓ Ctrl+Shift+I öffnet das Chat-Panel

3 Die zwei Modi

Modus 1: Inline Suggestions

Copilot schaut beim Tippen zu und blendet Vorschläge direkt im Editor ein — als grauer „Ghost Text".

// Funktion die prüft ob eine E-Mail gültig ist
function isValidEmail($email) {
  ◀ Copilot schlägt hier vor ▶
  return filter_var($email, FILTER_VALIDATE_EMAIL);
}
Vorschlag übernehmen
Tab
Ablehnen
Esc
Nächster Vorschlag
Alt+]
Vorheriger Vorschlag
Alt+[
Nur erstes Wort übernehmen
Ctrl+→
Alle Vorschläge anzeigen
Ctrl+Enter
Modus 2: Copilot Chat

Ein vollwertiger Chat direkt in VS Code. Hier kannst du Fragen stellen, Code erklären lassen oder komplexe Aufgaben beschreiben.

Chat öffnen (Seitenleiste)
Ctrl+Shift+I
Inline Chat im Editor
Ctrl+I
Auswahl erklären lassen
Code markieren → Ctrl+I
Neue Chat-Unterhaltung
Ctrl+L
Chat-Verlauf
Ctrl+Alt+L
Tipp: Inline Chat (Ctrl+I) direkt im Code ist oft schneller als der seitliche Chat — Copilot sieht sofort, wo du arbeitest.

4 Slash-Commands im Chat

Im Chat-Fenster könnt ihr spezielle Befehle mit / einleiten. Das gibt Copilot einen klaren Auftrag, statt einer freien Frage.

/explain

Code erklären

Markierten Code oder die aktuelle Datei in einfacher Sprache erklären lassen. Ideal wenn ihr fremden Code verstehen müsst.

Beispiel: /explain Was macht diese PDO-Abfrage genau?

/fix

Fehler beheben

Markierten Code oder Fehlermeldung an Copilot schicken — er analysiert das Problem und schlägt eine Korrektur vor.

Beispiel: Fehlermeldung kopieren → /fix davor setzen

/doc

Dokumentation generieren

Für eine Funktion oder Klasse automatisch Kommentare und Beschreibungen erstellen lassen.

/tests

Tests generieren

Für markierten Code automatisch Unit-Tests vorschlagen.

/new

Neue Datei erstellen

Copilot erstellt eine neue Datei mit dem beschriebenen Inhalt direkt im Projekt-Ordner.

Beispiel: /new Erstelle db.php mit PDO-Verbindung zu quiz_db

5 Kontext-Variablen mit # und Agents mit @

Copilot weiß nur, was ihr ihm zeigt. Mit #variable und @agent gebt ihr gezielt Kontext — das macht die Antworten viel präziser.

# Kontext-Variablen

#file

Eine bestimmte Datei als Kontext anhängen. „Schau dir #file:db.php an und erkläre die Verbindung."

#selection

Den aktuell markierten Code im Editor referenzieren.

#editor

Den gesamten Inhalt der aktuell geöffneten Datei einbeziehen.

#codebase

Copilot durchsucht das gesamte Projekt nach relevanten Dateien.

@ Chat-Agents

@workspace

Fragen über das gesamte Projekt stellen. „@workspace Wo wird die PDO-Verbindung verwendet?"

@vscode

Fragen zu VS Code selbst: Einstellungen, Shortcuts, Features.

@terminal

Hilfe zu Terminal-Befehlen und Shell-Skripten.

Kombination: @workspace /explain #file:frage.php — sehr präzise!

6 Tipps & Tricks

Zuerst kommentieren, dann tippen

Ein guter Kommentar ist der beste Prompt für Inline-Suggestions. Copilot liest den Kommentar und generiert passenden Code darunter.

// Alle Highscores aus der DB laden,
// absteigend nach Punkten, max. 10 Einträge
← Copilot schreibt den Rest

Was gute Kommentare für Copilot enthalten:

  • Was die Funktion tun soll
  • Welche Variablen/Tabellen beteiligt sind
  • Was zurückgegeben werden soll
  • Besondere Bedingungen oder Einschränkungen
Fehlermeldungen direkt einfügen

Wenn PHP einen Fehler wirft, kopiert die Fehlermeldung komplett in den Chat. Copilot versteht Fehlermeldungen sehr gut.

// Im Copilot Chat eingeben:
/fix Fatal error: Uncaught PDOException: SQLSTATE[HY000]
[2002] No connection could be made because the target
machine actively refused it in db.php:8

→ Copilot erklärt: XAMPP läuft nicht oder Hostname ist falsch.

Relevante Dateien offen halten

Copilot schaut sich die geöffneten Tabs an, um Kontext zu gewinnen. Wenn ihr an frage.php arbeitet, solltet ihr db.php ebenfalls geöffnet haben — dann kennt Copilot die Datenbankstruktur automatisch.

Iterieren statt neu anfangen

Wenn Copilots Antwort nicht passt, einfach nachfassen — im selben Chat-Verlauf. Copilot erinnert sich an den bisherigen Kontext.

„Schreib frage.php"
„Füge noch eine Fortschrittsanzeige hinzu"
„Mach den Submit-Button größer und grün"
Fremden Code verstehen

Unbekannten Code markieren und einfach fragen:

Was macht dieser Code?

Erkläre Zeile für Zeile.

Welche Sicherheitsprobleme siehst du hier?

Schreib das als Funktion um.

7 Projekt-Anweisungen: .github/copilot-instructions.md

Was ist das?

Eine Markdown-Datei im Ordner .github/ eures Projekts. Copilot liest sie automatisch bei jedem Chat und jeder Inline-Suggestion — ihr müsst sie nicht jedes Mal anhängen.

Wofür braucht man sie?

Copilot kennt euer Projekt nicht — er rät. Mit dieser Datei gebt ihr ihm dauerhaften Kontext: Datenbankstruktur, Namensregeln, Tech-Stack, was erlaubt ist und was nicht. Besserer Kontext = bessere Vorschläge.

Wo anlegen: Ordner .github/ im Root eures Projekts erstellen, darin die Datei copilot-instructions.md anlegen. VS Code und GitHub Copilot erkennen sie automatisch.

Beispiel für das Quiz-Projekt aus dieser Übung:

.github/copilot-instructions.md
# Copilot-Anweisungen: PHP Quiz-Projekt

## Tech-Stack
- PHP 8, MySQL, XAMPP (localhost)
- Kein Framework – reines PHP
- Datenbankzugriff ausschließlich über PDO mit Prepared Statements
- Kein jQuery, kein Bootstrap

## Datenbankstruktur
```sql
CREATE TABLE fragen (
  id INT PRIMARY KEY AUTO_INCREMENT,
  frage TEXT NOT NULL,
  antwort_a, antwort_b, antwort_c VARCHAR(255),
  richtige_antwort CHAR(1) -- 'a', 'b' oder 'c'
);
CREATE TABLE highscores (
  id INT PRIMARY KEY AUTO_INCREMENT,
  name VARCHAR(100),
  punkte INT,
  erstellt_am TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);
```

## Dateistruktur
- db.php ← PDO-Verbindung, Variable $pdo, wird per require eingebunden
- index.php ← Startseite, Name eingeben, Session starten
- frage.php ← Frage laden + Antwort verarbeiten, $_SESSION['frage_nr']
- ergebnis.php ← Score speichern, Top-10 Highscore anzeigen

## Coding-Regeln
- Benutzereingaben immer mit htmlspecialchars() ausgeben
- SQL ausschließlich mit Prepared Statements ($pdo->prepare + execute)
- Sessions immer mit session_start() am Dateianfang
- Weiterleitungen mit header('Location: datei.php') + exit()
- Kommentare auf Deutsch

Tech-Stack beschreiben

Sprache, Framework, Libraries, was nicht verwendet wird — das verhindert falsche Vorschläge.

DB-Struktur einfügen

Tabellennamen, Spaltennamen und Typen — damit Copilot korrekte SQL-Abfragen und PHP-Code generiert.

Sicherheitsregeln fixieren

„Immer Prepared Statements" als Regel einzutragen ist effektiver als es jedes Mal im Prompt zu wiederholen.

8 Grenzen kennen — was Copilot nicht kann

Kein Zugriff auf

  • Euren laufenden XAMPP-Server oder Browser
  • Den tatsächlichen Zustand eurer Datenbank
  • Dateien die nicht geöffnet/referenziert sind
  • Das Internet (keine aktuellen Infos)

Kann falsch liegen bei

  • Sicherheitskritischen Details (immer selbst prüfen)
  • Projektspezifischer Logik ohne Kontext
  • Sehr neuen PHP-/MySQL-Versionen
  • Komplexer Geschäftslogik (unterschätzt Randfälle)

Immer selbst überprüfen:

✓ Läuft der Code ohne Fehler im Browser?
✓ Werden Benutzereingaben korrekt abgesichert?
✓ Verstehe ich, was jede Zeile tut?

Datenschutz: Euer Code wird zur Analyse an GitHub-Server gesendet. Keine sensiblen Daten (echte Passwörter, API-Keys) im Copilot Chat eingeben.

Kurzreferenz zum Ausdrucken

Shortcuts

Vorschlag annehmenTab
Vorschlag ablehnenEsc
Nächster VorschlagAlt+]
Alle VorschlägeCtrl+Enter
Chat öffnenCtrl+Shift+I
Inline ChatCtrl+I
Neuer ChatCtrl+L

Chat-Befehle

/explainCode erklären
/fixFehler beheben
/docDoku generieren
/testsTests generieren
/newDatei erstellen
@workspaceGanzes Projekt
#file:name.phpDatei als Kontext
DW2 · Skriptum 09 · GitHub Copilot in VS Code