Lekce 03.4: Agent a vaše IDE: Spolupráce bez konfliktů (Agent and Your IDE)

⏱️ 3 min čtení • Lekce 03.4

🧠 Mentální model & teoretický rozbor

Úspěšný vývojář nesoupeří s agentem o to, kdo napíše více řádků. Úspěch spočívá v synergické dělbě rolí mezi člověkem v grafickém editoru (IDE) a agentem v terminálu:

┌─────────────────────────────────────────────────────────────────────────┐
│ LIDSKÝ INŽENÝR V IDE (VS Code / WebStorm / Cursor)                     │
│ 👁️ Role: Tech Lead & Architekt                                          │
│ • Okamžitá vizuální kontrola Git diffu (barevné zvýraznění změn).       │
│ • Čtení kódu v kontextu celého projektu.                                │
│ • Blesková ruční oprava drobných překlepů (2 sekundy).                  │
└────────────────────────────────────┬────────────────────────────────────┘
                                     │ Vizuální dohled v reálném čase
┌────────────────────────────────────▼────────────────────────────────────┐
│ AGENTICKÝ MOTOR V TERMINÁLU (Antigravity agy / Claude Code)             │
│ 🤖 Role: Autonomní exekuční motor                                       │
│ • Rutinní refaktoring desítek řádků.                                    │
│ • Spouštění testovacích cyklů a analýza stack trace chyb.               │
│ • Psaní jednotkových testů a boilerplate kódu.                          │
└─────────────────────────────────────────────────────────────────────────┘

Pokud se pokusíte dělat vše ručně, budete pomalí. Pokud necháte agenta pracovat bez vizuální kontroly v IDE, dříve či později zanesete do repozitáře skrytý dluh.

🏢 Realistický scénář z praxe

Agent refaktoruje databázové dotazy. V jednom souboru zapomněl importovat typ UserRole.

Nezkušený vývojář přepne do terminálu a napíše prompt: „Zapomněl jsi na import UserRole v řádku 12, přidej ho tam.“
- Ztráta: 30 sekund čekání, 4 000 tokenů, 1 zbytečný tah.
Efektivní inženýr vidí červené podtržení v editoru, stiskne Alt + Enter (Auto-import v IDE), stiskne Cmd + S a je hotovo za 1 sekundu. Agent v dalším kroku testem projde bez zbytečného promptu!

💻 Konkrétní ukázky kódu & promptů

Doporučené rozložení obrazovky pro Real Engineering:

Levá polovina obrazovky: Vaše IDE (VS Code, WebStorm, Cursor) s otevřeným Git diff panelem a hlavními zdrojovými soubory.
Pravá polovina obrazovky: Integrovaný nebo samostatný terminál s běžícím agentem (agy nebo claude).

Sledování změn v reálném čase přes Git:

Kdykoliv agent dokončí krok, můžete přímo v terminálu zkontrolovat:

git diff --stat
git diff src/services/auth.ts

Přesně vidíte, které řádky přibyly zeleně a které zmizely červeně.

⚠️ Analýza selhání & Anti-patterns

Anti-pattern: “Slepá důvěra” bez otevřeného diffu

Vývojář zadá 5 promptů po sobě a ani jednou neotevře modifikovaný soubor v editoru.

Po hodině zjistí, že agent sice splnil úkol, ale smazal klíčové komentáře, přejmenoval veřejné exporty a změnil strukturu konfigurace.
Pravidlo: Každý krok agenta musí být zkontrolován v Git diffu předtím, než zadáte další úkol!

🛠️ Inženýrský postup krok za krokem (Playbook)

Mějte projekt otevřený v oblíbeném IDE.
Otevřete integrovaný terminál (Ctrl + ~ ve VS Code) a spusťte agy (nebo claude).
Když agent upraví soubor, sledujte, jak se změna okamžitě promítne v editoru.
Drobnou kosmetiku (mezery, importy) opravujte bleskově přímo v IDE.
Větší logické úkoly a spouštění testů svěřujte agentovi.

🧪 Praktické cvičení (Hands-on Lab)

Úkol:

Vyzkoušejte si koordinaci mezi editorem a CLI agentem.

Kroky:

Otevřete libovolný soubor v editoru a současně spusťte agy (nebo claude) v terminálu vedle.
Zadejte agentovi: „Přidej na konec tohoto souboru komentář s dnešním datem.“
Sledujte, jak se soubor v editoru automaticky zaktualizuje bez nutnosti opětovného načítání.
Ručně v editoru smažte jedno písmeno, uložte a vyzvěte agenta, aby soubor zvalidoval linterem nebo testem.