VS Code – SFTP Plugin nutzen

Für meine Programmierarbeiten an dieser Website nutze ich gerne die Entwicklungsumgebung (IDE) von Visual Studio Code in Kombination mit dem Plugin VS Code SFTP.

Wieso und wo die Vorteile bei diesem Plugin liegen, erfahren sie jetzt in diesem Artikel.

Mein Problem ohne das Plugin VS Code SFTP

In der Anfangszeit habe ich immer einzelne WordPress Dateien vom Server heruntergeladen, um Sie zu bearbeiten. Nach der Bearbeitung habe ich dann die einzelnen Dateien manuell wieder hochgeladen. Ziemlich schnell kam die Frage auf, ob man diesen Prozess nicht auch optimieren kann.

Nach einer Recherche im Netz bin ich dann ziemlich schnell über das VS Plugin SFTP von liximomo gestolpert. Und ich war begeistert, denn das Plugin löst genau mein Problem.

So funktioniert VS Code SFTP

Im Grunde erzeugt das Plugin eine SFTP oder FTP Schnittstelle, je nachdem was Sie brauchen bzw. bevorzugen. Hierüber wird der lokale Arbeitsbereich dann mit dem Server synchronisiert. Die Synchronisierung selbst funktioniert in beide Richtungen:

• vom lokalen Arbeitsbereich zum Server
• vom Server zum lokalen Arbeitsbereich
• Manuelle Synchronisierung von einzelnen Dateien oder vom kompletten Ordner
• Automatisierte Synchronisierung, sobald man die Dateien mit Visual Studio Code speichert.

So integriert man das Plugin in Visual Studio Code

1. Öffnen Sie Visual Studio Code.
2. Drücken Sie folgende Tasten: STRG + SHIFT + X. Es öffnet sich nun links der Bereich Extensions/ Erweiterungen.
3. Jetzt im Extension-Suchfeld “SFTP” eingeben und Enter drücken. Es werden Ihnen jetzt verschiedene Plugins angezeigt.
4. Installieren Sie die Extension von liximomo. Hierzu die Erweiterung auswählen und auf “installieren” drücken.

Konfiguration und Synchronisierung

Nach der Installation erzeugen wir nun eine .json Datei im gewünschten Ordner.

1. Hierzu das Tasten-Kürzel “STRG + SHIFT + P” drücken. Es öffnet sich im Editor oben ein Suchfeld.
2. Hier SFTP: Config eingeben bzw. unter den Vorschlägen auswählen.
3. Anschließend werden Ihnen Ihre Arbeitsordner im Arbeitsbereich angezeigt. Nun den gewünschten Ordner auswählen.
4. Das Plugin VS Code SFTP erzeugt nun eine .json Datei im gewünschten Ordner. Diese müssen wir nun anpassen.

Befüllen Sie nun die Datei, sodass eine Synchronisierung möglich ist.

Beispiel anhand eines Strato Servers

• Unter “name” können Sie ein Schlagwort vergeben, sodass Sie Ihre neue Funktion schneller zu ordnen können. In meinem Fall schreibe ich “Mein Theme”, weil ich auf meiner Stage Version gerade ein eigenes Theme entwickle und dort die Dateien mit dem lokalen Arbeitsbereich synchronisieren will.
• Unter “host” müssen Sie nun die Server-Adresse eintragen. Bei Strato wäre diese beispielsweise “ssh.strato.de”. Also “localhost” gegen “ssh.strato.de” austauschen.
• Unter “protocol” empfehle ich “sftp” zu nutzen. Es funktioniert aber auch “ftp”.
• Je nach “protocol” wählen Sie entweder “22” (SFTP) oder “21” (FTP).
• Unter “username” den in Strato vergebenen Nutzernamen für SFTP eingeben.
• Die Zeile “password” fehlt. Diese entsprechend anlegen und hier das Master-Password aus Strato eintragen.
• Unter “remotePath” tragen sie nun das Server-Verzeichnis ein, dass Sie zukünftig synchronieren möchten. Bei einer WordPress Installation könnte das wie folgt aussehen: (/Website-Ordner/wp-content/themes/Theme-Ordner).
• Unter “uploadOnSave” ist regulär “true” eingetragen. Mit diesem Befehl wird mit jedem Speichern automatisch synchronisiert. Mit “false” wird diese Funktion ausgeschaltet.

Das Plugin hat nun Zugriff auf Ihren gewünschten Ordner auf dem Server. Zur Bearbeitung nutzen Sie immer den aktuellen Arbeitsordner. Wenn Sie diesen mit der rechten Maustaste anklicken, können Sie die Synchronisierung starten.

Des Weiteren finden Sie im Explorer finden nun ein weiterer Symbol. Es trägt den Namen “SFTP”. Hierüber sehen Sie die Dateien die aktuell auf dem Server gespeichert sind.

Quellen

Als Inspiration diente mir der Artikel “Visual Studio Code mit SFTP installieren und einrichten” von Pixelbart.