Tutorial

Verwenden der Git-Integration in Visual Studio Code

Published on November 13, 2020

Deutsch

Verwenden der Git-Integration in Visual Studio Code

Einführung

Visual Studio Code (VS-Code) hat sich zu einem der beliebtesten Editoren für die Webentwicklung entwickelt. Dank seiner vielen integrierten Funktionen wie der Integration der Quellcodeverwaltung, insbesondere mit Git, hat er eine solche Popularität erlangt. Die Nutzung der Leistungsfähigkeit von Git innerhalb von VS-Code kann Ihren Workflow effizienter und robuster machen.

In diesem Tutorial erkunden Sie die Verwendung der Quellcodeverwaltungs-Integration in VS-Code mit Git.

Voraussetzungen

Um dieses Tutorial zu absolvieren, benötigen Sie Folgendes:

Auf Ihrem Rechner installiertes Git. Weitere Einzelheiten dazu finden Sie in dem Tutorial Erste Schritte mit Git.
Auf Ihrem Rechner installierte neueste Version von Visual Studio Code.

Schritt 1 — Vertrautmachen mit der Registerkarte Quellcodeverwaltung

Was Sie zuerst tun müssen, um die Vorteile der Quellcodeverwaltung-Integration zu nutzen, ist die Initialisierung eines Projekts als Git-Repository.

Öffnen Sie Visual Studio Code und greifen Sie auf das integrierte Terminal zu. Sie können dies durch Verwendung der Tastenkombination ``STRG+``` unter Linux, macOS oder Windows öffnen.

Erstellen Sie in Ihrem Terminal ein Verzeichnis für ein neues Projekt und wechseln Sie in dieses Verzeichnis:

mkdir git_test
cd git_test

Erstellen Sie dann Git-Repository:

git init

Eine weitere Möglichkeit, dies mit Visual Studio Code zu bewerkstelligen, ist das Öffnen der Registerkarte Quellcodeverwaltung (das Symbol sieht aus wie eine Straßenverzweigung) im linken Bereich:

Symbol für Quellcodeverwaltung

Wählen Sie als Nächstes Open Folder (Ordner öffnen):

Screenshot mit der Schaltfläche „Ordner öffnen“

Dadurch wird Ihr Datei-Explorer für das aktuelle Verzeichnis geöffnet. Wählen Sie das bevorzugte Projektverzeichnis und klicken Sie auf Open (Öffnen).

Wählen Sie dann Initialize Repository (Repository initialisieren):

Screenshot, der die Schaltfläche „Repository initialisieren“ zeigt

Wenn Sie nun Ihr Dateisystem überprüfen, sehen Sie, dass es ein Verzeichnis .git enthält. Verwenden Sie dazu das Terminal, um zu Ihrem Projektverzeichnis zu navigieren und alle Inhalte aufzulisten:

ls -la

Sie sehen das erstellte Verzeichnis .git:

Output.
..
.git

Nachdem das Repository nun initialisiert wurde, fügen Sie eine Datei namens index.html hinzu.

Nachdem Sie dies getan haben, sehen Sie im Fenster Source Control (Quellcodeverwaltung), dass Ihre neue Datei mit dem Buchstaben U daneben angezeigt wird. U steht für unverfolgte Datei, d. h. eine Datei, die neu ist oder geändert wurde, aber dem Repository noch nicht hinzugefügt wurde:

Screenshot einer unverfolgten Datei mit dem Buchstaben U-Indikator

Sie können jetzt auf das Plus-Symbol (+) neben der Auflistung der Datei index.html klicken, um die Datei nach dem Repository zu verfolgen.

Sobald die Datei hinzugefügt wurde, ändert sich der Buchstabe neben der Datei an eine A. A steht für eine neue Datei, die dem Repository hinzugefügt wurde.

Um Ihre Änderungen zu übergeben, geben Sie eine Übergabe-Nachricht in das Eingabefeld oben im Fenster Source Control (Quellcodeverwaltung) ein. Klicken Sie dann auf das Prüfsymbol, um die Übergabe auszuführen.

Screenshot einer hinzugefügten Datei mit dem Buchstabe-A-Indikator und der Übergabenachricht

Danach werden Sie feststellen, dass keine Änderungen ausstehen.

Fügen Sie als Nächstes Ihrer Datei index.html etwas Inhalt hinzu.

Sie können eine Emmet-Verknüpfung verwenden, um ein HTML5-Skelett in VS-Code zu generieren, indem Sie die Taste ! drücken, gefolgt von der Taste Tab. Fahren Sie fort und fügen Sie dem <body> etwas wie eine Überschrift <h1> hinzu, und speichern Sie anschließend.

Im Fenster Quellcodeverwaltung sehen Sie, dass Ihre Datei geändert wurde. Daneben wird der Buchstabe M angezeigt, der für eine modifizierte Datei steht:

Screenshot der geänderten Datei mit dem Buchstabe-M-Indikator

Zur Übung sollten Sie auch diese Änderung übergeben.

Nachdem Sie nun mit der Bedienung des Quellcodeverwaltungsfensters vertraut sind, fahren Sie mit der Interpretation der „Gutter“-Indikatoren fort.

Schritt 2 — Interpretation der Gutter-Indikatoren

In diesem Schritt werfen Sie einen Blick auf das sogenannte „Gutter“ in VS-Code. Das Gutter ist der schmale Bereich rechts neben der Zeilennummer.

Wenn Sie zuvor Code-Folding verwendet haben, befinden sich die Symbole für Maximieren und Minimieren im Gutter.

Beginnen wir damit, eine kleine an Ihrer Datei index.html vorzunehmen, beispielsweise eine Änderung des Inhalts innerhalb des Tags <h1>. Danach werden Sie eine blaue vertikale Markierung im Gutter der Zeile, die Sie geändert haben, bemerken. Die vertikale blaue Markierung bedeutet, dass die entsprechende Codezeile geändert wurde.

Versuchen Sie nun, eine Codezeile zu löschen. Sie können eine der Zeilen im Abschnitt <body> Ihrer Datei index.html löschen. Beachten Sie, dass im Gutter nun ein rotes Dreieck vorhanden ist. Das rote Dreieck kennzeichnet eine Zeile oder eine Gruppe von Zeilen, die gelöscht.

Fügen Sie schließlich am Ende Ihres Abschnitts <body> eine neue Codezeile hinzu und beachten Sie den grünen Balken. Der vertikale grüne Balken steht für eine hinzugefügte Codezeile.

Dieses Beispiel zeigt Gutter-Indikatoren für eine geänderte Zeile, eine entfernte Zeile und eine neue Zeile:

Screenshot mit Beispielen der drei Arten von Gutter-Indikatoren

Schritt 3 — Vergleichen von Dateien

VS-Code bietet auch die Möglichkeit, einen Vergleich mit einer Datei auszuführen. Normalerweise müssten Sie dafür ein separates Diff-Tool herunterladen, sodass diese integrierte Funktion Ihnen dabei helfen kann, effizienter zu arbeiten.

Um einen Vergleich anzuzeigen, öffnen Sie das Quellcodeverwaltungsfenster und doppelklicken Sie auf eine geänderte Datei. Doppelklicken Sie in diesem Fall auf die Datei index.html. Sie werden zu einer typischen Diff-Ansicht mit der aktuellen Version der Datei auf der linken und der zuvor übergebenen Version der Datei auf der rechten Seite gebracht.

Dieses Beispiel zeigt, dass in der aktuellen Version eine Zeile hinzugefügt wurde:

Screenshot mit einem Beispiel einer geteilten Bildschirmanzeige eines Vergleichs

Schritt 4 — Arbeiten mit Zweigen

In der unteren Leiste haben Sie die Möglichkeit, Zweige zu erstellen und zu wechseln. Wenn Sie einen Blick auf die unterste linke Ecke des Editors werfen, sollten Sie das Quellcodeverwaltungs-Symbol sehen (dasjenige, das wie eine Weggabelung aussieht), gefolgt höchstwahrscheinlich von master oder dem Namen des aktuellen Arbeitszweigs.

Zweigindikator in der unteren Leiste von VS-Code mit der Anzeige „master“

Um einen Zweig zu erstellen, klicken Sie auf diesen Zweignamen. Es sollte sich ein Menü öffnen, das Ihnen die Möglichkeit gibt, einen neuen Zweig zu erstellen:

Eingabeaufforderung zur Erstellung eines neuen Zweigs

Fahren Sie fort und erstellen Sie einen neuen Zweig namens test.

Nehmen Sie nun eine Änderung an Ihrer Datei index.html vor, die anzeigt, dass Sie sich in dem neuen Zweig test befinden, indem Sie beispielsweise den Text „this is the new test branch“ (Dies ist der neue Testzweig) hinzufügen.

Übergeben Sie diese Änderungen an den Zweig test. Klicken Sie dann erneut auf den Zweignamen unten links, um wieder zu dem Zweig master zu wechseln.

Nach dem Wechsel zum Zweig master werden Sie feststellen, dass der Text this is the new test branch (Dies ist der neue Testzweig), der dem Zeig test übergeben wurde, nicht mehr vorhanden ist.

Schritt 5 — Arbeiten mit Remote-Repositorys

In diesem Tutorial wird nicht im Detail darauf eingegangen, aber über das Quellcodeverwaltungsfenster haben Sie Zugriff auf die Arbeit mit Remote-Repositorys. Wenn Sie schon mit einem Remote-Repository gearbeitet haben, werden Ihnen vertraute Befehle wie pull, sync, publish, stash usw. auffallen.

Schritt 6 — Installieren nützlicher Erweiterungen

VS-Code enthält nicht nur viele integrierte Funktionen für Git, es gibt auch einige sehr beliebte Erweiterungen, um zusätzliche Funktionalität hinzuzufügen.

Git Blame

Diese Erweiterung bietet die Möglichkeit, Git Blame-Informationen in der Statusleiste für die aktuell ausgewählte Zeile anzuzeigen.

Dies kann einschüchternd klingen, aber keine Sorge, bei der Erweiterung „Git Blame“ geht es viel mehr um Praktikabilität als darum, jemandem ein schlechtes Gewissen einzureden. Bei der Idee, jemandem „ein schlechtes Gewissen“ für eine Code-Änderung einzureden geht es weniger darum, diese Person zu beschämen, als vielmehr darum, die richtige Person zu finden, der man Fragen zu bestimmten Teilen des Codes stellen kann.

Wie Sie auf dem Screenshot sehen können, bietet diese Erweiterung in der unteren Symbolleiste eine subtile, auf die aktuelle Codezeile, die Sie gerade bearbeiten, bezogene Nachricht, die erklärt, wer die Änderung vorgenommen hat und wann sie vorgenommen wurde.

Git Blame in der unteren Symbolleiste

Git History

Obwohl Sie mit den integrierten Funktionen in VS-Code aktuelle Änderungen anzeigen, Vergleiche durchführen und Zweige verwalten können, bietet es keinen detaillierten Einblick in Ihren Git-Verlauf. Die Erweiterung Git History löst dieses Problem.

Wie Sie in der nachstehenden Abbildung sehen können, ermöglicht diese Erweiterung Ihnen, den Verlauf einer Datei, eines bestimmten Autors, eines Zweigs usw. sorgfältig zu untersuchen. Um das nachstehende Fenster „Git History“ zu aktivieren, klicken Sie mit der rechten Maustaste auf eine Datei und wählen Sie Git: View File History:

Ergebnisse der Erweiterung „Git History“

Zusätzlich können Sie Zweige und Übergaben vergleichen, Zweige aus Übergaben erstellen und vieles mehr.

Git Lens

Git Lens erweitert die in Visual Studio Code integrierten Git-Funktionen. Es hilft Ihnen, die Code-Autorenschaft auf einen Blick mittels Git Blame-Annotationen und Code Lens zu visualisieren, nahtlos durch Git-Repositorys zu navigieren und diese zu erkunden, wertvolle Erkenntnisse über leistungsstarke Vergleichsbefehle zu gewinnen und vieles mehr.

Die Erweiterung „Git Lens“ ist eine der beliebtesten in der Gemeinschaft und ist auch die leistungsstärkste. In den meisten Fällen kann sie mit ihrer Funktionalität jede der beiden vorherigen Erweiterungen ersetzen.

Für „Blame“-Informationen erscheint rechts neben der Zeile, an der Sie gerade arbeiten, eine subtile Nachricht, die Sie darüber informiert, werde die Änderung vorgenommen hat, wann sie vorgenommen wurde und die zugehörige Übergabemeldung. Es gibt einige zusätzliche Informationen, die angezeigt werden, wenn Sie mit der Maus über diese Nachricht fahren, wie die Code-Änderung selbst, der Zeitstempel und mehr.

Git Blame-Funktionalität in Git Lens

Für Git-Verlaufsinformationen bietet diese Erweiterung eine Vielzahl von Funktionen. Sie haben einfachen Zugriff auf zahlreiche Optionen, darunter die Anzeige des Dateiverlaufs, die Durchführung von Vergleichen mit vorherigen Versionen, das Öffnen einer bestimmten Revision und vieles mehr. Um diese Optionen zu öffnen, können Sie auf den Text in der unteren Statusleiste klicken, der den Autor enthält, der die Codezeile bearbeitet hat und wie lange es her ist, dass sie bearbeitet wurde.

Dadurch wird das folgende Fenster geöffnet:

Git History-Funktionalität in Git Lens

Diese Erweiterung ist vollgepackt mit Funktionalität und es wird eine Weile dauern, bis Sie alles, was sie zu bieten hat, aufgenommen haben.

Zusammenfassung

In diesem Tutorial haben Sie erkundet, wie die Integration der Quellcodeverwaltung mit VS-Code verwendet wird. VS-Code kann mit vielen Funktionen umgehen, für die zuvor ein separates Tool heruntergeladen werden musste.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about our products

About the authors