Erste Schritte mit GitHub Copilot in VS Code

GitHub Copilot verändert die Art und Weise, wie Sie Code in Visual Studio Code schreiben. In diesem praktischen Tutorial erstellen Sie eine vollständige Webanwendung zur Aufgabenverwaltung und entdecken dabei die KI-Funktionen von VS Code: intelligente Inline-Vorschläge, autonome Feature-Entwicklung mit Agents, präzise Bearbeitung mit Inline-Chat, integrierte intelligente Aktionen und leistungsstarke Anpassungsoptionen.

Am Ende dieses Tutorials verfügen Sie sowohl über eine funktionierende Webanwendung als auch über ein personalisiertes KI-Codierungssetup, das sich an Ihren Entwicklungsstil anpasst.

Voraussetzungen

VS Code auf Ihrem Computer installiert. Laden Sie es von der Website von Visual Studio Code herunter.
Zugriff auf GitHub Copilot. Befolgen Sie diese Schritte, um GitHub Copilot in VS Code einzurichten.

Tipp
Wenn Sie kein Copilot-Abonnement haben, können Sie sich direkt in VS Code für die kostenlose Nutzung von Copilot anmelden und erhalten monatliche Limits für Inline-Vorschläge und Chat-Interaktionen.

Schritt 1: Inline-Vorschläge erleben

KI-gestützte Inline-Vorschläge erscheinen, während Sie tippen, und helfen Ihnen, schneller und fehlerfreier Code zu schreiben. Beginnen wir mit dem Aufbau der Grundlage Ihres Aufgabenmanagers.

Erstellen Sie einen neuen Ordner für Ihr Projekt und öffnen Sie ihn in VS Code.
Erstellen Sie eine neue Datei namens index.html.
Beginnen Sie mit der Eingabe des Folgenden und während Sie tippen, liefert VS Code Inline-Vorschläge (Geistertext)
```
<!DOCTYPE html>
```
Sie sehen möglicherweise unterschiedliche Vorschläge, da große Sprachmodelle nichtdeterministisch sind.
Drücken Sie Tab, um den Vorschlag zu akzeptieren.

Herzlichen Glückwunsch! Sie haben gerade Ihren ersten KI-gestützten Inline-Vorschlag akzeptiert.
Bauen Sie Ihre HTML-Struktur weiter auf. Beginnen Sie innerhalb des <body>-Tags mit der Eingabe
```
<div class="container">
    <h1>My Task Manager</h1>
    <form id="task-form">
```
Beachten Sie, wie VS Code relevante HTML-Elemente vorschlägt, während Sie Ihre Anwendungsstruktur aufbauen.
Wenn Sie mehrere Vorschläge sehen, fahren Sie mit der Maus über den Geistertext, um Navigationssteuerelemente anzuzeigen, oder verwenden Sie ⌥] (Windows, Linux Alt+]) und ⌥[ (Windows, Linux Alt+[), um durch die Optionen zu blättern.

Inline-Vorschläge funktionieren automatisch, während Sie tippen, und lernen aus Ihren Mustern und dem Kontext Ihres Projekts. Sie sind besonders hilfreich beim Schreiben von Boilerplate-Code, HTML-Strukturen und sich wiederholenden Mustern.

Schritt 2: Vollständige Features mit Agents erstellen

Agents sind die leistungsstärkste KI-Funktion von VS Code. Basierend auf einer natürlichsprachlichen Eingabe planen und implementieren sie autonom komplexe Features in mehreren Dateien. Nutzen wir sie, um die Kernfunktionalität Ihres Aufgabenmanagers zu erstellen.

Öffnen Sie die Chat-Ansicht, indem Sie ⌃⌘I (Windows, Linux Ctrl+Alt+I) drücken oder das Chat-Symbol in der Titelleiste von VS Code auswählen.

Die Chat-Ansicht ermöglicht es Ihnen, ein fortlaufendes Gespräch mit der KI zu führen, was es einfacher macht, Ihre Anfragen zu verfeinern und bessere Ergebnisse zu erzielen.
Wählen Sie im Agenten-Picker oben in der Chat-Ansicht Agent aus, um in den autonomen Coding-Modus zu wechseln.
Geben Sie die folgende Aufforderung ein und drücken Sie Enter. Der Agent analysiert Ihre Anfrage und beginnt mit der Implementierung der Lösung
```
Create a complete task manager web application with the ability to add, delete, and mark tasks as completed. Include modern CSS styling and make it responsive. Use semantic HTML and ensure it's accessible. Separate markup, styles, and scripts into their own files.
```
Beobachten Sie, wie der Agent die notwendigen Dateien und den Code generiert, um Ihre Anfrage zu implementieren. Sie sollten sehen, wie die Datei index.html aktualisiert wird, eine Datei styles.css für das Styling und eine Datei script.js für die Funktionalität erstellt wird.

Tipp
Verschiedene Sprachmodelle können unterschiedliche Stärken haben. Verwenden Sie das Modellauswahlmenü in der Chat-Ansicht, um zwischen Sprachmodellen zu wechseln.
Überprüfen Sie die generierten Dateien und wählen Sie Beibehalten, um alle Änderungen zu übernehmen.
Öffnen Sie Ihre index.html-Datei in einem Browser, um Ihren Aufgabenmanager in Aktion zu sehen. Sie können Aufgaben hinzufügen, als erledigt markieren und löschen.

Tipp
Verwenden Sie die Live Preview-Erweiterung, um Ihre Änderungen in VS Code in Echtzeit während der Entwicklung zu sehen.
Fügen wir ein zusätzliches Feature hinzu. Geben Sie die folgende Aufforderung in das Chat-Eingabefeld ein
```
Add a filter system with buttons to show all tasks, only completed tasks, or only pending tasks. Update the styling to match the existing design.
```
Beachten Sie, wie der Agent Änderungen über mehrere Dateien hinweg koordiniert, um dieses Feature vollständig zu implementieren.

Agents sind hervorragend darin, High-Level-Anforderungen zu verstehen und sie in funktionierenden Code zu übersetzen. Sie sind perfekt für die Implementierung neuer Features, die Refaktorierung großer Codeabschnitte oder die Erstellung kompletter Anwendungen von Grund auf.

Schritt 3: Präzise Anpassungen mit Inline-Chat vornehmen

Während Agents große Features bearbeiten, ist der Inline-Chat des Editors perfekt für gezielte Verbesserungen an bestimmten Codeabschnitten innerhalb einer Datei. Lassen Sie uns ihn verwenden, um die Aufgabenmanager-App zu verbessern.

Öffnen Sie Ihre JavaScript-Datei und lokalisieren Sie den Code, der neue Aufgaben hinzufügt.
Wählen Sie den Codeblock aus und drücken Sie dann ⌘I (Windows, Linux Ctrl+I), um den Inline-Chat des Editors zu öffnen.

Hinweis
Der genaue Code kann variieren, da große Sprachmodelle nichtdeterministisch sind.
Geben Sie die folgende Aufforderung ein
```
Add input validation to prevent adding empty tasks and trim whitespace from task text.
```
Beachten Sie, wie der Inline-Chat sich speziell auf den ausgewählten Code konzentriert und gezielte Verbesserungen vornimmt.
Überprüfen Sie die Änderungen und wählen Sie Beibehalten, um sie anzuwenden.

Der Editor-Inline-Chat ist ideal für kleine, fokussierte Änderungen, ohne die breitere Codebasis zu beeinträchtigen, wie z. B. das Hinzufügen von Fehlerbehandlung, das Refaktorieren einzelner Funktionen oder das Beheben von Fehlern.

Schritt 4: Ihre KI-Erfahrung personalisieren

Die Anpassung des Chats verbessert seine Leistung für Ihre spezifischen Bedürfnisse und Ihren Programmierstil. Sie können benutzerdefinierte Anweisungen einrichten und spezialisierte benutzerdefinierte Agents erstellen. Erstellen wir ein vollständiges Personalisierungssetup für Ihr Projekt.

Benutzerdefinierte Anweisungen erstellen

Benutzerdefinierte Anweisungen informieren die KI über Ihre Programmierpräferenzen und -standards. Diese werden automatisch auf alle Chat-Interaktionen angewendet.

Erstellen Sie einen neuen Ordner namens .github im Stammverzeichnis Ihres Projekts.
Erstellen Sie innerhalb des .github-Ordners eine Datei namens copilot-instructions.md.

Fügen Sie den folgenden Inhalt hinzu

# Project general coding guidelines

## Code Style
- Use semantic HTML5 elements (header, main, section, article, etc.)
- Prefer modern JavaScript (ES6+) features like const/let, arrow functions, and template literals

## Naming Conventions
- Use PascalCase for component names, interfaces, and type aliases
- Use camelCase for variables, functions, and methods
- Prefix private class members with underscore (_)
- Use ALL_CAPS for constants

## Code Quality
- Use meaningful variable and function names that clearly describe their purpose
- Include helpful comments for complex logic
- Add error handling for user inputs and API calls

Speichern Sie die Datei. Diese Anweisungen gelten nun für alle Ihre Chat-Interaktionen in diesem Projekt.
Testen Sie die benutzerdefinierten Anweisungen, indem Sie den Agenten bitten, ein neues Feature hinzuzufügen
```
Add a dark mode toggle button to the task manager.
```
Beachten Sie, wie der generierte Code den von Ihnen angegebenen Richtlinien folgt. VS Code unterstützt fortgeschrittenere benutzerdefinierte Anweisungen, wie z. B. das Anwenden von Anweisungen für bestimmte Dateitypen.

Erstellen Sie einen benutzerdefinierten Agenten für Code-Reviews

Benutzerdefinierte Agents erstellen spezialisierte KI-Personas für bestimmte Aufgaben. Lassen Sie uns einen "Code Reviewer"-Agenten erstellen, der sich auf die Analyse und das Geben von Feedback zu Code konzentriert. In der Definition eines benutzerdefinierten Agents können Sie die Rolle der KI, spezifische Richtlinien und die Tools, die sie verwenden kann, festlegen.

Öffnen Sie die Befehlspalette und führen Sie den Befehl Chat: Neuer benutzerdefinierter Agent aus.
Wählen Sie .github/agents als Speicherort aus.

Diese Option fügt den benutzerdefinierten Agenten zu Ihrem Arbeitsbereich hinzu und ermöglicht es anderen Teammitgliedern, ihn zu verwenden, wenn sie das Projekt öffnen.
Benennen Sie den benutzerdefinierten Agenten "Code Reviewer". Dadurch wird eine neue Datei namens Code Reviewer.md im Ordner .github/agents erstellt.

Ersetzen Sie den Inhalt der Datei durch den folgenden Inhalt. Beachten Sie, dass dieser benutzerdefinierte Agent keine Codeänderungen zulässt.

---
description: 'Review code for quality and adherence to best practices.'
tools: ['usages', 'vscodeAPI', 'problems', 'fetch', 'githubRepo', 'search']
---
# Code Reviewer agent

You are an experienced senior developer conducting a thorough code review. Your role is to review the code for quality, best practices, and adherence to [project standards](../copilot-instructions.md) without making direct code changes.

When reviewing code, structure your feedback with clear headings and specific examples from the code being reviewed.

## Analysis Focus
- Analyze code quality, structure, and best practices
- Identify potential bugs, security issues, or performance problems
- Evaluate accessibility and user experience considerations

## Important Guidelines
- Ask clarifying questions about design decisions when appropriate
- Focus on explaining what should be changed and why
- DO NOT write or suggest specific code changes directly

Speichern Sie die Datei. In der Chat-Ansicht können Sie diesen benutzerdefinierten Agenten nun aus dem Agenten-Picker auswählen.
Testen Sie Ihren benutzerdefinierten Agenten, indem Sie Code Reviewer aus dem Agenten-Picker auswählen und die folgende Aufforderung eingeben
```
Review my full project
```
Beachten Sie, wie die KI jetzt als Code-Reviewer agiert und Analysen und Verbesserungsvorschläge liefert.

Schritt 5: Intelligente Aktionen für vorgefertigte KI-Unterstützung nutzen

Intelligente Aktionen bieten KI-Funktionalität, die direkt in die Benutzeroberfläche von VS Code integriert ist und sich nahtlos in Ihren Entwicklungs-Workflow einfügt. Im Gegensatz zu Chat-Interaktionen erscheinen intelligente Aktionen kontextbezogen dort, wo Sie sie am dringendsten benötigen. Betrachten wir die Generierung von Commit-Nachrichten als Beispiel.

Öffnen Sie die Ansicht **Quellcodeverwaltung**, indem Sie ⌃⇧G (Windows, Linux Ctrl+Shift+G) drücken oder das Symbol für die Quellcodeverwaltung in der Aktivitätsleiste auswählen.
Wenn Sie noch kein Git-Repository für Ihr Projekt initialisiert haben, tun Sie dies, indem Sie in der Ansicht Quellcodeverwaltung Repository initialisieren auswählen.
Stagen Sie Ihre Änderungen, indem Sie auf das +-Symbol neben den Dateien klicken, die Sie committen möchten.
Wählen Sie das **Glitzer-Symbol** aus, um eine Commit-Nachricht basierend auf Ihren gestagten Änderungen zu generieren.

Die KI analysiert Ihre gestagten Änderungen und generiert eine beschreibende Commit-Nachricht, die den Konventionen für Commits folgt. Die KI berücksichtigt
- Welche Dateien wurden geändert
- Die Art der Änderungen (neue Features, Fehlerbehebungen, Refactoring)
- Der Umfang und die Auswirkungen von Änderungen
Überprüfen Sie die generierte Nachricht. Wenn Sie damit zufrieden sind, fahren Sie mit Ihrem Commit fort. Wenn Sie einen anderen Stil oder Fokus wünschen, wählen Sie erneut das Glitzer-Symbol aus, um eine alternative Nachricht zu generieren.

Intelligente Aktionen wie die Generierung von Commit-Nachrichten zeigen, wie KI sich natürlich in Ihren bestehenden Workflow integriert, ohne dass Sie zu Chat-Interfaces wechseln müssen. VS Code bietet viele weitere intelligente Aktionen, die Sie beim Debugging, Testen und vielem mehr unterstützen.

Nächste Schritte

Herzlichen Glückwunsch! Sie haben eine vollständige Aufgabenverwaltungsanwendung erstellt und gelernt, wie Sie effektiv mit KI über die Kernfunktionen von VS Code arbeiten.

Sie können die Fähigkeiten Ihrer KI weiter verbessern, indem Sie andere Anpassungsoptionen erkunden

Fügen Sie spezialisiertere Agents für verschiedene Aufgaben wie Planung, Debugging oder Dokumentation hinzu.
Erstellen Sie benutzerdefinierte Anweisungen für bestimmte Programmiersprachen oder Frameworks.
Erweitern Sie die KI-Fähigkeiten mit zusätzlichen Tools von MCP-Servern (Model Context Protocol) oder VS Code-Erweiterungen.