VS Code diff – jak zobrazit a porovnat rozdíly v 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 je, jak přesně diff ve VS Code zobrazím a jaké triky mi u toho pomáhají.

Potřebuješ porovnat kód rychle, bez otevírání editoru? Vlož obě verze do Code Diff - běží přímo v prohlížeči, se zvýrazněním syntaxe pro 20+ jazyků, nic se neinstaluje.

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 porovnat dva soubory ve VS Code

Klikněte pravým tlačítkem na první soubor → Select for Compare, pak na druhý → Compare with Selected. VS Code otevře oba vedle sebe a barevně označí rozdíly - zelená přidáno, červená smazáno.

Porovnání se schránkou

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 na dva snippety, které nemám jako soubory.

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

Pro zobrazení změn oproti poslední uložené verzi otevřete Source Control panel - vidíte tam všechny neuložené úpravy bez toho, abyste cokoliv nastavovali.

Git diff ve VS Code

Otevřete Source Control panel (Ctrl+Shift+G), klikněte na soubor a VS Code hned zobrazí diff proti poslední commitnuté verzi. Je to moje nejčastěji používaná zkratka vůbec.

Staging jen části souboru

Nemusíte commitovat celý soubor - jde vybrat jen některé řádky:

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

Nebo použijte malé + ikonky vedle jednotlivých změn. Tohle používám denně.

Diff proti konkrétnímu commitu

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

Pro diff proti HEAD stačí commit hash vynechat. Rychlejší cesta bez terminálu je přes rozšíření GitLens (viz níže) - kliknete na řádek a vidíte, kdy a v jakém commitu se změnil.

Porovnání s jinou větví

Command Palette → "Git: Checkout to..." přepne na cílovou větev, pak stačí podržet Ctrl a kliknout na soubor v Source Control - VS Code zobrazí diff proti aktuálnímu stavu. Pro historii jednoho souboru napříč commity poslouží Timeline view ve spodní části Exploreru.

Side-by-side, nebo inline diff?

Přepínáte ikonkou v pravém horním rohu diff editoru. Pro malé změny preferuju inline zobrazení - je kompaktnější. Pro velké refaktory naopak side-by-side, kde se lépe orientuju ve dvou celých verzích vedle sebe.

Mezi jednotlivými změnami se skáče klávesou F7 (další) a Shift+F7 (předchozí).

Když diff zahltí drobné rozdíly v mezerách, zapněte v toolbaru diff editoru "Ignore Trim Whitespace", nebo natrvalo v settings.json:

{
  "diffEditor.ignoreTrimWhitespace": true
}

VS Code diff nástroj: vestavěný, nebo rozšíření?

Vestavěný diff editor stačí na většinu běžné práce. Pro pokročilejší věci - historii souboru, blame po řádcích - sahám po rozšířeních:

GitLens. Mám ho 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 historii 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 mezi nimi.

Moje nastavení a zkratky

V settings.json mám:

{
  "diffEditor.ignoreTrimWhitespace": false,
  "diffEditor.renderSideBySide": true,
  "diffEditor.wordWrap": "on",
  "diffEditor.renderIndicators": true,
  "diffEditor.maxComputationTime": 5000,
  "git.autofetch": true,
  "git.enableSmartCommit": true,
  "editor.renderWhitespace": "boundary"
}

A pár vlastních zkratek v 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"
  }
]

3-way merge editor a řešení konfliktů

VS Code konfliktní soubor po merge nebo rebase pozná sám a nabídne rovnou nový 3-way merge editor:

Vlevo: vaše změny (current)
Vpravo: změny z druhé větve (incoming)
Dole: výsledek

Zaškrtávacími políčky vyberete, co se má do výsledku promítnout, případně obě verze zkombinujete ručně. Nakonec soubor uložíte a stagujete stejně jako běžnou změnu. Pokud se vám otevírá starší lineární diff místo 3-way editoru, zapněte ho v settings.json:

{
  "git.mergeEditor": true
}

Praktické workflow: code review a debugging

Code review pull requestu. Stáhnu si PR lokálně (gh pr checkout 123), přepnu Command Palette → "Git: Checkout to..." na main a s podrženým Ctrl kliknu na soubor v Source Control - VS Code rovnou zobrazí diff proti main větvi. Změnami pak procházím klávesou F7.

Hledání bugu. Když nevím, který commit něco rozbil, spustím git bisect start, git bisect bad HEAD, git bisect good v1.0.0 a mezi verzemi porovnávám přes Timeline view nebo GitLensové "Compare File with Previous Revision". Diff pak ukáže přesně tu změnu, co hledám.

Tipy pro efektivní práci

Při procházení velkého diffu se hodí pár drobností. Minimap vpravo barevně ukazuje, kde jsou změny, takže se ve velkém souboru rychle zorientujete i bez scrollování. Nezměněné bloky jde sbalit kliknutím na šipku vedle čísla řádku - u dlouhých souborů to diff hodně zpřehlední.

Pro detailní code review bez rušení zkuste Zen Mode (View → Appearance → Zen Mode) - skryje všechno kromě editoru. A když chcete porovnat dvě vzdálené části stejného souboru, Ctrl+\ rozdělí editor na dva panely se stejným souborem, které pak scrollujete nezávisle na sobě.

Časté problémy a jak je vyřešit

Diff je příliš pomalý. U velkých souborů pomůže omezit výpočet:

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

Git změny se nezobrazují. Ověřte v terminálu, že jste v gitovém repozitáři (git status), a zkuste Reload Window (Ctrl+Shift+P → "Reload Window"). Pomůže to skoro vždy.

Source Control panel je prázdný. Zkontrolujte git rev-parse --is-inside-work-tree - pokud repozitář chybí, založíte ho přes git init.

Potřebuju porovnat celé složky, ne jen soubory. Vestavěný diff umí jen soubor proti souboru. Na porovnání celých adresářů se hodí rozšíření (např. GitLens nebo dedikované "Compare Folders"), případně pro rychlou kontrolu jednoho páru souborů stačí přetáhnout oba do Code Diff.

VS Code vs. jiné nástroje pro porovnání kódu

Funkce	VS Code	Git diff (terminál)	Beyond Compare
Vizuální zobrazení	Ano	Ne	Ano
Syntax highlighting	Ano	Omezené	Ano
Cena	Zdarma	Zdarma	60 $
Staging částí souboru	Ano	`git add -p`	Ne
Porovnání celých složek	S rozšířením	Ne	Ano
Soubory mimo git repozitář	Ne	Ne	Ano

Poslední řádek je důvod, proč i s VS Code pořád občas sáhnu po online nástroji - když kód nemám v repozitáři vůbec, třeba mi ho někdo poslal přes chat.

Shrnutí

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

Ctrl+Shift+G - Source Control, odtud jde většina mé práce s diffem
Pravý klik → Select for Compare - pro porovnání dvou souborů
F7 - skok na další změnu v diffu
GitLens - bez něj bych byl u historie souboru ztracený

Potřebuješ porovnat kód i mimo editor - třeba dva soubory, co nejsou v repozitáři? Hoď to do Code Diff: funguje v prohlížeči, nic se neinstaluje a podporuje 20+ jazyků.