Nachdem ich ja in den letzten Tagen meine Webpage mittels Jekyll neuaufgesetzt habe, und die ersten beiden Posts erfolgreich erstellt habe, kommt der Wunsch auf, dass Ganze nicht mehr ‘zu Fuß’ zu erledigen. Im Prinzip sieht das bisher so aus, dass ich ein Terminal genutzt habe, dann in etwa wie folgt:

cd ~/harald-berghoff.de
cp _posts/2019-12-23-relaunch.markdown _posts/2019-12-27-new-theme.markdown
#statt vi kann auch jeder andere installierte Editor genutzt werden!
vi _posts/2019-12-27-new-theme.markdown
bundle exec jekyll serve
#wenn alles ok ist:
bundle exec jekyll build -d publish
#jetzt muss nur noch das Verzeichnis publish in das Webdir des Server kopiert werden

Auch wenn das alles problemlos funktioniert und bezüglich der Toolnutzung kaum mit weniger auskommen könnte, ist das Einsetzen des Datums von Hand und das Editieren des Textes nicht wirklich komfortabel zu nennen. Wenn ich Fehler in dem Markdown mache, sehe ich das dann entweder bei der Einbindung oder im Browser, was zu einigen Fehlerzyklen führen kann.

Grundsätzlich muss Visual Studio Code hier weiterhelfen können. Immerhin werden aktuell sehr viele Seiten via VS Code in Jekyll erstellt oder eben auch nur in Markdown, es handelt sich also um eine nicht selten genutzte Kombination. Visual Studio Code gibt es auch für die meisten Linux Distributionen, die Tatsache dass ich Fedora einsetze sollte damit kein Problem darstellen. Die Installation ist unter Visual Studio Code Installation beschrieben:

sudo rpm --import https://packages.microsoft.com/keys/microsoft.asc
sudo sh -c 'echo -e "[code]\nname=Visual Studio Code\nbaseurl=https://packages.microsoft.com/yumrepos/vscode\nenabled=1\ngpgcheck=1\ngpgkey=https://packages.microsoft.com/keys/microsoft.asc" > /etc/yum.repos.d/vscode.repo'
sudo dnf install code

Das ebenfalls angegebene dnf check-update habe ich einfach übersprungen, da ich regelmässig Aktualisierungen laufen lasse. Die erste Zeile lädt den Schlüssel von der Microsoft Seite herunter und stuft ihn als vertrauenswürdig ein. Es macht ggf. Sinn den schlüssel nur herunterzuladen und dann zu überprüfen, bevor er für rpm importiert wird. Statt der URL kann man dann auch den Filenamen angeben.

Tatsächlich ist VS Code anschließend startklar. Ich habe dann in VS Code noch einige Extensions installiert:

  • markdownlint: Zeigt Syntax Probleme und einige weitere Probleme mit den Markdown Dateien beim Editieren an
  • Liquid: Bietet Syntax Highlighting und Formatierungshilfen für Liquid an
  • jekyll-post: Erstellt neue Posts basierend auf einem Template
  • Front Matter: Erleichtert die Bearbeitung von Front Matter in mehreren Dateien gleichzeitig
  • Jekyll Problem Matchers: Zeigt die Fehlermeldungen und Warnungen von Jekyll in VSCode unter ‘Problems’ an, also genau wie markdownlint

Wenn ich damit VS Code nutze, und das Verzeichnis ~/harald-berghoff.de als Arbeitsverzeichnis verwende, ist das Editieren und Neuanlegen der einzelnen Posts schon erheblich vereinfacht. Was jetzt noch fehlt, ist das Anlegen der sogenannten Tasks innerhalb des VS Code Projekts, so dass die Kommandos die oben genannt sind auf Mausklick hin ausgeführt werden können. Die Extension Jekyll Problem Matchers liefert ja schon eine recht brauchbare Vorlage für das was ich machen will. Weitere Beschreibungen, was Tasks genau sind und wie man diese anlegen kann sind unter VS Code Tasks zu finden.

Ich habe einfach folgendes gemacht: Im Menü ‘Terminal’ habe ich ‘Configure Tasks’ ausgewählt, und dann ‘Create tasks.json file from template’. In der Liste die dann erscheint habe ich ‘Others’ ausgewählt. Daraufhin wird eine Editor mit der Datei ‘task.json’ geöffnet. Der Inhalt ist nur:

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [
        {
            "label": "echo",
            "type": "shell",
            "command": "echo Hello"
        }
    ]
}

Aber zusammen mit dem Template von der Erweiterung Jekyll Problem Matchers habe ich dann die Datei so angepasst, dabei habe ich eigentlich nur das publish Verzeichnis beim build Task hinzugefügt und eine der doppelten “group” Zeilen gelöscht.

{
  // See https://go.microsoft.com/fwlink/?LinkId=733558
  // for the documentation about the tasks.json format
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Serve",
      "type": "shell",
      "command": "bundle exec jekyll serve --livereload",
      "group": {
        "kind": "test",
        "isDefault": true
      },
      "isBackground": true,
      "problemMatcher": ["$jekyll-error-watch", "$jekyll-warning-watch"]
    },
    {
      "label": "Build",
      "type": "shell",
      "command": "bundle exec jekyll build -d publish",
      "problemMatcher": ["$jekyll-error", "$jekyll-warning"],
      "group": {
        "kind": "build",
        "isDefault": true
      }
    }
  ]
}

Das habe ich dann gleich ausprobiert indem ich unter ‘Terminal’->’Run Task’->’Serve’ ausgewählt habe. Das funktioniert auch schon recht gut, im VS Code Terminal kommt der Output, den ich sonst ebenfalls in meinem Terminal sehe, auch mit dem Browser ist die Seite aufzurufen.

> Executing task: bundle exec jekyll serve --livereload <

Configuration file: /home/dilb/harald-berghoff.de/_config.yml
            Source: /home/dilb/harald-berghoff.de
       Destination: /home/dilb/harald-berghoff.de/_site
 Incremental build: disabled. Enable with --incremental
      Generating...
       Jekyll Feed: Generating feed for posts
        Pagination: found page: index.html
                    done in 0.277 seconds.
 Auto-regeneration: enabled for '/home/dilb/harald-berghoff.de'
LiveReload address: http://127.0.0.1:35729
    Server address: http://127.0.0.1:4000/
  Server running... press ctrl-c to stop.
        LiveReload: Browser connected
      Regenerating: 1 file(s) changed at 2019-12-29 13:24:01
                    _posts/2019-12-29-vs_code_nutzung.markdown
       Jekyll Feed: Generating feed for posts
        Pagination: found page: index.html
                    ...done in 0.202052878 seconds.

Der einzige Punkt der auffällt ist unter Output zu sehen:

Task Serve is a background task but uses a problem matcher without a background pattern

Unter VS Code Problem Matcher findet sich der Hinweis darauf, dass ein Problem-Matcher für einen Background Task auch eine Background Eigenschaft benötigt:

"background": {
    "activeOnStart": true,
    "beginsPattern": "^\\s*\\d{1,2}:\\d{1,2}:\\d{1,2}(?: AM| PM)? - File change detected\\. Starting incremental compilation\\.\\.\\.",
    "endsPattern": "^\\s*\\d{1,2}:\\d{1,2}:\\d{1,2}(?: AM| PM)? - Compilation complete\\. Watching for file changes\\."
}

Allerdings ist der Problem Matcher in der task.json entweder ein String, oder ein Array mit den Definitionen. Da in der Beispiel Konfig Strings angegeben sind, kann ich nicht einfach ein Array hinzufügen. Aktuell scheint es sich auch nicht um einen Fehler zu handeln. Der Repositorylink unter der Extensionseite ist leider nicht gepflegt, über den Namen des Entwicklers habe ich aber das Repo hier gefunden: osteele/vscode-jekyll. Im Prinzip ist das Ganze sehr einfach aufgebaut, die gesamten json Definitionen befinden sich in der Datei package.json. Ich werde mir demnächst das Ganze einmal anschauen, und wenn ich es zufriedenstellend lösen kann, dem Entwickler einen Patch vorschlagen.