Verwalten von GitHub-Repositorys für die JavaScript-Entwicklung in Visual Studio Code

Visual Studio Code bietet umfassende Git- und GitHub-Integration für JavaScript-Entwickler. In diesem Handbuch erfahren Sie, wie Sie GitHub-Repositorys direkt aus Ihrer Entwicklungsumgebung verwalten und Ihren Workflow von der Codeerstellung bis zur Bereitstellung optimieren.

Sie lernen, vorhandene Repositorys zu öffnen, neue Projekte zu initialisieren, Feature-Verzweigungen zu erstellen, Änderungen zu übernehmen und auf GitHub zu übertragen – alles, ohne VS Code zu verlassen. Der Leitfaden behandelt mehrere Ansätze für jeden Vorgang, einschließlich der Aktivitätsleiste, der Befehlspalette, der Statusleiste und des integrierten Terminals, sodass Sie die Methoden auswählen können, die für Ihren Entwicklungsstil am besten geeignet sind.

Voraussetzungen

• Git auf Ihrem lokalen Computer installiert
• Visual Studio Code installiert
• Ein GitHub-Konto

Öffnen Ihrer Remoterepository

Öffnen Sie Ihre Remoterepository auf Ihrem lokalen Computer.

Aktivitätsleiste

1. Installieren der Remote-Repositoryerweiterung
2. Wählen Sie die Remoteanzeige unten links von Visual Studio Code aus.
3. Befolgen Sie die Eingabeaufforderungen.

Statusleiste

Diese Aktion ist in diesem Feature nicht verfügbar. Wählen Sie eine andere Registerkarte aus.

Befehlspalette

1. Öffnen Sie die Befehlspalette mit der Tastenkombination STRG + UMSCHALT + P.
2. Geben Sie gitclan der Eingabeaufforderung der Befehlspalette den Befehl "Git: Klonen " aus, und wählen Sie dann "Klonen" von GitHub aus, und drücken Sie die EINGABETASTE.
3. Wählen Sie „Clone from GitHub“ (Aus Github klonen) ein, wenn Sie zum Eingeben der Repository-URL aufgefordert werden, und drücken Sie anschließend die EINGABETASTE.
4. Wenn Sie aufgefordert werden, sich bei GitHub anzumelden, schließen Sie den Anmeldevorgang ab.
5. Geben Sie in das Feld Repository-URL die URL azure-samples/js-e2e-express-server ein.
6. Wählen Sie das lokale Verzeichnis aus (oder erstellen), in das Sie das Projekt klonen möchten, und wählen Sie dann "Als Repositoryziel auswählen" aus.
7. Wenn Sie eine Benachrichtigung mit der Frage erhalten, ob Sie das geklonte Repository öffnen möchten, wählen Sie Öffnen aus.

Integriertes Terminal

1. Öffnen Sie ein integriertes Terminal vom Terminal -> Neues Terminal.

2. Klonen Sie Ihr Repository mit dem folgenden Git-Befehl:

   git clone https://github.com/<ACCOUNT>/<REPOSITORY>
   

3. In Visual Studio Code öffnen:

   code <REPOSITORY>
   

Visual Studio Code verwendet die Git-Authentifizierung, die vom Betriebssystem (z. B. macOS-Schlüsselbund oder Windows-Anmeldeinformations-Manager) mit allen Git-Funktionen bereitgestellt wird. Die Ausgabe ist in Befehlspalette > Git sichtbar: Git-Ausgabe anzeigen.

Herstellen einer Verbindung mit benutzerdefinierten GitHub-Domänen

Visual Studio Code geht standardmäßig davon aus, dass Ihre Repositorys auf github.com. Wenn Sie eine Verbindung mit einem Repository in einer anderen Domäne herstellen müssen (z. B. ein GitHub-Unternehmen wie github.<company_name>.com), müssen Sie Ihren Git-Pfad entsprechend konfigurieren.

Um den Git-Pfad in VS Code zu aktualisieren, öffnen Sie "Datei" → Einstellungen → Einstellungen , und suchen Sie danach Git: Path. Mit dieser Einstellung können Sie den absoluten Pfad zur ausführbaren Git-Datei angeben, die mit Ihrer benutzerdefinierten GitHub-Domäne funktioniert.

Alternativ können Sie die git.path Einstellung direkt in Ihrer settings.json Datei hinzufügen oder aktualisieren, um sicherzustellen, dass VS Code die richtige Git-Binärdatei für alle Repositoryvorgänge verwendet.

Öffnen Des lokalen Repositorys

Wenn Sie über ein vorhandenes Repository auf Ihrem lokalen Computer verfügen und es in Visual Studio Code öffnen möchten, öffnen Sie einfach den Ordner. Visual Studio Code erkennt den .git Unterordner und zeigt die relevanten Informationen an.

Aktivitätsleiste

1. Wählen Sie STRG + + aus.
2. Wählen Sie den Ordner aus.

Statusleiste

Diese Aktion ist in diesem Feature nicht verfügbar. Wählen Sie eine andere Registerkarte aus.

Befehlspalette

1. Öffnen Sie die Befehlspalette mit der Tastenkombination STRG + UMSCHALT + P.
2. Filter mit Git, und wählen Sie Open repositorydann .
3. Wählen Sie den Ordner aus, der als Stamm des Repositorys ausgewählt werden soll.

Integriertes Terminal

1. Öffnen Sie ein integriertes Terminal vom Terminal -> Neues Terminal.

2. Öffnen Sie eine neue Instanz von Visual Studio Code für das Repositoryverzeichnis:

   code ../dir1/dir2/my-repo
   

Initialisieren des neuen Repositorys

Verwenden Sie das folgende Verfahren, um ein lokales Quellcode-Repository mit git.

Aktivitätsleiste

1. Wählen Sie die Quellcodeverwaltung in der Aktivitätsleiste aus, oder verwenden Sie die Tastenkombination STRG + +

2. Wählen Sie "Repository initialisieren" aus.

   

Statusleiste

Diese Aktion ist in diesem Feature nicht verfügbar. Wählen Sie eine andere Registerkarte aus.

Befehlspalette

1. Öffnen Sie die Befehlspalette mit der Tastenkombination STRG + UMSCHALT + P.
2. Filter mit Git, und wählen Sie Initialize repositorydann .
3. Wählen Sie den Ordner aus, der als Stamm des Repositorys ausgewählt werden soll.

Integriertes Terminal

1. Öffnen Sie ein integriertes Terminal vom Terminal -> Neues Terminal.

2. Initialisieren Sie Ihren Ordner mit Git mit dem folgenden Git-Befehl:

   git init
   

Nachdem das Repository initialisiert wurde, erstellen Sie das Repository auf GitHub. Fügen Sie dieses Repository dann als Remote zu Ihrem lokalen Projekt aus der Befehlspalette hinzu: suchen Sie nach Git: Add remote.

Erstellen einer Verzweigung für Änderungen

Erstellen Sie eine neue Verzweigung, um Änderungen zu erfassen und vom Haupt- oder Standardbranch zu isolieren.

Aktivitätsleiste

1. Wählen Sie die Quellcodeverwaltung in der Aktivitätsleiste aus.
2. Wählen Sie die Auslassungspunkte (...) neben der Quellcodeverwaltung aus.
3. Wählen Sie "Verzweigung -> erstellen" aus.

Statusleiste

1. Wählen Sie den Branchnamen in der Statusleiste aus. Dadurch wird die Befehlspalette geöffnet.

   Die Statusleiste befindet sich unten in Visual Studio Code.

2. Wählen Sie in der Befehlspalette + Neuen Branch erstellen aus.

3. Geben Sie Ihren neuen Branchnamen ein.

4. Geben Sie einen neuen Branchnamen ein. Der Branchname wird in der Statusleiste angezeigt.

   

Befehlspalette

1. Öffnen Sie die Befehlspalette mit der Tastenkombination STRG + UMSCHALT + P.

2. Suchen Sie nach git branch, und wählen Sie Git: Create Branch aus.

   

3. Geben Sie einen neuen Verzweigungsnamen ein, z test. B. .

4. Der Branchname wird in der Statusleiste angezeigt.

   

Integriertes Terminal

1. Öffnen Sie ein integriertes Terminal vom Terminal -> Neues Terminal.

2. Erstellen Sie eine neue Verzweigung MY-BRANCH mit dem folgenden Git-Befehl:

   git checkout -b MY-BRANCH
   

Lokales Commit für Änderungen

Nachdem Sie Änderungen an Dateien in Ihrer Verzweigung vorgenommen haben, übernehmen Sie die Änderungen.

Aktivitätsleiste

1. Wählen Sie die Quellcodeverwaltung in der Aktivitätsleiste aus.

2. Geben Sie Ihre Commit-Nachricht ein, und wählen Sie dann "Commit ausführen" aus.

   

Statusleiste

Diese Aktion ist in diesem Feature nicht verfügbar. Wählen Sie eine andere Registerkarte aus.

Befehlspalette

1. Öffnen Sie die Befehlspalette mit der Tastenkombination STRG + UMSCHALT + P.
2. Filtern Sie in der Befehlspalette, und Git wählen Sie Commitdann
3. Geben Sie Ihre Commit-Nachricht ein, und drücken Sie dann die EINGABETASTE.

Integriertes Terminal

1. Öffnen Sie ein integriertes Terminal vom Terminal -> Neues Terminal.

2. Erstellen Sie eine neue Verzweigung MY-BRANCH mit dem folgenden Git-Befehl:

   git commit -m "YOUR COMMIT MESSAGE"
   

Pushen einer lokalen Verzweigung auf GitHub

Aktivitätsleiste

1. Wählen Sie das Quellcodeverwaltungs-Symbol in der Aktivitätsleiste aus.
2. Wählen Sie Branch veröffentlichen aus. Wenn das Repository auf GitHub nicht vorhanden ist, wird das Repository für Sie erstellt.

Statusleiste

1. Wählen Sie auf der Visual Studio Code-Statusleiste rechts neben dem Branchnamen das Symbol zum Pushen aus.

   

2. Wählen Sie den Remotenamen im Popupfenster aus. Wenn Sie nur einen Remoteort haben, werden Sie nicht aufgefordert, den Remotenamen auszuwählen.

Befehlspalette

1. Öffnen Sie die Befehlspalette mit der Tastenkombination STRG + UMSCHALT + P.
2. Filtern Sie in der Befehlspalette, und Git wählen Sie Pushdann
3. Wenn Sie über mehrere Upstream-Remotes verfügen, wählen Sie einen Remotenamen aus, und drücken Sie dann die EINGABETASTE.

Integriertes Terminal

1. Öffnen Sie ein integriertes Terminal vom Terminal -> Neues Terminal.

2. Erstellen Sie eine neue Verzweigung MY-BRANCH mit dem folgenden Git-Befehl:

   git push <remote-name> <branch-name>
   

Anzeigen der Git-Ausgabe

Sie können die Ausgabe der Git-Befehle anzeigen, wenn Sie die Quellcodeverwaltungserweiterung verwenden. Diese Ausgabe hilft beim Debuggen, wenn ein Befehl fehlschlägt.

1. Wählen Sie das Quellcodeverwaltungs-Symbol in der Aktivitätsleiste aus.

2. Wählen Sie die Auslassungspunkte (...) und anschließend Git-Ausgabe anzeigen aus.

   

Visual Studio Code-Tools für die Arbeit mit Git und GitHub

Beim Arbeiten in Visual Studio Code mit einem Repository werden separate Tools verwendet:

Symbol	Informationen	Zugriff von
	Git-Befehle in der Befehlspalette	F1
	Quellcodeverwaltungs-Erweiterung	Aktivitätsleiste
	Erweiterung für Pull Requests und Probleme auf GitHub	Aktivitätsleiste
	Erweiterung für GitHub-Repositorys	Sie können schnell und einfach ein GitHub-Repository öffnen, indem Sie in der Befehlspalette nach „GitHub-Repositorys: Repository öffnen...“ (F1) suchen oder im Remoteindikator (die grüne Schaltfläche in der unteren linken Ecke der Statusleiste) die Option „Open GitHub Repository...“ (Github-Repository öffnen...) auswählen.

Zugehörige Ressourcen

• Bereitstellen einer Web-App
• Arbeiten mit GitHub in Visual Studio Code
• Verwenden von Visual Studio Code mit anderen Versionskontrollanbietern