✨ Die ultimative Anleitung — 2026 Edition

GitHub Copilot × VS Code
meisterhaft beherrschen

Von der Installation bis zu fortgeschrittenen Techniken — lerne alles, um deine Produktivität mit KI-gestützter Programmierung zu vervielfachen.

20
Kapitel
80+
Tipps
~90
Minuten
1

Was ist GitHub Copilot?

Dein KI-gestützter Programmier-Assistent direkt in VS Code

GitHub Copilot ist ein KI-Pair-Programmer, entwickelt von GitHub und OpenAI. Er analysiert deinen Code, Kommentare und Kontext, um dir intelligente Vorschläge für Code-Vervollständigungen, ganze Funktionen und sogar komplexe Algorithmen zu liefern — direkt in deinem Editor.

💡

Code Completions

Intelligente Vorschläge während du tippst — von einzelnen Zeilen bis zu ganzen Funktionen.

💬

Copilot Chat

Stelle Fragen, lass dir Code erklären oder generiere neue Lösungen im Chat.

✏️

Inline Editing

Bearbeite Code direkt im Editor mit natürlichsprachlichen Anweisungen.

🔍

Code-Analyse

Fehler finden, erklären und Verbesserungsvorschläge erhalten.

🧪

Tests generieren

Automatische Erstellung von Unit-Tests für deine Funktionen.

📝

Git-Integration

Commit-Messages und PR-Beschreibungen automatisch generieren.

💡
Gut zu wissen Copilot ist kein Ersatz für dein Wissen — er ist ein Verstärker. Je besser du programmieren kannst und je klarer deine Anweisungen sind, desto besser werden Copilots Vorschläge.
2

Was kann Copilot alles?

Ein kompletter Überblick über alle Superkräfte

🗺️ Die Copilot-Landkarte — Alles auf einen Blick

GitHub Copilot ist weit mehr als nur Code-Vervollständigung. Hier siehst du alles, was du damit machen kannst:

⌨️

Code schreiben

Funktionen, Klassen, Module — Copilot schreibt Code während du tippst. Von einzelnen Zeilen bis zu kompletten Dateien.

📁

Dateien & Projekte erstellen

Ganze Projektstrukturen, Konfigurationsdateien, Boilerplate — alles per Prompt generieren lassen.

🔄

Code refaktorieren

Bestehenden Code verbessern, modernisieren, aufräumen — ohne manuelles Umschreiben.

🐛

Bugs finden & fixen

Copilot erkennt Fehler, erklärt sie und schlägt Fixes vor — direkt im Editor.

🧪

Tests generieren

Unit-Tests, Integration-Tests, Edge-Cases — automatisch für jede Funktion erstellen lassen.

📖

Code erklären

Komplexen Code Zeile für Zeile erklären lassen — perfekt zum Lernen und Verstehen.

📝

Dokumentation schreiben

JSDoc, Docstrings, README-Dateien, API-Docs — Copilot dokumentiert deinen Code für dich.

🔀

Git & Versionierung

Commit-Messages, PR-Beschreibungen, Changelogs — alles automatisch generiert.

🖥️

Terminal-Befehle

Shell-Befehle erklären, generieren und Fehler im Terminal analysieren lassen.

🌐

APIs & Datenbanken

REST-APIs erstellen, SQL-Queries schreiben, Datenbankschemas designen.

🎨

UI & Frontend

HTML/CSS/React-Komponenten, Layouts, Animationen, responsive Design generieren.

🔌

Konfiguration

Docker, CI/CD, Webpack, ESLint, TypeScript-Config — Copilot kennt alle Configs.

💡 Konkrete Anwendungsbeispiele aus dem Alltag

Hier siehst du echte Szenarien, in denen Copilot dir sofort hilft:

🏗️ Ein komplettes Projekt aufsetzen

Prompt:

@workspace /new Erstelle ein Node.js REST-API Projekt mit Express, TypeScript, Prisma als ORM und Jest für Tests. Füge ESLint und Prettier hinzu.

Copilot erstellt:

  • package.json mit allen Dependencies
  • tsconfig.json korrekt konfiguriert
  • src/ Ordnerstruktur mit Router, Controller, Models
  • .eslintrc.js & .prettierrc
  • prisma/schema.prisma
  • Dockerfile & docker-compose.yml
🔄 Bestehenden Code in eine andere Sprache übersetzen

Prompt:

Übersetze diese Python-Funktion nach TypeScript. Behalte die gleiche Logik und füge Type-Annotations hinzu.

Copilot versteht die Semantik des Codes und übersetzt nicht nur die Syntax, sondern nutzt auch idiomatische Patterns der Zielsprache.

📊 Daten verarbeiten & transformieren

Prompt:

Schreibe eine Funktion die ein Array von Bestellungen nimmt, sie nach Datum gruppiert, pro Tag den Gesamtumsatz berechnet und das Ergebnis als sortiertes Array von {date, total, count} zurückgibt.

Besonders nützlich bei komplexen .map(), .reduce(), .filter()-Ketten, die schwer manuell zu schreiben sind.

🔐 Sicherheit & Authentifizierung

Prompt:

Erstelle eine JWT-Authentifizierung mit Express Middleware. Inkludiere Login, Token-Refresh, und eine Protected-Route Middleware. Nutze bcrypt für Password-Hashing.

Copilot kennt Security-Best-Practices und generiert Code mit korrektem Hashing, Token-Expiration und Error-Handling.

📧 E-Mails, PDFs & Dateien generieren

Prompt:

Erstelle eine Funktion die eine Rechnungs-PDF generiert mit: Logo, Kundendaten, Positionen-Tabelle, Netto/Brutto/MwSt-Berechnung. Nutze pdfkit.

Auch für E-Mail-Templates (HTML), CSV/Excel-Export, Bildverarbeitung usw.

🗃️ Datenbank-Operationen

Prompt:

Schreibe eine SQL-Migration die eine "orders" Tabelle erstellt mit Fremdschlüssel auf "users" und "products". Füge Indizes für häufige Abfragen hinzu.

Funktioniert mit SQL, Prisma, TypeORM, Sequelize, Mongoose und vielen weiteren ORMs.

⚡ Performance-Optimierung

Prompt:

Diese Funktion ist langsam bei großen Datensätzen. Optimiere sie: Reduziere die Zeitkomplexität, vermeide unnötige Kopien und nutze effiziente Datenstrukturen.

Copilot kann O(n²) zu O(n) optimieren, Memoization hinzufügen und ineffiziente Patterns erkennen.

🌍 Internationalisierung (i18n)

Prompt:

Extrahiere alle hardcoded Strings in dieser React-Komponente und erstelle eine i18n-Konfiguration mit react-intl. Erstelle Übersetzungsdateien für DE und EN.

Copilot erkennt UI-Texte und erstellt automatisch die Übersetzungs-Keys und Dateien.

🎓 Copilot als Lern-Coach

Eine oft übersehene Superkraft: Copilot ist ein hervorragender Lern-Assistent!

🤔 „Erkläre mir..."

  • Was ist der Unterschied zwischen let und const?
  • Wie funktioniert async/await unter der Haube?
  • Was sind Design Patterns und wann nutze ich welches?
  • Erkläre mir Dependency Injection an einem Beispiel

📚 „Zeige mir..."

  • Zeige 3 verschiedene Wege, ein Array zu sortieren
  • Zeige mir Best Practices für Error-Handling in Go
  • Wie strukturiere ich ein React-Projekt professionell?
  • Was sind die SOLID-Prinzipien? Zeige jeweils ein Beispiel.
💬 Copilot als Tutor
Du
Ich verstehe nicht, warum mein useEffect zweimal aufgerufen wird. Erkläre mir React Strict Mode wie einem Anfänger.
AI
React Strict Mode ist ein Entwicklungs-Tool, das Probleme in deinem Code aufdeckt.

🔄 Warum wird useEffect zweimal aufgerufen?
In der Entwicklung (nicht in der Produktion!) rendert React absichtlich jede Komponente zweimal. Das hilft dir, Fehler zu finden:

1. Erster Render → Dein useEffect läuft
2. React simuliert ein Unmount → Cleanup-Funktion läuft
3. Zweiter Render → useEffect läuft erneut

💡 Warum? Um sicherzustellen, dass dein Cleanup korrekt funktioniert. Wenn dein Effect z.B. einen Event-Listener hinzufügt, prüft React, ob du ihn auch wieder entfernst.

✅ Lösung: Das ist kein Bug! In Production passiert das nicht. Stelle sicher, dass dein useEffect eine Cleanup-Funktion zurückgibt.
🚀
Die Faustregel Wenn du etwas tippen, schreiben, erklären, übersetzen, generieren, testen, debuggen oder dokumentieren musst — frag zuerst Copilot. In 90% der Fälle sparst du Zeit.
3

Voraussetzungen

Was du brauchst, bevor es losgeht

A GitHub-Konto erstellen

  1. Öffne github.com in deinem Browser.
  2. Klicke auf „Sign up" oben rechts.
  3. Gib deine E-Mail-Adresse ein und folge den Schritten.
  4. Bestätige deine E-Mail-Adresse über den Link in der Bestätigungsmail.
github.com — Sign up
🐙
Welcome to GitHub
deine-email@beispiel.de
Continue →

B GitHub Copilot Abo aktivieren

  1. Gehe zu github.com/settings/copilot
  2. Wähle einen Plan:
    • Copilot Free — Begrenzte Nutzung, ideal zum Testen
    • Copilot Pro — Unbegrenzte Nutzung ($10/Monat)
    • Copilot Pro+ — Alle Features + erweiterte Modelle ($39/Monat)
  3. Für Studenten: Kostenlos über das GitHub Student Developer Pack!
ℹ️
Tipp für Einsteiger Starte mit dem kostenlosen Plan. Du kannst jederzeit upgraden, wenn du mehr benötigst.

C VS Code installieren

  1. Lade VS Code herunter: code.visualstudio.com
  2. Wähle die Version für dein Betriebssystem (Windows, macOS oder Linux).
  3. Installiere VS Code und starte es.
code.visualstudio.com
Visual Studio Code
⬇ Download für macOS
Andere Plattformen →
4

Copilot Extension installieren

Copilot in VS Code aktivieren — in 3 einfachen Schritten

1 Extension Marketplace öffnen

Öffne die Extensions-Ansicht in VS Code:

⌘ + ⇧ + X (Windows: Ctrl + Shift + X)

Oder klicke auf das Extensions-Symbol in der linken Seitenleiste (das Symbol mit den vier kleinen Quadraten).

Visual Studio Code
📄
🔍
🔀
🐛
⊞
🔍 Search Extensions in Marketplace
Installiert
Noch keine Extensions installiert

2 „GitHub Copilot" suchen & installieren

  1. Tippe GitHub Copilot in das Suchfeld.
  2. Suche die Extension „GitHub Copilot" von GitHub (verifizierter Herausgeber ✓).
  3. Klicke auf den blauen „Install"-Button.
  4. Die Extension „GitHub Copilot Chat" wird automatisch mitinstalliert.
Extensions: Marketplace
🔍 GitHub Copilot
🤖
GitHub Copilot ✓ verified
Your AI pair programmer — GitHub
⭐ 4.8 — 15M+ Downloads
Install

3 Bei GitHub anmelden

  1. Nach der Installation erscheint ein Popup: „Sign in to GitHub".
  2. Klicke auf „Allow" — dein Browser öffnet sich.
  3. Melde dich bei GitHub an (falls noch nicht geschehen).
  4. Klicke auf „Authorize Visual-Studio-Code".
  5. Kehre zu VS Code zurück — du siehst jetzt das Copilot-Symbol ✨ in der Statusleiste unten.
✅
Geschafft! Wenn du das Copilot-Symbol (✨) in der Statusleiste unten rechts siehst, ist alles korrekt eingerichtet. Das Symbol zeigt den aktuellen Status an.
5

Erste Schritte mit Copilot

Dein erster Code mit KI-Unterstützung

🚀 Dein erster Copilot-Vorschlag

Erstelle eine neue Datei (⌘ + N) und speichere sie als hello.js. Tippe dann einen Kommentar:

hello.js — VS Code
📄
🔍
1// Funktion die zwei Zahlen addiert und das Ergebnis zurückgibt
2function add(a, b) {
3 return a + b;
4}
5

Was passiert hier?

  1. Du schreibst einen Kommentar, der beschreibt, was du brauchst.
  2. Copilot zeigt dir einen grau/transparent angezeigten Vorschlag — den sogenannten Ghost Text.
  3. Drücke Tab, um den Vorschlag anzunehmen.
  4. Drücke Esc, um den Vorschlag abzulehnen.

🔄 Zwischen Vorschlägen wechseln

Copilot bietet oft mehrere Alternativen an. So wechselst du zwischen ihnen:

AktionTastenkürzel (macOS)Windows/Linux
Vorschlag annehmen Tab Tab
Vorschlag ablehnen Esc Esc
Nächster Vorschlag ⌥ + ] Alt + ]
Vorheriger Vorschlag ⌥ + [ Alt + [
Wort-weise annehmen ⌘ + → Ctrl + →
Alle Vorschläge anzeigen ⌘ + ⇧ + ´ Ctrl + Enter
⚡
Pro-Tipp: Wort-weise annehmen Mit ⌘ + → kannst du einen Vorschlag Wort für Wort annehmen. Das ist besonders nützlich, wenn der Anfang des Vorschlags stimmt, du aber nicht alles übernehmen möchtest.
6

Code Completions meistern

Wie du das Beste aus den automatischen Vorschlägen herausholst

📝 Kommentar-gesteuerte Entwicklung

Die effektivste Art, Copilot zu nutzen: Beschreibe in einem Kommentar genau, was du brauchst, bevor du Code schreibst.

❌ Vage Beschreibung

// sortiere eine Liste function sort(list) { // Copilot kennt den Datentyp nicht // und weiß nicht, wonach sortiert // werden soll }

✅ Präzise Beschreibung

// Sortiere ein Array von User-Objekten // alphabetisch nach dem Nachnamen // (case-insensitive). Gib ein neues // Array zurück, ohne das Original // zu verändern. function sortUsersByLastName(users) {

🎯 Kontext ist König

Copilot analysiert den gesamten Kontext deiner Datei und geöffneter Tabs. So gibst du ihm den besten Kontext:

  • Dateinamen — Nenne deine Dateien beschreibend: userAuthentication.ts statt utils.ts
  • Importierte Bibliotheken — Importiere Packages am Anfang, damit Copilot weiß, welche Frameworks du nutzt
  • Type-Definitionen — Definiere Typen/Interfaces, bevor du Funktionen schreibst
  • Vorhandene Funktionen — Copilot orientiert sich am Stil deines bestehenden Codes
  • Offene Tabs — Halte relevante Dateien als Tabs offen
userService.ts — Guter Kontext
📄
1import { db } from './database';
2import { hashPassword } from './crypto';
3
4interface User {
5 id: string;
6 email: string;
7 name: string;
8 passwordHash: string;
9}
10
11// Erstelle einen neuen User und speichere ihn in der Datenbank
12async function createUser(email: string, name: string, password: string): Promise<User> {
13 const passwordHash = await hashPassword(password);
14 const user = { id: crypto.randomUUID(), email, name, passwordHash };
15 await db.users.insert(user);
16 return user;
17}

↑ Copilot nutzt die Imports, das Interface und den Kommentar, um perfekten Code vorzuschlagen!

🔁 Muster etablieren

Copilot erkennt Muster. Schreibe die erste Variante manuell, und Copilot wird das Muster für den Rest fortführen:

routes.ts — Muster-Erkennung
📄
1// ---- Von dir geschrieben ----
2app.get('/users', getUsers);
3app.get('/users/:id', getUserById);
4app.post('/users', createUser);
5
6// ---- Copilot erkennt das Muster ----
7app.put('/users/:id', updateUser);
8app.delete('/users/:id', deleteUser);
7

Copilot Chat

Der KI-Chat direkt in deinem Editor

💬 Chat öffnen

Es gibt mehrere Wege, den Copilot Chat zu öffnen:

MethodeTastenkürzelBeschreibung
Chat-Panel ⌘ + ⇧ + I Öffnet den Chat in der Seitenleiste
Quick Chat ⌘ + ⇧ + ⌥ + L Schneller Chat als Popup oben
Inline Chat ⌘ + I Chat direkt im Editor an der Cursor-Position

@ Chat-Teilnehmer (Participants)

Verwende @-Mentions, um Copilot auf bestimmte Bereiche zu fokussieren:

@workspace

Kennt dein gesamtes Projekt. Nutze es für projektweite Fragen und Refactoring.

@vscode

Kennt VS Code selbst. Frage nach Einstellungen, Shortcuts und Features.

@terminal

Kontext des integrierten Terminals. Hilft bei Befehlen und Fehlern.

💬 Copilot Chat
Du
@workspace Welche API-Endpunkte sind in meinem Projekt definiert?
AI
Ich habe in deinem Projekt folgende API-Endpunkte gefunden:

📁 src/routes/users.ts
• GET /api/users — Alle User abrufen
• POST /api/users — Neuen User anlegen
• GET /api/users/:id — User nach ID

📁 src/routes/products.ts
• GET /api/products — Alle Produkte

# Kontext mit # hinzufügen

Mit # kannst du spezifischen Kontext zum Chat hinzufügen:

SyntaxBeschreibungBeispiel
#file Eine bestimmte Datei als Kontext #file:userService.ts
#selection Aktuell markierter Code Erkläre #selection
#editor Sichtbarer Editor-Inhalt Finde Bugs in #editor
#terminalLastCommand Letzter Terminal-Befehl + Ausgabe Erkläre den Fehler in #terminalLastCommand
#codebase Die gesamte Codebase @workspace wie ist #codebase strukturiert?

/ Slash-Befehle

Slash-Befehle sind Shortcuts für häufige Aufgaben:

BefehlBeschreibung
/explainErklärt den ausgewählten Code Schritt für Schritt
/fixSchlägt einen Fix für Probleme im Code vor
/testsGeneriert Unit-Tests für den ausgewählten Code
/docFügt Dokumentations-Kommentare hinzu (JSDoc, Docstrings usw.)
/optimizeOptimiert den Code für bessere Performance
/newErstellt ein neues Projekt als Gerüst
/clearLöscht den Chat-Verlauf
💬 Copilot Chat
Du
/explain #selection
AI
Diese Funktion macht Folgendes:

1. Sie nimmt ein Array von Objekten entgegen
2. Filtert nach dem active-Status
3. Sortiert die Ergebnisse nach Name
4. Gibt ein neues Array zurück (Immutable)

Die Zeitkomplexität ist O(n log n) wegen der Sortierung.
8

Inline Chat

Code bearbeiten, ohne den Editor zu verlassen

⌘I So funktioniert der Inline Chat

  1. Setze deinen Cursor an die gewünschte Stelle oder markiere Code.
  2. Drücke ⌘ + I (oder Ctrl + I auf Windows).
  3. Tippe deine Anweisung in natürlicher Sprache.
  4. Copilot zeigt dir einen Diff-View mit den vorgeschlagenen Änderungen.
  5. Klicke Accept (✓) oder Discard (✗).
calculator.py — Inline Chat
📄
1def calculate(a, b, op):
2 if op == '+':
3 return a + b
4
✨ Füge Subtraktion, Multiplikation und Division hinzu. Bei Division durch 0 wirf einen ValueError.
5 elif op == '-':
6 return a - b
7 elif op == '*':
8 return a * b
9 elif op == '/':
10 if b == 0:
11 raise ValueError("Division durch 0")
12 return a / b
✓ Accept ✗ Discard 🔄 Regenerate
⚡
Inline Chat — Super-Tipps
  • Markiere Code und drücke ⌘ + I um nur den markierten Teil zu ändern
  • Schreibe „Füge Error-Handling hinzu" statt den ganzen Code selbst zu tippen
  • Nutze ihn auch für Refactoring: „Mache dies zu einer async Funktion"
  • Du kannst mehrere Iterationen machen — tippe einfach einen Follow-up
9

Copilot Edits (Multi-Datei-Bearbeitung)

Änderungen über mehrere Dateien gleichzeitig

📂 Copilot Edits starten

  1. Öffne den Chat mit ⌘ + ⇧ + I
  2. Wechsel in den „Edits"-Modus (oben im Chat-Panel).
  3. Wähle mit „Add Files" (+) die Dateien aus, die bearbeitet werden sollen.
  4. Beschreibe deine gewünschte Änderung.
  5. Copilot zeigt dir einen Diff für jede betroffene Datei.
  6. Review und bestätige die Änderungen.
✏️ Copilot Edits — Multi-Datei
Arbeitsbereich:
📄 src/api/userController.ts
📄 src/models/user.ts
📄 src/routes/userRoutes.ts
Du
Füge ein neues Feld "phoneNumber" (optional, string) zum User-Model hinzu und aktualisiere den Controller und die Routes entsprechend, inklusive Validierung.
AI
Ich werde folgende Änderungen vornehmen:

📄 user.ts — Neues Feld phoneNumber?: string
📄 userController.ts — Validierung + Verarbeitung
📄 userRoutes.ts — Input-Validierung Middleware

3 Dateien werden bearbeitet...
⚠️
Wichtig! Überprüfe die vorgeschlagenen Änderungen immer sorgfältig, bevor du sie akzeptierst — besonders bei Multi-Datei-Edits. Nutze Git, damit du Änderungen bei Bedarf rückgängig machen kannst.
10

Dateien & Projekte per Prompt erstellen

Lass Copilot komplette Dateien und Projektstrukturen für dich generieren

🏗️ Der Workflow: Vom Prompt zur fertigen Datei

Das mächtigste Feature für den Alltag: Du beschreibst, was du brauchst, und Copilot erstellt die komplette Datei. So funktioniert es:

💭
Beschreiben
Was soll die Datei tun?
→
💬
Prompt senden
Im Chat oder Inline
→
📄
Datei erstellt
Copilot generiert
→
🔍
Review
Prüfen & anpassen
→
✅
Fertig
Datei speichern

1️⃣ Methode 1: /new — Ganzes Projekt scaffolden

Der Slash-Befehl /new erstellt komplette Projektstrukturen mit mehreren Dateien auf einmal.

💬 Copilot Chat — /new Befehl
Du
/new Erstelle eine React-App mit TypeScript für eine Todo-Liste. Ich brauche: Komponenten für TodoList, TodoItem und AddTodo. Nutze useState und localStorage für Persistenz. Style mit CSS Modules.
AI
Ich erstelle folgende Projektstruktur:

📁 todo-app/
├── 📄 package.json
├── 📄 tsconfig.json
├── 📁 src/
│   ├── 📄 App.tsx
│   ├── 📄 App.module.css
│   ├── 📄 index.tsx
│   ├── 📁 components/
│   │   ├── 📄 TodoList.tsx
│   │   ├── 📄 TodoList.module.css
│   │   ├── 📄 TodoItem.tsx
│   │   ├── 📄 TodoItem.module.css
│   │   ├── 📄 AddTodo.tsx
│   │   └── 📄 AddTodo.module.css
│   ├── 📁 hooks/
│   │   └── 📄 useLocalStorage.ts
│   └── 📁 types/
│       └── 📄 todo.ts

Klicke auf „Create Workspace", um alle Dateien zu erstellen →
💡
Nach dem Erstellen Copilot zeigt dir einen „Create Workspace"-Button. Klicke darauf, wähle einen Ordner auf deiner Festplatte, und alle Dateien werden sofort angelegt — fertig zum Starten mit npm install!

2️⃣ Methode 2: Einzelne Dateien im Chat erstellen

Du brauchst kein ganzes Projekt? Erstelle einzelne Dateien direkt im Chat:

💬 Einzelne Datei generieren
Du
Erstelle eine Express Middleware-Datei "auth.middleware.ts" die JWT-Tokens validiert. Sie soll den Token aus dem Authorization-Header lesen, verifizieren, und das User-Objekt an req.user anhängen. Bei ungültigem Token: 401-Response.
AI
Hier ist deine Middleware:

Copilot zeigt den kompletten Code an. Über dem Code-Block erscheinen Buttons:
Copilot Chat — Code-Ausgabe
📋 Copy 📄 Insert into New File 📌 Insert at Cursor
import { Request, Response, NextFunction } from 'express';
import jwt from 'jsonwebtoken';

export const authMiddleware = (
  req: Request, res: Response, next: NextFunction
) => {
  const token = req.headers.authorization?.split(' ')[1];
  if (!token) return res.status(401).json({...});
  // ... Validierung ...
};
⚡
Die 3 magischen Buttons über Code-Blöcken
  • 📋 Copy — Kopiert den Code in die Zwischenablage
  • 📄 Insert into New File — Erstellt automatisch eine neue Datei mit dem Code!
  • 📌 Insert at Cursor — Fügt den Code an deiner aktuellen Cursor-Position ein

3️⃣ Methode 3: Agent Mode — Copilot erstellt alles selbst

Im Agent Mode kann Copilot selbstständig Dateien erstellen, Terminal-Befehle ausführen und Probleme lösen:

🤖 Copilot Agent Mode
Du
Erstelle eine Landing Page für mein Produkt "CloudSync". Ich brauche: Hero-Section, Features-Grid (3 Features), Pricing-Tabelle (Free/Pro/Enterprise), und einen Footer. Nutze HTML mit eingebettetem CSS. Modernes dunkles Design.
AI
Ich erstelle die Landing Page für dich. Der Agent führt folgende Schritte aus:

✅ Datei landing-page.html erstellt
✅ Hero-Section mit Gradient-Hintergrund
✅ Features-Grid mit IconsH
✅ Pricing-Tabelle mit Hover-Effekten
✅ Responsive Footer
✅ Dunkler Farbmodus und Responsive Design

Die Datei wurde in deinem Workspace erstellt. Öffne sie mit Live Preview, um das Ergebnis zu sehen!
💡
Agent Mode aktivieren Im Chat-Fenster oben siehst du ein Dropdown-Menü. Wechsel von „Chat" zu „Agent". Im Agent-Modus kann Copilot eigenständig Dateien erstellen, bearbeiten und sogar Terminal-Befehle ausführen.

📋 Prompt-Baukasten für Datei-Erstellung

Nutze diese erprobten Prompt-Vorlagen, um Dateien zu generieren. Klicke zum Kopieren:

🔧 Konfigurationsdateien

Erstelle eine tsconfig.json für ein Node.js 20 Projekt mit strict mode, ES2022 target, paths-Aliase für @/src/*, und Output in dist/
Erstelle ein Dockerfile für eine Node.js App: Multi-stage Build, non-root User, Health-Check, .dockerignore. Production-optimiert.
Erstelle eine GitHub Actions CI/CD Pipeline (.github/workflows/ci.yml): Lint, Test, Build und Deploy auf Vercel bei Push auf main.

📄 Quellcode-Dateien

Erstelle eine utils/validation.ts Datei mit Funktionen für: Email-Validierung, Passwort-Stärke-Check (min 8 Zeichen, Großbuchstabe, Zahl, Sonderzeichen), URL-Validierung und Telefonnummer-Format (DE).
Erstelle eine React Custom Hook Datei "useDebounce.ts" die einen Wert mit konfigurierbarer Verzögerung debounced. Mit TypeScript Generics, damit sie für jeden Datentyp funktioniert.
Erstelle eine Logger-Klasse in Python (logger.py): Unterstütze File- und Console-Output, Log-Levels (DEBUG bis ERROR), Farben im Terminal und JSON-Format-Option. Nutze das Singleton-Pattern.

📝 Dokumentation

Erstelle eine README.md für mein Projekt basierend auf @workspace. Füge hinzu: Beschreibung, Screenshots-Platzhalter, Installation, Quick Start, API-Dokumentation, Contributing Guide und Lizenz.
Erstelle eine CONTRIBUTING.md mit: Entwicklungsumgebung einrichten, Code-Standards, Branch-Naming, Commit-Konventionen und Pull-Request-Prozess.

🧪 Test-Dateien

Erstelle eine Test-Datei für #file:userService.ts mit Jest. Teste alle öffentlichen Methoden, inklusive Edge-Cases für leere Inputs, ungültige IDs, und Netzwerkfehler. Nutze Mocking für die Datenbank.

✨ Profi-Technik: Kettenreaktion-Workflow

Die effektivste Methode für komplexe Projekte — eine Kettenreaktion von Prompts:

Kettenreaktion — Schritt für Schritt
1
Zuerst: Datentypen definieren
"Erstelle types/order.ts mit Interfaces für Order, OrderItem, OrderStatus (enum) und CreateOrderDTO."
2
Dann: Service-Schicht
"Erstelle services/orderService.ts basierend auf #file:types/order.ts — CRUD-Operationen mit Prisma."
3
Dann: API-Routes
"Erstelle routes/orderRoutes.ts basierend auf #file:services/orderService.ts — RESTful Endpoints mit Validierung."
4
Dann: Tests
"Erstelle tests/orderService.test.ts — teste alle Methoden aus #file:services/orderService.ts mit Mocks."
5
Zuletzt: Dokumentation
"Dokumentiere die API-Endpoints aus #file:routes/orderRoutes.ts im OpenAPI/Swagger-Format."
⚡
Warum Kettenreaktion? Jede Datei baut auf der vorherigen auf. Mit #file: gibst du Copilot den Kontext der bereits erstellten Dateien. So bleibt alles konsistent — Typen, Funktionsnamen und Patterns stimmen über alle Dateien hinweg überein.

🎯 Goldene Regeln für Datei-Erstellung per Prompt

❌ So nicht

Erstelle mir eine Datei. Mach einen Server. Bau eine Login-Seite.

✅ So geht's

Erstelle eine Express-Server-Datei (server.ts): Port 3000, CORS aktiviert, JSON-Body-Parser, Error-Handler-Middleware, graceful Shutdown bei SIGTERM. Nutze dotenv für Konfiguration.

Dein Prompt sollte immer enthalten:

  1. Dateiname und -pfad — z.B. „Erstelle src/middleware/auth.ts"
  2. Zweck der Datei — Was soll sie tun?
  3. Technologien — Welche Libraries/Frameworks?
  4. Spezifische Anforderungen — Error-Handling, Logging, Typen?
  5. Kontext — Nutze #file: für verwandte Dateien
11

Debugging mit Copilot

Fehler schneller finden und beheben

🐛 Fehler im Code finden

Copilot kann dir beim Debugging auf mehrere Arten helfen:

1. Terminal-Fehler erklären

Wenn ein Fehler im Terminal erscheint, klicke auf das ✨-Symbol neben dem Fehler. Copilot erklärt den Fehler und schlägt eine Lösung vor.

2. Code markieren + /fix

Markiere problematischen Code, öffne den Chat und tippe /fix. Copilot analysiert und behebt das Problem.

3. Inline-Fehler beheben

Bei roten Unterstreichungen (Fehlern) zeigt Copilot oft automatisch einen „Fix with Copilot"-Quick-Fix an.

💬 Debugging-Hilfe
Du
Mein Code wirft einen "TypeError: Cannot read property 'map' of undefined". Hier ist die relevante Stelle: #selection
AI
Das Problem ist, dass data.items noch undefined ist, wenn .map() aufgerufen wird. Das passiert, weil die API-Antwort asynchron ist.

Lösung: Füge eine Prüfung hinzu:
const items = data?.items ?? [];
items.map(item => ...)

🔧 Quick Fix mit Copilot

So nutzt du den Quick Fix:

  1. Positioniere den Cursor auf einem unterstrichenen Fehler.
  2. Drücke ⌘ + . (Quick Fix Menü).
  3. Wähle „Fix using Copilot" aus der Liste.
  4. Copilot analysiert den Fehler und schlägt eine Korrektur vor.
12

Tests schreiben mit Copilot

Automatische Testgenerierung für deinen Code

🧪 Tests generieren lassen

Es gibt drei einfache Wege, Tests zu generieren:

Methode 1: Über den Chat mit /tests
  1. Markiere die Funktion, die du testen möchtest.
  2. Öffne den Chat (⌘ + ⇧ + I).
  3. Tippe /tests
  4. Copilot generiert passende Tests basierend auf deiner Funktion.
Methode 2: Über den Inline Chat
  1. Setze den Cursor in eine Test-Datei.
  2. Drücke ⌘ + I
  3. Tippe: Schreibe Unit-Tests für die Funktion calculateDiscount in #file:pricing.ts
Methode 3: Rechtsklick → Copilot → Generate Tests
  1. Markiere eine Funktion im Editor.
  2. Rechtsklick → Copilot → Generate Tests
  3. Die Tests werden in einer neuen Datei erstellt.
calculator.test.ts — Generierte Tests
📄
1import { calculate } from './calculator';
2
3describe('calculate', () => {
4 it('sollte zwei Zahlen addieren', () => {
5 expect(calculate(2, 3, '+')).toBe(5);
6 });
7
8 it('sollte Division durch 0 abfangen', () => {
9 expect(() => calculate(10, 0, '/')).toThrow();
10 });
11
12 it('sollte negative Zahlen korrekt behandeln', () => {
13 expect(calculate(-5, 3, '+')).toBe(-2);
14 });
15});
13

Git & Commit-Messages

Copilot hilft auch bei Git-Workflows

📝 Automatische Commit-Messages

  1. Mache deine Änderungen im Code wie gewohnt.
  2. Öffne die Source Control Ansicht (⌘ + ⇧ + G).
  3. Klicke auf das ✨ Sparkle-Symbol neben dem Commit-Message-Feld.
  4. Copilot analysiert deine Änderungen und generiert eine passende Commit-Message.
  5. Bearbeite die Message bei Bedarf und klicke auf Commit.
Source Control
SOURCE CONTROL
feat: add phone number field to user model and update API endpoints ✨ AI
Staged Changes (3)
M src/models/user.ts
M src/controllers/userController.ts
M src/routes/userRoutes.ts
14

Alle wichtigen Shortcuts

Die komplette Tastenkürzel-Referenz

⌨️ Copilot Tastenkürzel (macOS / Windows)

AktionmacOSWindows/Linux
💬 Chat
Chat öffnen/fokussieren ⌘ + ⇧ + I Ctrl + Shift + I
Inline Chat ⌘ + I Ctrl + I
Quick Chat ⌘ + ⇧ + ⌥ + L Ctrl + Shift + Alt + L
✨ Code Completion
Vorschlag annehmen Tab Tab
Vorschlag ablehnen Esc Esc
Nächster Vorschlag ⌥ + ] Alt + ]
Vorheriger Vorschlag ⌥ + [ Alt + [
Wort-weise annehmen ⌘ + → Ctrl + →
Copilot ein-/ausschalten Klicke auf das Copilot-Symbol in der Statusleiste
🔧 Allgemein
Command Palette ⌘ + ⇧ + P Ctrl + Shift + P
Quick Fix (Fehler beheben) ⌘ + . Ctrl + .
🖨️
Drucke diese Tabelle aus! Klebe die Shortcut-Übersicht neben deinen Monitor, bis du alle Kürzel im Schlaf kannst. Diese Seite ist druckoptimiert — nutze ⌘ + P.
15

Prompt Engineering für Copilot

So schreibst du die perfekten Anweisungen

🎯 Die 5 goldenen Prompt-Regeln

1. Sei spezifisch und präzise

❌ Vage

Mach eine Funktion für Daten

✅ Präzise

Erstelle eine async Funktion fetchUserData(userId: string), die einen GET-Request an /api/users/{userId} sendet und ein User-Objekt zurückgibt. Bei Fehlern soll ein leeres Objekt zurückgegeben werden.

2. Gib den Kontext an

❌ Ohne Kontext

Validiere die Eingabe

✅ Mit Kontext

Validiere die E-Mail-Adresse des Users mit einem Regex-Pattern. Die Funktion soll true/false zurückgeben und auch Subdomains wie user@mail.uni-berlin.de akzeptieren.

3. Nenne Technologien und Bibliotheken

Sage Copilot, welche Tools du nutzt: „Verwende React mit TypeScript und Tailwind CSS" oder „Nutze Express.js und Prisma ORM".

4. Definiere Edge Cases

„Was passiert bei leerem Input?", „Handle null/undefined", „Was bei einer leeren Liste?" — Je mehr Edge Cases du nennst, desto robuster wird der Code.

5. Iteriere und verfeinere

Wenn der erste Vorschlag nicht perfekt ist, gib Feedback: „Das ist gut, aber füge noch Error-Logging hinzu" oder „Mache die Funktion pure (ohne Seiteneffekte)."

💎 Prompt-Vorlagen für den Alltag

Prompts um Code verstehen zu lassen:

Erkläre diesen Code Zeile für Zeile, als wäre ich ein Anfänger. Nenne auch mögliche Probleme.
Was ist die Zeitkomplexität dieser Funktion und warum?
Welche Design Patterns werden in #file:app.ts verwendet?
@workspace Erkläre den Datenfluss von der API-Anfrage bis zur Datenbank-Abfrage.

Prompts für Code-Verbesserungen:

Refaktoriere diese Funktion: Extrahiere die Validierung in eine separate Funktion und nutze Early Returns statt verschachtelter if-Blöcke.
Wandle diesen Callback-basierten Code in async/await um, mit proper Error-Handling.
Mache diese React-Klassenkomponente zu einer Funktionskomponente mit Hooks.
Diese Funktion ist zu lang (80 Zeilen). Zerlege sie in kleinere, testbare Funktionen nach dem Single Responsibility Principle.

Prompts um neuen Code zu erstellen:

Erstelle eine REST-API mit Express.js und TypeScript für ein Todo-System mit CRUD-Operationen, Validierung mit Zod und Error-Handling Middleware.
Baue eine React-Komponente SearchBar mit Debouncing (300ms), die einen onChange-Callback aufruft. Nutze TypeScript und CSS Modules.
Schreibe ein Python-Script, das alle CSV-Dateien in einem Ordner liest, die Daten zusammenführt und als Excel-Datei exportiert. Nutze pandas.

Prompts zum Debuggen:

Dieser Code produziert ein falsches Ergebnis. Das erwartet Ergebnis ist X, aber ich bekomme Y. Finde den Bug.
Warum bekomme ich einen "Maximum call stack size exceeded" Fehler bei dieser rekursiven Funktion?
Diese SQL-Query ist langsam (5 Sekunden). Analysiere sie und schlage Optimierungen vor, inkl. Index-Empfehlungen.
#terminalLastCommand Der Build schlägt fehl. Erkläre den Fehler und zeige die Lösung.
16

Best Practices

Werde zum Copilot-Power-User

✅ Die 10 Gebote des Copilot-Users

  1. Überprüfe IMMER den generierten Code
    Copilot kann Fehler machen. Verstehe jeden Code, den du akzeptierst — du bist verantwortlich für deinen Code.
  2. Nutze beschreibende Datei- und Variablennamen
    Je besser dein Code strukturiert ist, desto besser sind Copilots Vorschläge.
  3. Halte relevante Dateien als Tabs offen
    Copilot nutzt offene Tabs als zusätzlichen Kontext.
  4. Schreibe erst den Kommentar, dann den Code
    Kommentar-gesteuerte Entwicklung liefert die besten Ergebnisse.
  5. Lerne die Shortcuts auswendig
    Tab, Esc, ⌘+I, ⌥+[/] — diese vier reichen für den Anfang.
  6. Nutze @workspace für projektweite Fragen
    Copilot kann dein gesamtes Projekt verstehen, wenn du es darum bittest.
  7. Iteriere bei unbefriedigenden Ergebnissen
    Gib Feedback und verfeinere statt von vorne anzufangen.
  8. Nutze #file für gezielten Kontext
    Zeige Copilot genau, welche Dateien relevant sind.
  9. Committe regelmäßig mit Git
    Bevor du große KI-generierte Änderungen akzeptierst — sichere deinen Stand.
  10. Nutze Copilot als Lernwerkzeug
    Frage „Warum?" und „Erkläre das" — so lernst du neue Konzepte und Patterns.
💭
Denken
Was brauche ich?
→
📝
Prompt
Präzise beschreiben
→
🤖
Generieren
Copilot schlägt vor
→
🔍
Review
Code überprüfen
→
🔄
Iterieren
Verfeinern
→
✅
Fertig
Commit & Push
17

Vibe Coding — Die neue Art zu entwickeln

Nicht mehr coden, sondern die KI dirigieren

🎵
Was ist Vibe Coding? Der Begriff wurde von Andrej Karpathy (Ex-Tesla AI Director) geprägt: „Du gibst dich dem Vibe hin, du drückst Sachen exponentiell aus und vergisst sogar, dass Code existiert." — Statt Code zu schreiben, beschreibst du in natürlicher Sprache, was du willst, und die KI erledigt den Rest.

🔄 Der Paradigmenwechsel

Die Art, wie Software entsteht, hat sich grundlegend verändert:

❌ Klassisch (2020)

1. Syntax lernen 2. Code manuell tippen 3. Stack Overflow durchsuchen 4. Dokumentation lesen 5. Fehler selbst debuggen 6. Kommentare schreiben 7. Tests manuell schreiben

⏱️ 80 % der Zeit = Code tippen

✅ Vibe Coding (2026)

1. Problem klar beschreiben 2. KI den Code generieren lassen 3. Ergebnis prüfen & verfeinern 4. KI Kommentare schreiben lassen 5. KI Tests generieren lassen 6. KI debuggen lassen 7. Architektur-Entscheidungen treffen

⏱️ 80 % der Zeit = KI steuern & prüfen

🎯 Die neue Kernkompetenz: KI bedienen

Die wichtigste Fähigkeit ist nicht mehr Code schreiben, sondern die KI richtig anleiten:

🗣️ Klare Kommunikation

Beschreibe präzise, was du brauchst. Je besser dein Prompt, desto besser das Ergebnis. Denke wie ein Projektmanager, der einem Entwickler Aufgaben gibt.

🏗️ Architektur-Denken

Verstehe, wie Software aufgebaut sein soll: Ordnerstruktur, Datenfluss, APIs. Du musst nicht jede Zeile schreiben, aber das große Bild kennen.

🔍 Code Review

Die KI macht Fehler. Deine Aufgabe: Ergebnisse kritisch prüfen, Sicherheitslücken erkennen, Performance-Probleme finden. Du bist der Quality Gate.

🔄 Iteratives Verfeinern

Selten ist der erste Versuch perfekt. Lerne, gezieltes Feedback zu geben: „Das ist gut, aber ändere X" statt „Mach das nochmal".

💬 Vibe Coding in Aktion

So sieht eine typische Vibe-Coding-Session aus:

👤 Copilot Chat — Vibe Coding Session
Du Ich brauche eine Landing Page für ein SaaS-Produkt. Modernes Design, dunkler Hintergrund, Hero-Section mit CTA-Button, Feature-Grid mit 6 Features, Pricing-Tabelle mit 3 Plänen, und ein Footer. Nutze HTML + Tailwind CSS. Responsiv für Mobile.
Copilot Hier ist deine Landing Page... [generiert 200+ Zeilen HTML]
Du Gut! Ändere die Farben zu einem Blau-Lila-Gradient. Füge Animations beim Scrollen hinzu. Der CTA-Button soll pulsieren.
Copilot Angepasst! Ich habe CSS-Animationen und einen Intersection Observer für Scroll-Animationen hinzugefügt... [aktualisiert den Code]
Du Jetzt schreibe noch die Kommentare für den gesamten Code. Auf Deutsch.
Copilot Alle Abschnitte sind jetzt kommentiert... [fügt deutsche Kommentare ein]
💡
Beachte den Ablauf: Du hast keine einzige Zeile Code geschrieben. Du hast kommuniziert, was du brauchst, das Ergebnis geprüft und iteriert. Das ist Vibe Coding.

📋 Was die KI für dich schreibt

Heute wird praktisch alles von der KI generiert — nicht nur Code:

ArtefaktPrompt-BeispielStatus
Code „Erstelle eine REST-API mit Express und TypeScript" ✅ KI macht das
Kommentare „Dokumentiere diese Datei mit JSDoc-Kommentaren" ✅ KI macht das
Tests „Schreibe Unit-Tests mit Jest für alle Funktionen" ✅ KI macht das
Dokumentation „Erstelle eine README.md mit Setup-Anleitung" ✅ KI macht das
Git-Messages ✨-Button im Source Control Panel ✅ KI macht das
Config-Dateien „Erstelle tsconfig.json, .eslintrc, Dockerfile" ✅ KI macht das
Fehlersuche „Warum bekomme ich diesen Fehler?" + Stacktrace ✅ KI macht das
Architektur „Du entscheidest, wie das Projekt strukturiert wird" ⚠️ Du prüfst das
Anforderungen „Was genau soll das Produkt können?" 🧠 Deine Aufgabe

⚡ Die Vibe-Coding-Regeln

🎯 Regel 1: Think Big, Prompt Big

Frag nicht nach einer einzelnen Funktion — beschreibe das ganze Feature. Die KI kann komplette Module, Seiten und Systeme auf einmal bauen.

🔗 Regel 2: Kontext ist King

Nutze @workspace, #file, und #selection exzessiv. Je mehr die KI über dein Projekt weiß, desto besser passt der generierte Code.

🚫 Regel 3: Nie blind akzeptieren

„Trust but verify" — auch wenn du nicht jede Zeile selbst schreibst, musst du jede Zeile verstehen. Die KI halluziniert manchmal, erfindet APIs oder nutzt veraltete Syntax.

🔄 Regel 4: Agentenmodus nutzen

Für maximalen Vibe: Agent Mode aktivieren. Die KI erstellt Dateien, installiert Pakete, führt Befehle aus und iteriert selbstständig, bis es funktioniert.

⚠️
Vibe Coding ≠ Blind Coding! Vibe Coding bedeutet nicht, alles der KI zu überlassen und wegzuschauen. Du bist der Architekt, Reviewer und Entscheider. Die KI ist dein ultraschneller Assistent — aber du trägst die Verantwortung für das Ergebnis.
18

KI-Modelle auswählen

Wann du welches Modell nutzen solltest

🔀 Modell wechseln in VS Code

Copilot bietet dir Zugriff auf verschiedene KI-Modelle. So wechselst du:

Methode 1: Im Chat

Klicke im Copilot Chat unten auf den Modell-Namen (z. B. „GPT-4o"). Es öffnet sich ein Dropdown mit allen verfügbaren Modellen.

Methode 2: Per Befehl

Öffne die Command Palette (⌘ + ⇧ + P) und suche nach Copilot: Select Model. Wähle dein gewünschtes Modell aus der Liste.

💡
Tipp: Das gewählte Modell gilt pro Chat-Session. Du kannst für verschiedene Aufgaben verschiedene Modelle nutzen — einfach einen neuen Chat öffnen und das Modell wechseln.

📊 Die Modelle im Überblick

Jedes Modell hat Stärken und Schwächen. Hier der Vergleich:

ModellStärkeSpeedAm besten für
GPT-4o Allrounder, schnell, multimodal ⚡⚡⚡ Alltägliche Aufgaben, Quick Fixes, Erklärungen
GPT-4.1 Verbesserte Code-Qualität ⚡⚡⚡ Code-Generierung, lange Anweisungen befolgen
Claude Sonnet Exzellent für Code, kreativ ⚡⚡⚡ Refactoring, saubere Architektur, Erklärungen
Claude Opus 4 Tiefes Reasoning, komplexe Systeme ⚡ Große Codebasen, komplexe Architekturfragen
o3-mini Starkes logisches Denken ⚡⚡ Algorithmen, Mathe, komplexe Logik
o4-mini Reasoning + Code-Ausführung ⚡⚡ Schwierige Bugs, Multi-Step-Probleme
Gemini 2.5 Pro Riesiges Kontextfenster (1M Tokens) ⚡⚡ Sehr große Projekte, lange Dokumente analysieren

🎯 Welches Modell wann?

Orientiere dich an diesen Faustregeln:

🟢 Schnelle Aufgaben → GPT-4o / GPT-4.1

Kleine Funktionen, Erklärungen, Code-Completions, Kommentare generieren, einfache Fragen. Hier zählt die Geschwindigkeit.

💬 „Erkläre mir diese Regex"
💬 „Schreibe eine Hilfsfunktion für Datums-Formatierung"
💬 „Konvertiere dieses JSON zu einem TypeScript Interface"

🟣 Code-Qualität → Claude Sonnet

Wenn sauberer, idiomatischer Code wichtig ist. Claude schreibt oft eleganteren Code und kennt Best Practices besser. Auch gut für Erklärungen und Dokumentation.

💬 „Refaktoriere dieses Modul nach SOLID-Prinzipien"
💬 „Erstelle eine komplette React-Komponente mit Tests"
💬 „Schreibe eine ausführliche README für dieses Projekt"

🟡 Schwierige Probleme → o3-mini / o4-mini

Bei Aufgaben, die Nachdenken erfordern: komplexe Algorithmen, mathematische Berechnungen, verschachtelte Logik, schwer auffindbare Bugs.

💬 „Implementiere einen Dijkstra-Algorithmus mit Prioritätswarteschlange"
💬 „Dieser Race-Condition-Bug tritt nur unter Last auf. Analysiere den Code."
💬 „Optimiere diese SQL-Query für 10 Mio. Zeilen"

🔵 Große Projekte → Gemini 2.5 Pro / Claude Opus

Wenn du ein ganzes Projekt analysieren willst oder mit riesigen Dateien arbeitest. Gemini hat das größte Kontextfenster, Opus das tiefste Verständnis.

💬 „@workspace Analysiere die gesamte Architektur und finde Verbesserungspotential"
💬 „Lese diese 5000-Zeilen-Datei und erstelle eine Zusammenfassung"
💬 „Plane eine Migration von JavaScript zu TypeScript für das gesamte Projekt"

🔥 Profi-Strategie: Modell-Kombination

Power-User wechseln das Modell je nach Phase ihres Workflows:

🧠
Planen
Claude Opus / Gemini
Architektur & Design
→
⚡
Bauen
Claude Sonnet / GPT-4.1
Code generieren
→
🐛
Debuggen
o4-mini
Reasoning-Power
→
🔍
Review
Claude Sonnet
Qualitäts-Check
→
📝
Doku
GPT-4o
Schnell & gut
⚡
Power-Tipp: Für den Agent Mode eignen sich Claude Sonnet und GPT-4.1 am besten — sie sind schnell genug für die vielen Iterationen, die der Agent durchläuft, aber trotzdem qualitativ hochwertig.

📈 Kosten & Limits beachten

📊
Copilot Pro / Business Limits:
  • GPT-4o, Claude Sonnet, Gemini: „Unlimited" für normale Nutzung (Fair-Use-Policy)
  • Claude Opus, o3-mini, o4-mini: Premium-Modelle mit monatlichem Limit (typisch ~300 Requests/Monat)
  • Tipp: Nutze Premium-Modelle gezielt für schwierige Probleme. Für Alltags-Tasks reichen die schnellen Modelle völlig.
⚠️
Modelle ändern sich schnell! Die verfügbaren Modelle und ihre Limits aktualisiert GitHub regelmäßig. Prüfe in den offiziellen Docs die aktuelle Modell-Liste für deinen Plan.
19

Fortgeschrittene Techniken

Werde zum Copilot-Meister

📋 Custom Instructions (.github/copilot-instructions.md)

Du kannst Copilot projektweite Anweisungen geben, indem du eine spezielle Datei in deinem Repository erstellst:

.github/copilot-instructions.md
📄
1# Copilot Projektanweisungen
2
3## Technologie-Stack
4- TypeScript (strict mode)
5- React 19 mit Server Components
6- Tailwind CSS für Styling
7- Prisma als ORM
8
9## Code-Standards
10- Nutze Functional Components
11- Bevorzuge Composition over Inheritance
12- Alle Funktionen müssen Rückgabetypen haben
13- Error Handling mit Result-Pattern
14- Kommentare auf Deutsch
⚡
Power-Feature! Diese Datei wird automatisch in jeden Copilot-Chat als Kontext eingebunden. Dein Team kann so sicherstellen, dass Copilot immer die gleichen Standards befolgt.

🧩 Copilot Agents & MCP

Ab 2025 unterstützt Copilot Agent-Modus und MCP (Model Context Protocol):

🤖 Agent Mode

Copilot kann selbstständig mehrere Schritte ausführen: Terminal-Befehle, Datei-Bearbeitungen und Web-Suchen kombinieren, um komplexe Aufgaben autonom zu lösen.

🔌 MCP Server

Verbinde externe Tools (Datenbanken, APIs, Design-Tools) direkt mit Copilot über das Model Context Protocol. So kann Copilot auf dein Jira, Figma, oder deine Datenbank zugreifen.

🎛️ Copilot-Einstellungen anpassen

Öffne die VS Code Einstellungen (⌘ + ,) und suche nach „Copilot":

EinstellungBeschreibungEmpfehlung
github.copilot.enable Copilot für bestimmte Sprachen ein/aus An (Standard)
github.copilot.chat.localeOverride Sprache für Chat-Antworten de für Deutsch
editor.inlineSuggest.enabled Inline-Vorschläge ein/ausschalten An
20

Deine Lern-Checkliste

Hake ab, was du schon gemeistert hast!

📋 Fortschritt tracken

Klicke auf die Kästchen, um deinen Fortschritt zu markieren. Der Stand wird lokal gespeichert.

  • VS Code installiert und konfiguriert
  • GitHub-Konto erstellt und Copilot aktiviert
  • Copilot Extension in VS Code installiert
  • Alle Copilot-Möglichkeiten kennengelernt (Code, Tests, Docs, Git …)
  • Ersten Code-Vorschlag mit Tab angenommen
  • Zwischen mehreren Vorschlägen gewechselt (⌥ + ]/[)
  • Wort-weise Annahme ausprobiert (⌘ + →)
  • Copilot Chat geöffnet und eine Frage gestellt
  • @workspace in einem Chat verwendet
  • #file als Kontext im Chat genutzt
  • /explain für Code-Erklärung genutzt
  • Inline Chat (⌘ + I) zum Bearbeiten von Code genutzt
  • /tests zum Generieren von Tests verwendet
  • Commit-Message von Copilot generieren lassen
  • Einen Bug mit Copilots Hilfe gefunden und behoben
  • Custom Instructions erstellt (.github/copilot-instructions.md)
  • Vibe Coding ausprobiert — komplettes Feature nur per Prompts erstellt
  • Das KI-Modell im Chat gewechselt und Unterschiede bemerkt
  • Copilot Edits für Multi-Datei-Änderungen genutzt
  • Eine Datei oder ein Projekt per Prompt erstellen lassen
🎓
Herzlichen Glückwunsch! Wenn du alle Punkte abgehakt hast, bist du bereit, GitHub Copilot wie ein Profi zu nutzen. Übung macht den Meister — je mehr du Copilot nutzt, desto intuitiver wird die Zusammenarbeit. Viel Erfolg beim Programmieren! 🚀