Es gibt jede Menge anderer Editoren und IDEs, die Du genauso gut verwenden kannst. Exemplarisch nehme ich Visual Studio Code (auch VS Code genannt). Die Mac Benutzer neigen evtl. eher zu Sublime Text. Voraussetzung ist, dass die IDE oder der Editor eine SFTP Verbindung aufbauen kann, um Dateien mit dem Server synchronisieren zu können.
Wir brauchen noch einen lokalen Arbeitsordner, den wir am besten jetzt anlegen. Ich nenne den www und lege ihn in den bereits erstellten linux-server Ordner ab (/linux-server/www).
Nach dem Download und der Installation, öffnen wir den www Ordner mit Visual Studio Code und speichern den "Arbeitsbereich" unter dem Namen www ab. Das erzeugt die Datei www.code-workspace. Der Speicherort ist frei, ich lege die Datei exemplarisch neben dem www Ordner ab. Eine gute Arbeitsweise kann auch sein, alle Workspace Dateien an einem Ort zu speichern. Das ist ganz praktisch, wenn an vielen Projekten parallel gearbeitet wird.
Die Workspace Datei können wir zukünftig direkt ausführen, was den letzten Arbeitsstand wiederherstellt. Und sie dient auch dazu, Einstellungen zu speichern, die nur das aktuelle Projekt betreffen. Sie hat also die gleiche Funktion wie Projektdateien von IDEs.
SFTP Addon
Das Addon SFTP bringt uns den Komfort, während der Entwicklung, lokale Dateien mit dem Server zu synchronisieren.
Diese Arbeitsweise ist nicht zu empfehlen, wenn mehrere Leute auf dem Server arbeiten!
Über die Schaltfläche "Erweiterungen" suchen wir nach "SFTP" und wählen dann aus der Liste das Addon vom Herausgeber "Natizyskunk". Anschließend können wir es installieren:
SFTP Verbindung zum Arbeitsbereich hinzufügen
Über die VS Code Befehlspalette erzeugen wir eine Konfigurationsdatei mit unseren Verbindungsdaten. Die Befehlspalette öffnet sich über das Zahnrad (links unten) oder mit der Tastenkombination STRG+SHIFT+P. Wir suchen nach "SFTP: Config" und bestätigen mit Enter. Das erzeugt und öffnet die Datei sftp.json:
Die sftp.json sollte folgende Verbindungseinstellungen haben (basierend auf dieser Vorarbeit):
.vscode/sftp.json
{
"host": "116.203.69.89",
"port": 22123,
"username": "tom",
"protocol": "sftp",
"privateKeyPath": "D:/linux-server/keys/private-key",
"passphrase": true,
"remotePath": "/var/www/",
"uploadOnSave": true,
"syncMode": "update",
"ignore": [".vscode", ".git", ".DS_Store", "node_modules"]
}
Die Passphrase kann auch als Klartext hinterlegt werden. Es ist jedoch sinnvoll "passphrase": true zu setzen, wodurch beim ersten Verbindungsversuch die Passphrase abgefragt wird.
Wichtig ist es einen remotePath anzugeben, da wir sonst mit dem Root-Verzeichnis synchronisieren würden (was übrigens ohne dem Schlüsselwort sudo gar nicht erlaubt wäre). Die Einstellung "uploadOnSave": true bewirkt, dass eine Datei, nach dem Abspeichern gleich hochgeladen wird.
Alle SFTP Funktionen können über das Kontextmenü (rechte Maustaste auf Dateien oder Ordner) ausgeführt werden. Da wir schon Ordner und Dateien auf dem Server haben, sollte wir sie erst herunterladen:
Alternativ hätten wir auch statt "Download Folder" die Dateien mit "Sync Remote -> Local" bekommen können.
Wichtig zu wissen ist: Wenn lokal neue Dateien oder Ordner angelegt werden, müssen sie manuell hochgeladen werden. Zum Beispiel per Kontextmenü mit Upload oder Sync Local -> Remote. Danach werden Dateien durch die Option uploadOnSave automatisch aktualisiert.
SFTP Verbindung testen
Zum Testen kannst die vorhandene index.htm ändern, um zu schauen, ob alles richtig eingestellt ist:
Weitere nützliche Einstellungen
Folgende Einstellungen in VS Code sind optional und vor allem eine persönliche Vorliebe.
Die Einstellungen öffnen wir zum Beispiel über "Bearbeiten/Einstellungen oder mit dem Shortcut STRG+,. Die einzelnen Optionen lassen sich mit einer Einstellungs-ID (z. B. editor.insertSpaces) ganz schnell finden.
Tabs anstelle von Leerzeichen
Grundsätzlich sollte ein Team sich einigen, ob Tabs oder Leerzeichen für den Einzug verwendet wird. Das erleichtert die Arbeit mit Git. Tabs bieten den Vorteil, dass jeder die Tab-Größe für sich passend einstellen kann ohne das Dokument zu ändern.
editor.insertSpaces: disable
Tab-Größe
Mit einer kleinen Tab-Größe lässt sich besser auf kleinen Bildschirmen, beispielsweise einem Notebook, programmieren.
editor.tabSize: 2
Standard Zeichensatz utf-8
Eine neu angelegte Datei bekommt so automatisch die Zeichenkodierung utf-8.
files.encoding: utf8
Zeichensatz eines Dokuments erraten
Das verhindert eine Datei mit einer falschen Kodierung zu öffnen und gegebenenfalls falsch abzuspeichern.
files.autoGuessEncoding: true
Klammerpaare einfärben
Klammerpaare bekommen unterschiedliche Farben, was den Code leserlicher macht.
editor.bracketPairColorization.enabled: true
Leere Ordner im Explorer nicht zusammenfassen
Ist wirklich Geschmackssache. Ich bevorzuge die Ansicht einer Baumstruktur auch wenn ein Ordner leer ist.
explorer.compactFolders: disable
git Ordner im Explorer anzeigen
Dateien eines ".git" Ordners sollten ohnehin nicht manuell bearbeitet werden, daher blende ich diese aus.
"files.exclude": {
"**/.git": false,
}
Weitere nützliche Addons
Für die Webentwicklung empfehle ich folgende Addons:
- Auto Rename Tag
- Bookmarks
- Import Cost
- JavaScript (ES6) code snippets
- Live Server
- SFTP
- shell-format
- Snippet Creator
- Turbo Console Log
Datenbank Management Addons: