Hilfe:Einrichtung von Visual Studio Code für MediaWiki

Aus CMO

Ziel

Diese Anleitung beschreibt, wie Visual Studio Code (VS Code) mit einem MediaWiki-Webspace verbunden wird, um Dateien bequem zu bearbeiten und automatisch hochzuladen. Zusätzlich werden Syntax-Highlighting und eine Wikitext-Vorschau eingerichtet.

Voraussetzungen

  • Ein funktionierender SSH/SFTP-Zugang zum Webspace
  • Auf dem lokalen Rechner installiert:
    • VS Code
    • Ein vorhandener SSH-Schlüssel oder Zugangsdaten vom Hoster
    • Optional: WinSCP für den ersten Test der Verbindung

1. SSH-Schlüssel erstellen (unter Windows)

Falls noch kein SSH-Schlüssel vorhanden ist: 

ssh-keygen -t ed25519 -C "meinwiki"

Den Standard-Speicherort bestätigen: C:\Users\<BENUTZER>\.ssh\id_ed25519

Den öffentlichen Schlüssel (id_ed25519.pub) beim Hoster im Kundenbereich hinterlegen.

2. Verbindung testen

In der PowerShell: 

ssh meinwiki

Wenn der Login erfolgreich ist, erscheint der Prompt des Servers, z. B.: 

ssh-w0206472@dd55322:/www/htdocs/w0206472$

3. SFTP in VS Code einrichten

Erweiterung installieren

  • In VS Code links auf Erweiterungen (vier Quadrate)
  • Suche nach: SFTP
  • Erweiterung von Natizyskunk installieren

Arbeitsordner anlegen

Einen lokalen Ordner erstellen, z. B. C:\Users\<BENUTZER>\Documents\cmo-workspace

Diesen Ordner in VS Code öffnen.

SFTP-Konfiguration erstellen

Im Projektordner einen Unterordner .vscode anlegen. Darin eine Datei sftp.json mit folgendem Inhalt: 

{
  "name": "cmo-remote",
  "host": "w0206472.kasserver.com",
  "port": 22,
  "username": "ssh-w0206472",
  "privateKeyPath": "C:/Users/UN201/.ssh/id_ed25519",
  "remotePath": "/www/htdocs/w0206472/christian-morgenstern-online.de/cmo",
  "uploadOnSave": true
}

Speichern und VS Code neu laden. Danach über die Befehlspalette (Strg + Shift + P) den Befehl SFTP: Sync Remote → Local ausführen.

4. Verbindung testen

Eine Serverdatei (z. B. LocalSettings.php) öffnen, am Ende ergänzen: 

# test upload from VS Code

Speichern → VS Code sollte automatisch hochladen. Auf dem Server prüfen: 

cd /www/htdocs/w0206472/christian-morgenstern-online.de/cmo
tail -n 3 LocalSettings.php

5. Syntax-Highlighting und Vorschau für Wikitext

Wikitext-Erweiterung

  • Erweiterung Wikitext (Publisher: Holme) installieren
  • Sie bietet Syntax-Highlighting und eine echte Vorschau für MediaWiki-Markup

Vorschau öffnen

In einer geöffneten .wiki-Datei: 

Strg + Umschalt + V

Oder über die Befehlspalette: Wikitext: Open Preview to the Side

In der Statusleiste unten rechts sollte „Wikitext“ stehen.

Automatisch Vorschau öffnen

In den Benutzereinstellungen (settings.json): 

"wikitext.preview.autoShowPreviewToSide": true

6. Nützliche Tipps

  • Mit Strg + B blendest du die Seitenleiste aus – mehr Platz zum Schreiben.
  • Mit Alt + Z aktivierst du den Zeilenumbruch.
  • Der Upload erfolgt automatisch beim Speichern – Änderungen sind sofort online.
  • Für Serverbefehle (z. B. Composer oder Updates) nutze weiter das SSH-Fenster.

Fazit

Mit dieser Einrichtung dient VS Code als komfortabler Editor für MediaWiki-Dateien: Syntax-Highlighting, Vorschau und automatischer Upload ersetzen das Arbeiten über FTP-Programme fast vollständig.

Abgerufen von „https://christian-morgenstern-online.de/cmo/index.php?title=Hilfe:Einrichtung_von_Visual_Studio_Code_für_MediaWiki&oldid=2290“