UweS: Die Seite wurde neu angelegt: „== 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: [https://code.visualstudio.com VS Code] Ein vorhandener SSH-Schlüssel oder Z…“

2025-10-26T13:16:27Z

Die Seite wurde neu angelegt: „== 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: ** [https://code.visualstudio.com VS Code] ** Ein vorhandener SSH-Schlüssel oder Z…“

Neue Seite

== 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:
** [https://code.visualstudio.com 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:

<syntaxhighlight lang="powershell">
ssh-keygen -t ed25519 -C "meinwiki"
</syntaxhighlight>

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

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

== 2. Verbindung testen ==
In der PowerShell:

<syntaxhighlight lang="bash">
ssh meinwiki
</syntaxhighlight>

Wenn der Login erfolgreich ist, erscheint der Prompt des Servers, z. B.:
<pre>
ssh-w0206472@dd55322:/www/htdocs/w0206472$
</pre>

== 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.
<code>C:\Users\<BENUTZER>\Documents\cmo-workspace</code>

Diesen Ordner in VS Code öffnen.

=== SFTP-Konfiguration erstellen ===
Im Projektordner einen Unterordner <code>.vscode</code> anlegen.
Darin eine Datei <code>sftp.json</code> mit folgendem Inhalt:

<syntaxhighlight lang="json">
{
"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
}
</syntaxhighlight>

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

== 4. Verbindung testen ==
Eine Serverdatei (z. B. <code>LocalSettings.php</code>) öffnen, am Ende ergänzen:

<syntaxhighlight lang="php">
# test upload from VS Code
</syntaxhighlight>

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

<syntaxhighlight lang="bash">
cd /www/htdocs/w0206472/christian-morgenstern-online.de/cmo
tail -n 3 LocalSettings.php
</syntaxhighlight>

== 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 <code>.wiki</code>-Datei:
<syntaxhighlight lang="text">
Strg + Umschalt + V
</syntaxhighlight>
Oder über die Befehlspalette:
<code>Wikitext: Open Preview to the Side</code>

In der Statusleiste unten rechts sollte „Wikitext“ stehen.

=== Automatisch Vorschau öffnen ===
In den Benutzereinstellungen (<code>settings.json</code>):

<syntaxhighlight lang="json">
"wikitext.preview.autoShowPreviewToSide": true
</syntaxhighlight>

== 6. Nützliche Tipps ==
* Mit <code>Strg + B</code> blendest du die Seitenleiste aus – mehr Platz zum Schreiben.
* Mit <code>Alt + Z</code> 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.

Hilfe:Einrichtung von Visual Studio Code für MediaWiki - Versionsgeschichte