VS Code diff – triky pro denní porovnávání kódu

VS Code používám jako hlavní editor už roky. A vestavěný diff je jedna z věcí, kterou používám denně - při code review, před commity, při merge konfliktech. Tady jsou triky, které mi fakt pomáhají.

Proč diffuju přímo ve VS Code

Dřív jsem na diff používal externí nástroje. Teď už ne, protože:

Nemusím nikam přepínat - mám to tam kde píšu kód
Git integrace je super - vidím změny přímo v editoru
Syntax highlighting funguje i v diffu
Je to zadarmo a všude

Jak porovnávám soubory

Pravým tlačítkem (nejčastěji)

Tohle používám asi nejvíc:

Pravý klik na první soubor → "Select for Compare"
Pravý klik na druhý soubor → "Compare with Selected"

Hotovo. Rychlé a jednoduché.

Porovnání se schránkou (užitečné!)

Tohle jsem dlouho nevěděl. Zkopíruju si kód z dokumentace nebo Stack Overflow, pak Command Palette → "Compare Active File with Clipboard". Hned vidím rozdíly.

Funguje to i opačně - chci porovnat dva snippety, co nemám jako soubory.

4. Porovnání neuložených změn

Pro zobrazení změn oproti uložené verzi:

Command Palette → "Revert File"

Nebo použijte Source Control panel, kde vidíte všechny neuložené změny.

Git integrace - tohle používám nejvíc

Ctrl+Shift+G (Source Control panel) je asi moje nejčastěji používaná zkratka. Kliknu na soubor a hned vidím diff.

Barvy jsou intuitivní - zelená přidáno, červená smazáno.

Inline vs Side-by-Side

Pro malé změny preferuju inline zobrazení (kompaktnější). Pro velké refaktory side-by-side. Přepínám ikonkou v pravém horním rohu diff editoru.

Zkratky co fakt používám

F7 - další změna
Shift+F7 - předchozí změna

Staging jen části souboru

Tohle je game changer. Nemusím commitovat celý soubor - můžu vybrat jen některé řádky:

V diffu vyberu řádky
Pravý klik → "Stage Selected Ranges"

Nebo ty malé + ikonky vedle jednotlivých změn. Používám to denně.

Pokročilé diff techniky

Porovnání s konkrétním commitem

# V integrovaném terminálu
git diff abc123 -- src/app.ts

Nebo pomocí rozšíření GitLens (viz níže).

Ignorování whitespace

Pro ignorování změn v mezerách a odsazení:

Otevřete diff view
Klikněte na ikonu "..." v toolbaru
Zaškrtněte "Ignore Trim Whitespace"

Nebo v settings.json:

{
  "diffEditor.ignoreTrimWhitespace": true
}

Porovnání s konkrétní větví

Command Palette → "Git: Checkout to..."

Nebo použijte Timeline view pro historii změn jednoho souboru.

Timeline view

Timeline view zobrazuje historii změn souboru:

Otevřete soubor
V dolní části Explorer panelu najděte "Timeline"
Klikněte na jakýkoli commit pro zobrazení diff

Rozšíření co fakt používám

GitLens (musthave)

Tohle mám nainstalované všude. Vidím kdo a kdy změnil každý řádek přímo v editoru. Plus skvělé "Compare with Previous Revision" pro zobrazení historie souboru.

Git Graph

Vizuální graf větví. Kliknu na commit, vidím diff. Jednoduché.

Partial Diff

Užitečné když chci porovnat dva bloky kódu ve stejném souboru - třeba dvě podobné funkce. Vyberu první, pak druhý, a vidím rozdíly.

Moje nastavení

Tady je co mám v settings.json:

{
  // Diff editor nastavení
  "diffEditor.ignoreTrimWhitespace": false,
  "diffEditor.renderSideBySide": true,
  "diffEditor.wordWrap": "on",
  "diffEditor.renderIndicators": true,
  "diffEditor.maxComputationTime": 5000,

  // Git nastavení
  "git.autofetch": true,
  "git.enableSmartCommit": true,
  "git.confirmSync": false,

  // Editor nastavení pro lepší diff
  "editor.renderWhitespace": "boundary",
  "editor.renderLineHighlight": "all"
}

Vlastní klávesové zkratky

Přidejte do keybindings.json:

[
  {
    "key": "ctrl+k ctrl+d",
    "command": "workbench.files.action.compareFileWith"
  },
  {
    "key": "ctrl+k ctrl+c",
    "command": "workbench.files.action.compareWithClipboard"
  },
  {
    "key": "alt+down",
    "command": "workbench.action.editor.nextChange",
    "when": "editorTextFocus"
  },
  {
    "key": "alt+up",
    "command": "workbench.action.editor.previousChange",
    "when": "editorTextFocus"
  }
]

Praktické workflow příklady

Workflow 1: Code Review pull requestu

Stáhněte PR lokálně:

gh pr checkout 123
# nebo
git fetch origin pull/123/head:pr-123
git checkout pr-123

Porovnejte s main větví:
- Command Palette → "Git: Checkout to..." → main
- Podržte Ctrl a klikněte na soubor v Source Control
- VS Code zobrazí diff
Procházejte změny:
- F7 pro další změnu
- Přidejte komentáře pomocí TODO Highlight rozšíření

Workflow 2: Debugging – hledání bugu

Najděte poslední funkční commit:

git bisect start
git bisect bad HEAD
git bisect good v1.0.0

Ve VS Code porovnejte verze:
- Timeline view pro historii souboru
- GitLens: Compare File with Previous Revision
Identifikujte problematickou změnu:
- Diff view ukáže přesně, co se změnilo

Workflow 3: Merge konflikt

VS Code automaticky detekuje konflikty
Klikněte na konfliktní soubor
Použijte merge editor (3-way):
- Levá strana: Vaše změny
- Pravá strana: Jejich změny
- Dole: Výsledek
Klikněte na "Accept Current/Incoming/Both"
Uložte a stagujte

3-Way Merge Editor

VS Code 1.69+ obsahuje nový 3-way merge editor:

Otevření: Klikněte na konfliktní soubor v Source Control
Tři panely:
- Vlevo: Vaše změny (current)
- Vpravo: Jejich změny (incoming)
- Dole: Výsledek
Řešení: Zaškrtávací políčka pro výběr změn
Kombinace: Můžete kombinovat obě verze

Aktivace 3-way merge editoru

{
  "git.mergeEditor": true
}

Tipy pro efektivní práci

1. Používejte záložky

Při procházení velkého diff:

Ctrl+Shift+[ – Přidat záložku
Ctrl+Shift+] – Další záložka

2. Fold unchanged regions

Pro velké soubory – sbalte nezměněné části:

Klikněte na šipku vedle čísla řádku
Nebo Ctrl+Shift+[ pro sbalení

3. Minimap pro navigaci

Minimap vpravo ukazuje barevně kde jsou změny – rychlá navigace ve velkých souborech.

4. Zen Mode pro focus

View → Appearance → Zen Mode

Skryje vše kromě editoru – ideální pro detailní code review.

5. Split editor

Pro porovnání vzdálených částí stejného souboru:

Ctrl+\ – Rozdělit editor
Otevřete stejný soubor v obou panelech
Scrollujte nezávisle

Řešení častých problémů

"Diff je příliš pomalý"

{
  "diffEditor.maxComputationTime": 0,
  "diffEditor.maxFileSize": 50
}

"Nevidím změny v whitespace"

{
  "diffEditor.ignoreTrimWhitespace": false,
  "editor.renderWhitespace": "all"
}

"Git změny se nezobrazují"

Zkontrolujte, že jste v Git repozitáři
git status v terminálu
Reload VS Code (Ctrl+Shift+P → "Reload Window")

"Source Control panel je prázdný"

# Ověřte Git inicializaci
git rev-parse --is-inside-work-tree

# Případně inicializujte
git init

VS Code vs. jiné nástroje

VS Code vs. Git diff v terminálu

Funkce	VS Code	Git diff
Vizuální zobrazení	Ano	Ne
Syntax highlighting	Ano	Omezené
Navigace	Snadná	Manuální
Staging částí	Ano	git add -p
Rychlost velkých souborů	Střední	Rychlá

VS Code vs. Standalone diff nástroje

Funkce	VS Code	Beyond Compare	Meld
Cena	Zdarma	$60	Zdarma
Git integrace	Nativní	Plugin	Dobrá
3-way merge	Ano	Ano	Ano
Porovnání složek	S rozšířením	Ano	Ano
Binární soubory	Ne	Ano	Ne

Shrnutí

VS Code diff používám denně a tohle jsou zkratky co mi zůstaly v paměti:

Ctrl+Shift+G - Source Control (90% mé práce s diffem)
F7 - další změna
Pravý klik → Select for Compare - pro porovnání dvou souborů

Plus GitLens rozšíření - bez něj bych byl ztracený.

Potřebuješ rychle porovnat kód mimo editor? Hoď to do Code Diff - funguje v prohlížeči a podporuje 22 jazyků.