Article

VS Code für Git und GitHub - Ein praktischer Einstieg

Visual Studio Code hat sich als einer der beliebtesten Code-Editoren etabliert. Die eingebaute Git-Integration ermöglicht Repository-Verwaltung ohne Terminal - ein Feature, das besonders Einsteiger und Teams schätzen.

Der Grund: Warum VS Code für Git?

Git ist das Versionskontroll-Programm, GitHub die Hosting-Plattform dafür. VS Code nutzt Git unter der Haube und bietet eine grafische Oberfläche für alle wichtigen Operationen. Das reduziert Kontextwechsel und beschleunigt den Workflow - Terminal-Kenntnisse sind trotzdem wertvoll.

Repository initialisieren

Öffnen Sie VS Code und wählen Sie über das Explorer-Icon (erste ikone links, zwei Dateien übereinander) einen Ordner mit Ihrem Code. Klicken Sie auf das Source Control-Icon (dritte Ikone von oben) und dann auf Initialize Repository. Damit ist Ihr Ordner ein Git-Repository.

Im unteren linken Bereich erscheint der Branch-Name - standardmäßig main. Über die Command Palette (Cmd+Shift+P auf Mac, Ctrl+Shift+P auf PC) und Git: Rename Branch können Sie Branches umbenennen.

Änderungen verfolgen

Nach der Initialisierung zeigt das Source Control-Panel alle Dateien mit einem U für Untracked. Ein Klick auf das Plus-Symbol neben dem Dateinamen staged die Datei. Bei mehreren Dateien staged das Plus neben CHANGES alle gleichzeitig.

Gestagte Dateien zeigen ein A für Added. Ein Commit-Message im Textfeld oben und ein Klick auf Commit sichert die Änderungen. Bonus: Das Copilot-Icon im Message-Feld kann den Commit-Text automatisch generieren.

Branches erstellen und wechseln

Die Command Palette mit Git: Create Branch… erstellen neue Branches. VS Code wechselt automatisch in den neuen Branch. Der Branch-Name unten links zeigt immer die aktuelle Position. Ein Klick darauf öffnet die Branch-Auswahl zum Wechseln.

Diffs visualisieren

Ein Klick auf eine geänderte Datei im Source Control-Panel öffnet die Side-by-Side-Diff-Ansicht. Neue Zeilen sind grün markiert, geänderte Zeilen blau, gelöschte Zeilen rot. Über die drei Punkte oben rechts kann auf Inline View gewechselt werden - alle Änderungen in einem Editor.

Branches mergen

Im Source Control-Panel unter den drei Punkten > Branch > Merge… wählen Sie den Branch, dessen Änderungen Sie in den aktuellen Branch integrieren möchten. Nach dem Merge sind die Änderungen im aktuellen Branch verfügbar.

Auf GitHub publishen

Der Publish Branch-Button im Source Control-Panel pusht das lokale Repository zu GitHub. VS Code fragt, ob das Repository privat oder öffentlich sein soll. Nach erfolgreichem Publish erscheint ein Open on GitHub-Button.

Repository klonen

Auf der GitHub-Repository-Seite klicken Sie auf den grünen Clone ein, fügen die URL ein und wählen einen lokalen Ordner. VS Code klont das Repository und bietet an, es zu öffnen.

Best Practices

  • Committen Sie oft und mit aussagekräftigen Messages
  • Nutzen Sie Branches für Features und Bugfixes
  • Reviewen Sie Änderungen vor dem Commit mit der Diff-Ansicht
  • Pullen Sie regelmäßig vom Remote, um Konflikte zu vermeiden

Original-Quelle

GitHub Blog: Getting started with Git and GitHub in VS Code