# Git in VS Code

Stagen, committen, syncen en merge conflicts oplossen zonder de terminal. Dezelfde Git als in Git basics, met knoppen.

Multimedia & Creatieve Technologie · 2.1 Programming principles · Extra · Git · versie 1.0.1 · 2026-09-30

Tags: git, vs-code

Slides: <https://slides.mctantwerp.be/nl/programming-principles/git-in-vscode>

Speaker notes: <https://slides.mctantwerp.be/nl/programming-principles/git-in-vscode.notes.md>

<!-- slide 2 -->

## Agenda

1. Source Control: Stagen, committen, syncen
2. Merge conflicts: Kiezen tussen jouw versie en die van origin
3. Terugkijken: Timeline, graph en VS Code als Git-editor

<!-- slide 3 -->

**Dezelfde Git, andere knoppen.**

VS Code doet niets wat je in Git basics niet in de terminal deed. Elke knop is een commando. Weet je welk, dan snap je ook wat er misloopt.

<!-- slide 4 -->

## 1. Source Control

*Het icoon met de drie bolletjes en de lijntjes, links in de zijbalk.*

<!-- slide 5 -->

### Het Source Control-paneel

*<kbd>Ctrl</kbd> <kbd>Shift</kbd> <kbd>G</kbd>, ook op een Mac*

- Dit is `git status`, maar dan altijd open
- **M** is aangepast, **U** is nieuw en nog niet gevolgd (untracked)
- **D** is verwijderd, **A** is nieuw en al gestaged
- Klik op een bestand en je ziet de diff: links de laatste commit, rechts jouw versie

<!-- slide 6 -->

### Stagen

*Hover over een bestand en er verschijnen knoppen*

- **+** is `git add`. Het bestand schuift naar Staged Changes
- **−** haalt het er weer uit, zonder je werk aan te raken
- De + naast de kop Changes staget alles, zoals `git add .`

> [!WARNING]
> **Het pijltje terug**
>
> Discard Changes gooit je wijzigingen weg. Geen undo, want ze zaten nog in geen enkele commit.

<!-- slide 7 -->

### Stagen per regel

*Twee dingen aangepast in één bestand? Dan kan je ze in twee commits steken.*

- **01 Open de diff**: Klik op het bestand in Changes.
- **02 Selecteer regels**: Aan de rechterkant, in jouw versie.
- **03 Stage Selected Ranges**: Rechtermuisklik op de selectie. Alleen die regels gaan naar Staged Changes.

> [!TIP]
> Een commit die één ding doet, kan je later terugdraaien zonder de rest mee te nemen. Een commit "fixes" met vijf dingen in, niet.

<!-- slide 8 -->

### Committen

*De boodschap in het vak, dan de knop of Windows <kbd>Ctrl</kbd>+<kbd>Enter</kbd>, Mac <kbd>⌘</kbd>+<kbd>Enter</kbd>*

- Dit is `git commit -m`. Alleen wat gestaged is, gaat mee
- Niets gestaged? Dan vraagt VS Code of hij alles moet stagen en committen
- Zeg daar ja als je weet wat er in Changes staat. Kies nooit Always

<!-- slide 9 -->

### Sync Changes

*Na een commit wordt de knop Sync. De pijltjes tellen de commits die heen en terug moeten.*

| Knop | Wat Git doet |
| --- | --- |
| Commit | `git commit` |
| Sync Changes | `git pull`, dan `git push` |
| Publish Branch | `git push -u origin main`, voor een repo die nog niet op GitHub staat |
| ↓ en ↑ | Commits die origin heeft en jij niet, en omgekeerd |

<!-- slide 10 -->

**Sync is geen magie.**

Sync pullt eerst. Hebben jij en iemand anders dezelfde regel aangepast, dan stopt het daar, net als in de terminal.

<!-- slide 11 -->

## 2. Merge conflicts

*Twee mensen, dezelfde regel. Git kan niet kiezen, dus kies jij.*

<!-- slide 12 -->

### Wat Git in je bestand zet

*Jij en Alex speelden allebei middenboven, zonder te pullen*

```diff
<<<<<<< HEAD
. O .
=======
. X .
>>>>>>> 6a1f0e3b9c2d4e8f7a1b0c3d5e6f7a8b9c0d1e2f
```

- **HEAD**: Tussen de pijltjes en de gelijkheidstekens: jouw versie, de current change.
- **Die lange hash**: Tussen de gelijkheidstekens en de pijltjes: wat van origin kwam, de incoming change.

<!-- slide 13 -->

### Kiezen in de editor

*VS Code kleurt beide kanten en zet er klikbare keuzes boven*

- **Current**: Jouw versie blijft, die van origin verdwijnt.
- **Incoming**: De versie van origin blijft, die van jou verdwijnt.
- **Both**: Allebei, onder elkaar. Daarna zelf opkuisen.

<!-- slide 14 -->

### De merge editor

*Resolve in Merge Editor, rechtsonder in het bestand. Beide kanten boven, het resultaat eronder.*

<!-- slide 15 -->

### Afwerken

*Een opgelost conflict is nog geen commit*

#### In VS Code

- Het bestand staat onder Merge Changes met een !
- Klik op + om het te stagen, dan is het opgelost
- De boodschap staat al klaar: Merge branch 'main' of ...
- Commit, en daarna Sync

#### In de terminal

```console
$ git add bord.txt
$ git commit
(je editor opent met de merge message)
$ git push
```

<!-- slide 16 -->

## 3. Terugkijken

*Wat er gebeurd is, en wie het deed.*

<!-- slide 17 -->

### Geschiedenis zonder git log

- **Timeline**: Onderaan de Explorer. Elke commit waarin het open bestand veranderde. Klik erop en je ziet de diff van toen.
- **Source Control Graph**: Onderaan het Source Control-paneel. Jouw commits en die van origin als lijnen, met de merges ertussen. Het tekeningetje uit Git basics, maar dan van je eigen repo.

> [!TIP]
> **GitLens**
>
> Een extensie die bij elke regel toont wie hem het laatst aanpaste, en wanneer. Handig in een groepsproject, zolang je het gebruikt om iets te vragen en niet om iemand iets te verwijten.

<!-- slide 18 -->

### VS Code als Git-editor

*Geen Vim meer bij een merge in de terminal. Git opent de boodschap in een tab van VS Code.*

```console
$ git config --global core.editor "code --wait"
```

> [!NOTE]
> Met `--wait` wacht Git tot je de tab sluit. Zonder die vlag denkt Git dat je al klaar bent en krijg je een lege boodschap.

<!-- slide 19 -->

### Opdracht: Tic tac toe, nu in VS Code

*20 minuten, Per 2*

Dezelfde opdracht als in Git basics, maar zonder terminal. Deze keer los je het conflict ook op.

1. Open je tic-tac-toe repo in VS Code (File, Open Folder)
2. Speel een ronde met Stage, Commit en Sync, niets anders
3. Pak allebei hetzelfde vakje zonder te syncen, en los het conflict op met Accept Incoming of Accept Current
4. Bekijk het resultaat in de Source Control Graph

## Begrippen

- **Current change**: Bij een merge conflict: jouw versie, tussen <<<<<<< HEAD en de gelijkheidstekens. Accept Current houdt die en gooit de andere kant weg. (slide 12)
- **Incoming change**: Bij een merge conflict: wat van origin kwam, tussen de gelijkheidstekens en >>>>>>> met de hash erachter. Accept Incoming houdt die en gooit jouw versie weg. (slide 12)
- **Merge editor**: Een venster in VS Code om een conflict op te lossen, met beide kanten bovenaan en het resultaat eronder. Loont als er meerdere conflicten in een bestand zitten of als je van allebei een stuk wil. (slide 14)
- **Stagen per regel**: Maar een deel van je wijzigingen in een bestand stagen, zodat twee aanpassingen in twee commits gaan. In VS Code selecteer je de regels in de diff en kies je Stage Selected Ranges, in de terminal is het git add -p. (slide 7)
- **Sync Changes**: De knop in VS Code die eerst git pull en dan git push doet. Hebben jij en iemand anders dezelfde regel aangepast, dan stopt hij bij het conflict. (slide 9)