Skip to main content
Inhaltsverzeichnis

Inhaltsverzeichnis

Lesezeit: 20 Min.
#automation#claude_code#cli#terminal#ai_tools
Einsteiger20 Min.

Claude Code: Einsteiger-Grundlagen

Umfassender Leitfaden zur Arbeit mit Claude Code von Anthropic: CLI-Installation, Authentifizierung, Berechtigungsverwaltung, Tastenkürzel und schrittweise Entwicklung des ersten Projekts.

Veröffentlicht:
FÜR KI-AGENTChatGPTClaude

Claude Code ist das offizielle Command-Line-Interface von Anthropic. Es kann Quellcode lesen, Änderungen vornehmen, Befehle ausführen und direkt im Terminal mit Git interagieren – alles über einen natürlichen Sprachdialog. Es handelt sich dabei nicht um ein separates Webchat-Fenster, aus dem man Code manuell kopieren muss, sondern um einen vollwertigen autonomen Agenten, der unmittelbar innerhalb Ihres Projekts operiert.

Dieses Handbuch ist Ihr Startpunkt für den schnellen Einstieg in Claude Code. Das Material ist in drei logische Blöcke unterteilt:

  • Modul 1 – Installation und Basiskonfiguration: Deployment des CLI, Authentifizierung via API oder OAuth, erster Start und Überblick über die Konfigurationsdateien.
  • Modul 2 – Arbeitssitzung und Interaktion: Kontextmanagement, Hotkeys, Slash-Befehle, Non-Interactive-Modus und Speicheroptimierung (/compact).
  • Modul 3 – Sicherheit und Berechtigungsmodell: Einrichtung der settings.json-Dateien, Erstellung von Allow- und Deny-Listen für Bash-Befehle.

Jedes Modul wird durch eine praktische Übung abgerundet, bei der Sie eine reale Next.js-Webkomponente erstellen, verfeinern und finalisieren.


1. Was ist Claude Code und Systemanforderungen

1.1. Was ist Claude Code und seine Unterschiede zum Webchat

Claude Code integriert sich als Terminal-Assistent in Ihren täglichen Entwickler-Stack. Im Gegensatz zu einem traditionellen Webchat verfügt der Agent über einen Satz Tools:

  • Lesen und Suchen: Inspektion einzelner Dateien, Suche nach Vorkommen über reguläre Ausdrücke (grep) und Orientierung in der Projektstruktur (glob).
  • Code-Modifikation: Generierung punktueller Dateiänderungen über den Patch/Diff-Mechanismus, wodurch das vollständige Überschreiben großer Dateien vermieden wird.
  • Ausführung von Systembefehlen: Starten von Tests, Compilern, Lintern und Git-Befehlen mit der Möglichkeit, Exit-Codes und Kompilierungsfehler zu analysieren.

1.2. Systemanforderungen und Umgebungsvorbereitung

Stellen Sie vor der Installation sicher, dass die folgenden Komponenten vorhanden sind:

  • Betriebssystem: macOS, eine aktuelle Linux-Distribution oder Windows über das Subsystem WSL2.
  • Laufzeitumgebung: Node.js Version 18.0 oder neuer (überprüfen Sie dies mit node -v).
  • Versionskontrollsystem: Git Version 2.20+ (überprüfen Sie dies mit git --version).
  • Zugang zu Anthropic-Modellen: Ein aktiver API-Key der Anthropic Console oder ein Konto mit einem Claude Max Plan.

2. Installation und Authentifizierung

2.1. Installation des CLI über npm und Paketmanager

Claude Code wird als globales Paket im npm-Registry verteilt. Führen Sie den Installationsbefehl im Terminal aus:

bash
npm install -g @anthropic-ai/claude-code

Überprüfen Sie die korrekte Installation der Binary-Datei:

bash
claude --version

Wenn das Terminal einen Fehler command not found zurückgibt, fehlt der Pfad zu den globalen npm-Paketen in der Umgebungsvariable PATH. Eine detaillierte Lösung finden Sie im Diagnoseblock unten.

2.2. Authentifizierung und Verknüpfung des Anthropic-Kontos

Es werden zwei Autorisierungsmethoden unterstützt:

Variante 1 – Anthropic API-Key:
Geben Sie das Token über eine Umgebungsvariable an:

bash
export ANTHROPIC_API_KEY="sk-ant-ваш-ключ-api"

Damit der Key zwischen Neustarts des Terminals erhalten bleibt, fügen Sie den Befehl zur Konfigurationsdatei Ihrer Shell hinzu:

bash
echo 'export ANTHROPIC_API_KEY="sk-ant-ваш-ключ-api"' >> ~/.zshrc source ~/.zshrc

Variante 2 – Claude Max Abonnement (OAuth):
Wenn Sie ein Claude Max Abonnement ($100 oder $200/Monat) nutzen, melden Sie sich ohne separaten API-Key an:

bash
claude login

Der Befehl öffnet standardmäßig eine Sitzung in Ihrem Browser zur Bestätigung des Zugriffs.


3. Erster Start und Basiskonfiguration

3.1. Erster Start im Projekt und Umgebungsdverifizierung

Wechseln Sie in das Verzeichnis eines beliebigen Code-Projekts und initialisieren Sie Claude Code:

bash
cd ~/my-project claude

Nach dem Start befinden Sie sich in einer interaktiven Kommando-Umgebung. Versuchen Sie, eine grundlegende Testanfrage zu senden:

text
Summarize the structure of this project and list the main technologies used.

Claude überprüft automatisch die package.json, Build-Konfigurationen und die Verzeichnisstruktur und erstellt anschließend eine kurze Einführungsübersicht.

3.2. Basiskonfiguration und Fehlerbehebung (Troubleshooting)

Die Konfigurationsdateien befinden sich im Verzeichnis ~/.claude/:

  • ~/.claude/settings.json – Globale Berechtigungen und Einschränkungen für den Tool-Zugriff.
  • ~/.claude/CLAUDE.md – Persönliche Systemanweisungen des Benutzers.
  • .claude/settings.json – Projekteinstellungen (werden im Versionskontrollsystem fixiert).
  • CLAUDE.md – Anweisungen auf Repository-Ebene (Architektur, Linting-Regeln).
Problem beim StartUrsacheIngenieurslösung
claude: command not foundnpm bin-Verzeichnis nicht in PATH hinzugefügtPfad zur Shell hinzufügen: export PATH="$(npm config get prefix)/bin:$PATH"
Autorisierungsfehler 401 UnauthorizedUngültiger oder abgelaufener API-KeyFühren Sie claude logout aus, überprüfen Sie den Wert von ANTHROPIC_API_KEY und wiederholen Sie claude login
Langsame SitzungsinitialisierungIndexierung eines großen RepositoriesDer erste Start erfordert die Analyse des Dateibaums; folgende Iterationen nutzen den Cache

4. Praxis: Erstellung der ersten Anwendung

4.1. Schritt-für-Schritt-Algorithmus für das Prototyp-Deployment

Das Ziel der ersten Übung ist es, praktisch einen minimalen Client-Komponenten für Next.js / React mit Claude Code zu erstellen:

  1. Bitten Sie Claude, eine neue Seiten-Datei app/practice/page.tsx zu erstellen.
  2. Beauftragen Sie ihn, einen einfachen Ladezustand und einen Button zum Aufrufen eines Test-Endpunkts zu beschreiben.
  3. Überprüfen Sie die Funktionsfähigkeit der Oberfläche unter http://localhost:3000/practice.

4.2. Startvorlage der Komponente und lokale Überprüfung

Der Basiscode des Prototyps:

tsx
// app/practice/page.tsx 'use client'; import { useState } from 'react'; export default function PracticePage() { const [result, setResult] = useState(''); const [loading, setLoading] = useState(false); async function runTest() { setLoading(true); try { const response = await fetch('/api/test'); const data = await response.json(); setResult(data.message || 'Запит виконано успішно'); } catch { setResult('Помилка виконання тестового запиту'); } finally { setLoading(false); } } return ( <div className="p-8 max-w-2xl mx-auto font-sans"> <h1 className="text-3xl font-bold mb-6">Практична вправа 1: Прототип</h1> <button onClick={runTest} disabled={loading} className="bg-black text-white px-6 py-3 rounded-lg hover:bg-neutral-800 disabled:opacity-50 transition" > {loading ? 'Виконується...' : 'Запустити тест'} </button> {result && ( <div className="mt-6 p-4 bg-neutral-100 rounded-lg border border-neutral-200"> {result} </div> )} </div> ); }

5. Arbeitssitzung und Dialogzyklus

5.1. Start einer interaktiven REPL-Sitzung

Für die tägliche Entwicklung wechseln Sie in das Arbeitsverzeichnis und aktivieren den interaktiven Read-Eval-Print-Loop (REPL):

bash
cd ~/my-project claude

Claude behält den Gesprächskontext während der Sitzung bei, erinnert sich an geänderte Dateien und erkannte Fehler. Die Kommunikation erfolgt in natürlicher Sprache ohne formalisierte Syntax.

5.2. Dialogzyklus: Planung, Tools und Ausführung

Die Arbeit des Agenten folgt einem fünfphasigen Zyklus:

mermaid
flowchart TD A["Користувач ставить завдання природною мовою"] --> B["Claude аналізує кодову базу та формує план"] B --> C["Агент запитує дозвіл на модифікацію файлів/команд"] C --> D["Виконання затверджених дій та валідація дифу"] D --> E["Користувач перевіряє результат та надає фідбек"]

Ein typisches Interaktionsfragment:

  • Anfrage: Füge einen Ladeindikator auf der Dashboard-Seite hinzu.
  • Analyse: Claude liest app/dashboard/page.tsx und erkennt das Fehlen einer Datenwartungsverarbeitung.
  • Vorschlag: Erstellung einer loading.tsx-Komponente und Umschließen des Blocks mit Suspense.
  • Zusammenfassung: Der Agent zeigt einen punktgenauen Diff an und wartet auf Ihre Genehmigung.

6. Hotkeys, Befehle und Arbeitsmodi

6.1. Hotkeys und Slash-Befehle zur Kontextsteuerung

Effiziente Navigation im Terminal basiert auf systemischen Abkürzungen:

KombinationZweck
EnterSenden der aktuellen Nachricht an den Agenten
EscapeSofortiges Abbrechen der aktiven Generierung oder Tool-Ausführung
Ctrl+CSauberes Beenden der Claude Code-Sitzung
Up / DownDurchsuchen der vorherigen Anfragehistorie
Shift+TabUmschalten zwischen einzeiliger und mehrzeiliger Eingabe

Spezielle eingebaute Slash-Befehle zur Steuerung der Umgebung:

  • /help – Liste der verfügbaren Direktiven.
  • /clear – Zurücksetzen der aktuellen Nachrichtenhistorie.
  • /compact – Komprimierung des Kontextfensters zur Token-Einsparung ohne Verlust des Wesentlichen.
  • /model – Schneller Wechsel des aktuellen Modells (z. B. Umschalten zwischen Sonnet und Opus).
  • /permissions – Überprüfung der aktiven Berechtigungen für den Aufruf von Systemutilities.

6.2. Non-Interactive-Modus und Tipps für effizientes Arbeiten

Verwenden Sie den Flag -p (print), wenn Sie Claude Code in Automatisierungsskripten oder für einmalige Operationen einsetzen möchten:

bash
# Отримання швидкої довідки про проєкт claude -p "Яку базу даних використовує цей проєкт?" # Передача логів для аналізу через пайплайн cat error.log | claude -p "Знайди першопричину збою та запропонуй рішення"

💡 Empfehlungen für stabiles Arbeiten:

  • Formulieren Sie Anforderungen konkret: Statt „korrigiere das Formular“ schreiben Sie „füge Debounce zum Klick-Handler des Submit-Buttons des Formulars hinzu“.
  • Führen Sie regelmäßig /compact aus, wenn die Länge des Dialogs 30–40 Schritte überschreitet.

7. Praxis: Verfeinerung der Anwendung

7.1. Refactoring und Verbesserung der Codebasis durch Claude

Im zweiten praktischen Teil erweitern wir den erstellten Prototyp, indem wir Claude beauftragen, die Behandlung von Edge Cases und die Typisierung zu verbessern.

Senden Sie dem Agenten folgende Anweisung:

text
Відкрий app/practice/page.tsx. Додай коректну строгу типізацію TypeScript, блок перехоплення помилок try/catch з відображенням тексту помилки на червоному тлі, та додай анімований CSS-спінер під час завантаження.

7.2. Erweiterung der Funktionalität: Styling, Fehlerbehandlung und Animation

Der aktualisierte Seiten-Code:

tsx
// app/practice/page.tsx - Доопрацьована версія 'use client'; import { useState } from 'react'; export default function PracticePage() { const [result, setResult] = useState<string | null>(null); const [error, setError] = useState<string | null>(null); const [loading, setLoading] = useState(false); async function runTest() { setLoading(true); setError(null); try { const response = await fetch('/api/test'); if (!response.ok) throw new Error(`Помилка сервера: код ${response.status}`); const data = await response.json(); setResult(data.message || 'Операцію успішно завершено'); } catch (err: unknown) { setError(err instanceof Error ? err.message : 'Сталася непередбачена помилка'); } finally { setLoading(false); } } return ( <div className="p-8 max-w-2xl mx-auto font-sans"> <h1 className="text-3xl font-bold mb-4">Практична вправа 2: Доопрацювання</h1> <p className="text-neutral-600 mb-6">Тестування обробки винятків та динамічних станів.</p> <button onClick={runTest} disabled={loading} className="flex items-center gap-2 bg-black text-white px-6 py-3 rounded-lg hover:bg-neutral-800 disabled:opacity-50 transition" > {loading && ( <span className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" /> )} {loading ? 'Обробка запиту...' : 'Виконати дію'} </button> {error && ( <div className="mt-6 p-4 bg-red-50 text-red-700 rounded-lg border border-red-200"> {error} </div> )} {result && ( <div className="mt-6 p-4 bg-neutral-100 text-neutral-800 rounded-lg border border-neutral-200"> {result} </div> )} </div> ); }

8. Berechtigungsmodell und Sicherheit

8.1. Architektur des Berechtigungsmodells und Risikostufen der Tools

Das Sicherheitssystem von Claude Code teilt alle verfügbaren Operationen in zwei fundamentale Kategorien basierend auf dem potenziellen Risiko ein:

ZugriffslevelVerfügbare OperationenAusführungsmechanismus
Sicher (Read-only)Read, Grep, Glob, VerzeichnislistingWerden automatisch ohne Benutzerabfragen ausgeführt
Potenziell gefährlichEdit, Write, Bash, Löschen von Dateien, git pushErfordern eine explizite Bestätigung vor der Ausführung

8.2. Mechanik der Genehmigung und Ablehnung potenziell gefährlicher Aktionen

Vor der Ausführung einer riskanten Aktion stoppt Claude die Ausführung und zeigt eine Abfrage an:

text
Claude wants to run: npm install express Allow? (y/n/always)

Verfügbare Auswahlmöglichkeiten:

  • y (yes) – Genehmigt den spezifischen einmaligen Aufruf.
  • n (no) – Lehnt die Aktion ab und gibt den Grund für die Ablehnung an.
  • always (oder a) – Gewährt die Erlaubnis für den Aufruf dieses Tools bis zum Ende der aktuellen Arbeitssitzung.

9. Einstellungsdateien und Rechteverwaltung

9.1. Globale und projektbezogene Einstellungsdateien (settings.json)

Um permanente Regeln festzulegen, erstellen oder bearbeiten Sie die globale Datei ~/.claude/settings.json:

json
{ "permissions": { "allow": [ "Read", "Glob", "Grep", "Edit", "Write", "Bash(npm run *)", "Bash(git status)" ], "deny": [ "Bash(rm -rf *)", "Bash(sudo *)" ] } }

9.2. Muster für Bash-Befehle und Überprüfung über /permissions

Der Abschnitt permissions.allow unterstützt flexible Suchmasken (Glob Patterns):

  • Bash(npm test *) – Erlaubt das Ausführen von Testpaketen ohne Bestätigungen.
  • Bash(git commit *) – Erlaubt das Committen von Änderungen.
  • Bash(rm -rf *) in der deny-Liste – Garantiert die absolute Blockierung von Massenlöschoperationen.

Um die gültigen Regeln jederzeit in der Sitzung einzusehen, führen Sie den Befehl /permissions aus.


10. Best Practices für Sicherheit und Arbeit

10.1. Strategie der Zugriffskontrolle: Prinzip der geringsten Privilegien

  • Schrittweise Rechteerweiterung: Beginnen Sie die Arbeit mit voller manueller Moderation. Fügen Sie Befehle nur dann zur allow-Liste hinzu, wenn Sie sich von der Stabilität des Agentenverhaltens überzeugt haben.
  • Verbot von Wildcards für Bash: Geben Sie niemals "Bash(*)" in den erlaubten Tools an – dies hebt die schützende Sandbox vollständig auf.
  • Aktive Nutzung von deny: Blockieren Sie destruktive Utilities (sudo, mkfs, dd) explizit, um versehentliche Systemschäden zu verhindern.

10.2. Schutz von Umgebungssecrets und sorgfältiger Audit von Diffs

  • Token-Isolation: Claude Code hat Zugriff auf die Umgebungsvariablen der aktuellen Shell. Halten Sie keine kritischen Keys für Production-Datenbanken in der Arbeitssitzung bereit.
  • Diff-Prüfung vor Genehmigung: Analysieren Sie immer den vorgeschlagenen Diff der Dateiänderung, um rechtzeitig versehentliches Löschen angrenzender Module zu bemerken.

11. Praxis: Finale Version der Anwendung

11.1. Gesicherter Workflow und Integration von Checks

Im letzten praktischen Block erstellen wir eine vollwertige production-ready Monitoring-Dashboard-Komponente:

  1. Fixieren Sie die Sicherheitsregeln in .claude/settings.json.
Dieser Leitfaden ist komplett kostenlos. Wenn er Ihnen einen Abend erspart hat, können Sie das Wachstum des Projekts unterstützen.
Autor unterstützen