Letzte Aktualisierung am 20. März 2025


Auf der Suche nach einem kostenfreien Editor für Quellcode unterschiedlichster Couleur bin ich beruflich wie auch privat bei Visual Studio Code (VSC) hängen geblieben. Mittlerweile habe ich VSC mit einigen Plugins z.B. für die Verbindung zu meinem ioBroker ergänzt. Für Die Quellcodeverwaltung benutze das im vorangegangenen Kapitel installierte Gitea.
Dieser Abschnitt zur Entwicklungsumgebung ist relativ kurz gehalten, da es dazu, wie ich finde, sehr gute Tutorials online gibt. Die Links findet ihr unten im Text bzw. am Ende bei den Quellen & Links.


Installation Visual Studio Code

Visual Studio Code (kurz VSC) wird auf der offiziellen Download-Seite für die Plattformen Windows, Linux und macOS angeboten. Für die Installation lädst du die für dich passende Variante herunter und installierst sie gem. Anleitung.

Ich kann aus eigener Erfahrung sagen, dass alle drei Varianten reibungslos funktionieren, einzig die Tastatur-Kürzel sind etwas unterschiedlich. Ich nutze die Windows-Version auf meinem PC, die macOS-Version auf einem MacMini und die Linux-Version im Linux-Subsystem auf einem Chromebook.

Allen Installationen gemein ist die Nutzung meines lokal betriebenen Gitea als Repository für meine Quellcode-Dateien.

Als Erweiterungen habe ich das German Language Pack for Visual Studio Code und ioBroker.javascript installiert. Letztere macht allerdings nur Sinn, wenn du ioBroker nutzen möchtest. Zur Installation der Erweiterungen verwendest du am besten die in VSC integrierte Plugin-Verwaltung im linken Navigationsbereich und suchst dann nach den beiden Erweiterungen im Marketplace.

Für die Einrichtung und Verwendung von VSC und ioBroker gibt es gutes Tutorial, das ich dir wärmstens empfehlen kann.

Visual Studio Code und Git

VSC bringt von Haus aus eine Unterstützung für die Nutzung von Git-Repositories mit. Dies bedingt jedoch, dass auf dem genutzten Rechner ein Git-Client installiert ist. Diesen gibt es auf der Git-Seite, ebenfalls für die verschiedenen Betriebssysteme.

Wenn der Git-Client auf deinem Rechner installiert ist, kannst du damit über VSC auf deine Gitea-Repositories zugreifen. Ein gute Anleitung für die Nutzung von Git in Verbindung mit VSC findest du in der VSC-Dokumentation (inkl. Video).

Den Link für ein Repository findest du in der Gitea-GUI auf der jeweiligen Seite des Repositories. In VSC musst du für die Einbindung deiner Repositories einen Nutzernamen und Kennwort deines Gitea-Nutzers eingeben.
Für das zuvor angelegte Repository infra sieht die Seite in Gitea wie in folgender Abbildung aus, da es bislang leer ist. Mit der Schaltfläche am rechten Ende der URL-Ausgabe kopierst du dir diese URL.

Anschließend öffnest du VSC und wechselt in die Explorer-Ansicht. Hier hast du nun die Möglichkeit ein Repository zu klonen.

Nachdem du „Repository klonen“ angeklickt hast, gibst du in der Eingabezeile die zuvor kopierte URL zu deinem Repository ein und bestätigst die Eingabe mit Return.

Da ich an einem Windows PC arbeite, öffnet sich anschließend ein Dateiauswahl-Dialog, in dem du ein Verzeichnis als Ziel für das Klonen auswählen musst. Ich habe hier ein Unterverzeichnis tutorial in meinem lokalen Dokumente-Verzeichnis angelegt und als Ziel ausgewählt. Nach Bestätigung des Verzeichnisses wirst du noch nach den Anmeldedaten für Gitea gefragt. Wenn alles funktioniert hat, erscheint ein Dialog mit der Frage, ob du das gerade geklonte Repository öffnen möchtest. Das bestätigst du mit der Schaltfläche „Öffnen“. Ggf. erhälst du die Nachfrage, ob du den Autoren vertraust, die du mit „Ja, ich vertraue den Autoren“ beantwortest.
In deinem lokalen Dateisystem im o.g. Verzeichnis tutorial ein weiteres Unterverzeichnis mit dem Repository-Name infra angelegt. Darin landen alle Inhalte des Repositories. Wenn du weitere Repositories in das tutorial-Verzeichnis klonst, werden auch dafür jeweils Unterverzeichnisse mit dem Repository-Namen angelegt.

In VSC siehst du nun in der Explorer-Ansicht einen neuen, leeren Eintrag mit dem Namen des Repositories infra. In dieser Ansicht kannst du jetzt Dateien und Verzeichnisse über die jeweiligen „+“-Schaltfläche rechts neben dem Repository-Namen anlegen. Das kannst du gleich ausprobieren und das Verzeichnis build anlegen, darunter zwei weitere Verzeichnisse portainer und watchtower. In jedem der beiden Verzeichnisse legst du nun eine Datei docker-compose.yml und im Verzeichnis portainer zusätzlich die Datei .env an, sodass deine Ansicht wie in der folgenden Abbildung aussieht.

Die gerade angelegten Verzeichnisse und Dateien sind zunächst nur auf deinem Rechner lokal vorhanden. Um diese in dein Repository zu bekommen, wechselt du in die Ansicht „Quellcodeverwaltung“. Dort siehst deine Änderungen, gibst eine kurze Nachricht für die Änderungen ein und wählst „Commit und Push“. Damit werden deine lokalen Änderungen in das Repository übertragen und sind auch in der Gitea-GUI sichtbar.

Jetzt ist an der Zeit deinen Arbeitsbereich in VSC zu speichern, den du beim nächsten Öffnen wieder nutzen kannst. In diesen Arbeitsbereich kannst du alle weiteren Repositories einbinden sowie weiteren Verzeichnisse, die du benötigst. Der Arbeitsbereich hält alles zusammen. Zum Speichern wählst du im Datei-Menü den Punkt „Arbeitsbereich speichern unter…“, wählst einen passenden Dateinamen und legst ihn am besten im selben Verzeichnis ab, in das du deine Repositories hineinklonst. Meine Struktur sind nach dem Klonen des infra-Repositories und Speichern des Arbeitsbereichs so aus:

Für die Einbindung weiterer Repositories benutzt du in VSC die Tastenkombination Strg + Shift + P, die dich in die Befehlszeile bringt. Dort suchst du nach „Git: Klonen“ (sollte sehr schnell unter den zuletzt verwendeten Befehlen zu finden sein), bestätigst mit Return und landest wieder in der Eingabezeile für die Repository-URL.

Zur Übung: docker-compose und .env für Portainer ins Repository

Zur Sicherung der Dateien docker-compose.yml und .env von Portainer kopierst du den Inhalt aus dem Kapitel „Installation Portainer“ im VSC in die beiden dafür angelegten Dateien unter infra/build/portainer. Ein Klick auf die jeweilige Datei in der Explore-Ansicht in VSC öffnet diese zum Bearbeiten. Nach dem Speichern der jeweiligen Datei mit Strg + S wird die Änderung beider Dateien durch den blauen Punkt bei der Quellcodeverwaltung angezeigt.

Zum Upload ins Repository wechselt du wieder in die Ansicht „Quellcodeverwaltung“, gibst eine kurze Nachricht für die Änderung ein und überträgst die neuen Inhalte mit „Commit und Push“ zu Gitea. Zur Kontrolle kannst du in der Gitea-GUI durch dein infra-Repository bis zu den beiden Dateien browsen und in der GUI den identischen Inhalt wie im VSC sehen.


Quellen & Links

Schreibe einen Kommentar