Lesson 3 of 30 ~15 min
Course progress
0%

VS Code Workflow

Efektivní práce s Claude ve VS Code - extensions, keyboard shortcuts, best practices.

VS Code je nejpopulárnější editor a integrace s Claude může dramaticky zvýšit produktivitu.

GitHub Copilot vs Claude

FeatureGitHub CopilotClaude
Inline completion✅ Excelentní⚠️ Přes chat
Complex reasoning⚠️ Omezené✅ Excelentní
Context window~8K tokens200K tokens
Cena$10/měsícPay per use

Tip: Používejte oboje - Copilot pro inline, Claude pro komplexní úlohy.

Claude Extension Setup

# Install Claude extension (pokud dostupná)
code --install-extension anthropic.claude-vscode

Nebo používejte Claude přes:

  • Browser (claude.ai) - side by side
  • Terminal (API)
  • Custom webview

Efektivní workflow

Pattern 1: Side-by-Side

┌─────────────────┬─────────────────┐
│   VS Code       │   Claude.ai     │
│                 │                 │
│   [Your code]   │   [Chat]        │
│                 │                 │
└─────────────────┴─────────────────┘

Keyboard shortcuts:

  • Cmd+Tab - přepínání mezi okny
  • Cmd+C / Cmd+V - kopírování kódu

Pattern 2: Terminal Integration

# scripts/ask-claude.py
#!/usr/bin/env python3
import sys
from anthropic import Anthropic

client = Anthropic()

question = sys.argv[1] if len(sys.argv) > 1 else input("Question: ")

response = client.messages.create(
    model="claude-opus-4-5-20250101",
    max_tokens=2000,
    messages=[{"role": "user", "content": question}]
)

print(response.content[0].text)
# Použití z VS Code terminálu
python scripts/ask-claude.py "Explain this regex: ^[a-z]+$"

Pattern 3: Custom Task

// .vscode/tasks.json
{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Ask Claude",
      "type": "shell",
      "command": "python",
      "args": [
        "${workspaceFolder}/scripts/ask-claude.py",
        "${input:question}"
      ],
      "presentation": {
        "reveal": "always",
        "panel": "new"
      }
    }
  ],
  "inputs": [
    {
      "id": "question",
      "description": "What do you want to ask Claude?",
      "type": "promptString"
    }
  ]
}

Context sharing

Sdílení celých souborů

# Vytvořte context snapshot
cat src/important-file.ts | pbcopy
# Paste do Claude s kontextem

VS Code snippets pro Claude prompts

// .vscode/snippets/claude.code-snippets
{
  "Claude Code Review": {
    "prefix": "claude-review",
    "body": [
      "Review this code for:",
      "1. Bugs and edge cases",
      "2. Performance issues",
      "3. Security vulnerabilities",
      "4. Code style",
      "",
      "```${TM_SELECTED_TEXT}```"
    ]
  },
  "Claude Explain": {
    "prefix": "claude-explain",
    "body": [
      "Explain this code step by step:",
      "",
      "```${TM_SELECTED_TEXT}```"
    ]
  }
}

Output handling

Aplikování Claude výstupu

  1. Claude vygeneruje kód
  2. Zkopírujte
  3. Ve VS Code: Cmd+Shift+P → “Paste and Format”

Diff review

# Claude navrhne změny - uložte jako patch
pbpaste > suggested-changes.patch
git apply --check suggested-changes.patch  # validate
git apply suggested-changes.patch           # apply

Tipy pro produktivitu

  1. Dedikovaný workspace - Claude chat na druhém monitoru
  2. Template knihovna - Uložené prompty pro opakující se úlohy
  3. Keyboard-driven - Minimalizujte přepínání kontextu
  4. Verzování promptů - .claude/ složka v projektu