VSCode — tvoje AI pracoviště (první projekt, Markdown, terminál)

⏱ Odhadovaný čas 45 min

📍 Pozice Den 3, blok 2 / 7

🎯 Po tomto bloku budeš umět

• Orientuješ se v VSCode (Explorer, Editor, Terminál, Activity Bar)
• Vytvoříš projekt (složku) a v něm soubory CLAUDE.md + poznamky.md
• Umíš přečíst Markdown v „human" podobě (preview) + pracovat s terminálem

🎯 Proč VSCode?

VSCode (Visual Studio Code) je editor — jako Word, ale pro kódování a dokumenty. Je zdarma, rychlý, používá ho většina developerů na světě.

Proč tenhle nástroj?

• 🗂 Projekt = složka — každý projekt má svou složku, v ní všechny soubory
• 📝 Editor vše-v-jednom — Markdown, Python, HTML, txt, cokoli
• 🖥 Integrovaný terminál — můžeš spouštět příkazy bez opouštění editoru
• 🤝 Claude Code v něm perfektně funguje — claude spustíš v terminálu VSCode a on ví, na jakém projektu pracuješ

Dnes si osvojíš základy — zbytek přijde sám při reálné práci.

---

🗺 Část 1: Tour VSCode (8 min)

Otevři VSCode (Start → Visual Studio Code nebo už máš ikonu).

Uvidíš pět hlavních oblastí:

1. Activity Bar (levé ikonky)

   • 📁 Explorer (soubory)
   • 🔍 Search (hledání napříč projektem)
   • 🌿 Source Control (git — později)
   • 🧩 Extensions (doplňky)
   • ⚙ Settings (vlevo dole)

2. Side Bar (vedle Activity Bar)

   • Když klikneš na 📁 Explorer, vidíš zde soubory svého projektu
   • Teď je prázdný (žádný projekt otevřený)

3. Editor (hlavní prostor uprostřed)

   • Tady vidíš otevřené soubory — každý v tabu
   • Teď je možná prázdný nebo ukazuje welcome screen

4. Panel (dole, skrytý)

   • Terminál, Problems, Output, Debug Console
   • Otevře se Ctrl + ` (backtick — klávesa vlevo od 1)

5. Status Bar (úplně dole, barevný pruh)

   • Info o projektu, encoding, řádek/sloupec kurzoru, …

Zkus:

• Klikni na ikonu 🧩 Extensions v Activity Bar → uvidíš doplňky
• Klikni zpět na 📁 Explorer

Pokud ti tahle orientace dává alespoň částečně smysl, pokračuj.

---

📂 Část 2: Vytvoř svůj první projekt (10 min)

Projekt v VSCode = složka na disku. Nic mystického.

Postup

1. File → Open Folder… (nebo Ctrl+K Ctrl+O).

2. V dialogu přejdi na Desktop (plochu):

   • Vlevo kliknutím na „Desktop” / „Plocha”

3. Vytvoř novou složku:

   • Klikni tlačítko „New Folder” (nová složka) nahoře v dialogu
   • Pojmenuj ji ai-skoleni-den3
   • Enter

4. Otevři tuhle novou složku — klikni na ni (jednou, ať je zvýrazněná) → tlačítko „Select Folder” nebo „Open”.

5. VSCode se znovu načte. V titulku okna vidíš ai-skoleni-den3 — gratulace, máš projekt.

6. V Exploreru (levá strana) vidíš název složky a je prázdná.

💡 Jak to funguje technicky

„Otevřel projekt” = VSCode si zapamatoval cestu ke složce a otevřel ji v Exploreru. Všechno, co teď v tom okně uděláš, se děje v té složce na disku. Můžeš si ji kdykoli otevřít v Průzkumníku Windows — je na ploše.

---

📄 Část 3: Vytvoř soubory CLAUDE.md a poznamky.md (10 min)

Dva způsoby vytvoření souboru

1. Způsob 1 — tlačítko v Exploreru:

   • V Exploreru (levá strana) nad seznamem souborů vidíš několik malých ikon
   • První ikona — „New File…” (pergamen s plusíkem)
   • Klikni, napiš CLAUDE.md, Enter

2. Způsob 2 — pravý klik:

   • Pravý klik do prázdného prostoru v Exploreru
   • New File…
   • Napiš poznamky.md, Enter

Teď máš dva prázdné soubory. Dobrá práce.

Co napsat do CLAUDE.md?

Klikni na CLAUDE.md v Exploreru → otevře se v Editoru. Napiš:

CLAUDE.md

- Odpovídej česky.
- Piš stručně, max 3 věty.
- Pokud něco nevíš, řekni to.

🤖 Co je CLAUDE.md?

CLAUDE.md je speciální soubor, který Claude Code automaticky čte, když ho spustíš v projektu. Obsahuje trvalé instrukce pro CC — jak má v tomto projektu pracovat. Dnes stačí vědět, že existuje. Zítra (Den 4) se do něho podíváme hlouběji.

Ulož soubor: Ctrl + S. Uvidíš, že ze jména záložky (tabu) zmizela tečka — tečka = „neuložené změny”.

Co napsat do poznamky.md? — tvoje pracovní plocha pro Den 3

Tenhle soubor použiješ celý dnešní den — poznámky z videa, otázky na lektora, reflexe. Na check-inu ho ukážeš Miroslavovi.

Napiš do něj tuhle strukturu (sekce doplníš během dne):

# Moje poznámky — Den 3 AI školení

## Z videa Kevina Stratverta (doplním v Bloku 02)

1. **3 typické úkoly, které s Claude Code děláš:**
   - (doplním po videu)

2. **Co je permission prompt a jak vypadá:**
   - (doplním po videu)

3. **Co je Plan Mode a kdy ho použít:**
   - (doplním po videu)

## Otázky na polední check-in s Miroslavem (Blok 05)

- (piš si během dne všechno, co ti není jasné)

## Reflexe — co mi dnes šlo a nešlo

- (na konci dne)

Ulož Ctrl+S.

💡 Proč tenhle soubor, ne prompt library v Notion?

Prompt library (sbírka všech tvých promptů) zůstává tam, kde jsi ji začal/a v Dne 1 (Google Docs / Notion / …). Tenhle poznamky.md je lokální pracovní soubor pro Den 3 — přímo ve VSCode, po ruce, Miroslav ho uvidí v check-inu. Dvě různé věci, dvě různá místa.

---

👀 Část 4: Markdown preview — „human” podoba (5 min)

Napsal jsi #, -, **bold**, ale vidíš zdrojový text, ne jak to finálně vypadá. Tady je trik.

1. Otevři CLAUDE.md (klikni v Exploreru).

2. Stiskni Ctrl + Shift + V.

3. Uvidíš preview vedle editoru (split view):

   • # CLAUDE.md → velký nadpis
   • - Odpovídej česky. → • Odpovídej česky.
   • **tučně** → tučně

4. Preview se automaticky aktualizuje, když upravíš zdroj.

💡 Alternativa — preview v novém tabu

Ctrl + K, V (po Ctrl+K pusť, pak stiskni V) — preview se otevře v novém tabu místo split view. Vhodné, když chceš mít víc souborů otevřených.

Základní Markdown syntaxe (přilep na monitor)

Syntaxe	Výsledek
# Nadpis 1	Velký nadpis
## Nadpis 2	Střední nadpis
### Nadpis 3	Menší nadpis
**tučně**	tučně
*kurzíva*	kurzíva
- položka	• položka (odrážka)
1. položka	1. položka (číslovaný seznam)
`kód`	kód (inline kód)
```	kód blok (3 backticky)
[text](https://url)	text
---	vodorovná čára

Markdown je jazyk chytré poznámky — píšeš čistý text s jednoduchými značkami, nástroj ho převede na krásný dokument. Používají ho Wikipedia, GitHub, Discord, Notion a skoro celá AI komunita.

---

🖥 Část 5: Integrovaný terminál + Claude Code (7 min)

VSCode má terminál přímo v sobě — žádné přepínání do jiného okna.

1. Otevři terminál: stiskni Ctrl + ` (backtick, klávesa vlevo od 1 nahoře).

2. Uvidíš dole panel s terminálem. Prompt by měl vypadat nějak takto:

   PS C:\Users\tvojeJméno\Desktop\ai-skoleni-den3>

   Všimni si — terminál automaticky otevřen v tvé projektové složce. Žádné cd nemusíš dělat.

3. Sanity check Claude Code:

   claude --version

   Má vypsat např. @anthropic-ai/claude-code version 2.x.x.

To je vše pro Blok 01 — claude (bez --version) spustíš poprvé interaktivně v Bloku 03 Exp 2. Teď víš, že je nainstalovaný a funguje.

💡 Proč je integrovaný terminál super

• Kontext: je automaticky v projektové složce (žádné cd ani Step 0 drama jako u classic PowerShell)
• Udržuješ focus: nevypínáš VSCode pro spouštění příkazů
• Claude Code vidí tvé soubory: claude spuštěný tady má okamžitý přístup k souborům, které máš v Exploreru
• Můžeš mít víc terminálů: ikona „+” v terminálovém panelu otevře další

Minimum příkazů pro přežití

I když terminál používáš hlavně pro claude, párkrát se hodí i ostatní:

Příkaz	Co dělá
pwd	Kde teď jsem? (cesta k aktuální složce)
cd <složka>	Přesuň se do podsložky
cd ..	O úroveň výš
clear nebo cls	Vyčisti obrazovku terminálu
claude	Spusť Claude Code
claude --version	Ověř, že CC funguje

Zbytek (vytváření souborů, složek, navigace) děláš vizuálně v Exploreru — to je rychlejší a méně stresující.

---

⌨ Část 6: Klávesové zkratky, co ti ušetří čas (5 min)

Zkratka	Co dělá
Ctrl + S	Ulož soubor
Ctrl + `	Otevři / zavři terminál
Ctrl + Shift + V	Markdown preview (side-by-side)
Ctrl + P	Quick Open — začni psát jméno souboru, stiskni Enter
Ctrl + Shift + P	Command Palette — VŠECHNY příkazy VSCode
Ctrl + B	Skryj / ukaž Side Bar (víc místa pro editor)
Ctrl + W	Zavři aktuální tab (soubor)
Ctrl + Tab	Přepínat mezi otevřenými taby

💎 Pro-tip: Command Palette (Ctrl+Shift+P)

Když nevíš, jak něco v VSCode udělat, stiskni Ctrl + Shift + P a začni psát, co chceš:

• „markdown” → nabídne „Open Preview to the Side”
• „format” → „Format Document”
• „terminal” → všechny příkazy okolo terminálu

Je to vyhledávač všech VSCode funkcí. Nauč se ho — šetří hodiny.

---

⚙ Volitelné: 2 užitečná nastavení (3 min)

File → Preferences → Settings (nebo Ctrl+,) → hledej:

1. Auto Save

Hledej “auto save” → nastav na onFocusChange. → VSCode uloží soubor automaticky, když klikneš jinam. Méně Ctrl+S v životě.

2. Word Wrap (zalamování dlouhých řádků)

Hledej “word wrap” → nastav na on. → Dlouhé řádky v Markdown se zalomí na šířku okna, nemusíš scrollovat horizontálně.

3. Česká lokalizace (volitelné)

• Klikni 🧩 Extensions (Ctrl+Shift+X)
• Hledej „Czech Language Pack”
• Install, restart VSCode

Nepovinné — anglické rozhraní je standard, český software lidé rychle přepínají zpátky.

---

✅ Checkpoint — před blokem 02

• Vidím VSCode okno s otevřenou složkou ai-skoleni-den3
• V Exploreru jsou soubory CLAUDE.md (2 řádky instrukcí) a poznamky.md (šablona pro zápisky dne)
• Umím otevřít Markdown preview (Ctrl+Shift+V)
• Umím otevřít integrovaný terminál (Ctrl+`)
• V terminálu funguje claude --version

Pokud máš všech 5 ✅, jsi připravený/á na video (Blok 02) a pak reálnou práci s Claude Code (Blok 03).

---

✅ Blok 01: VSCode zvládnut, projekt + soubory + terminál ready

Pokračovat na blok 02: Video →