Fryboyter

VS Code - Snippet für Front Matter anlegen

Meine Artikel erzeuge ich mittels Markdown-Dateien. Am Beginn dieser Datei ist der sogenannte Front-Matter-Bereich vorhanden, in dem Informationen wie der Titel, das Datum der Veröffentlichung oder die Tags eines Artikels hinterlegt werden.

Diesen Bereich jedes mal manuell zu erzeugen ist auf Dauer nervig. Der von mir verwendete statische Website-Generator Hugo bietet hierfür Templates an, sodass man mit einem Befehl wie hugo new vs-code-snippet-fuer-front-matter-anlegen.md einen neuen Artikel anlegen kann.

Ich bevorzuge es allerdings alles mit dem Editor zu machen. Aktuell nutze ich VS Code. Dieser bietet sogenannte Snippets, mit denen man Vorlagen erstellen kann.

Hierfür wählt man in den Einstellungen im Menü “Datei” “Benutzerausschnitte” aus. Im nun angezeigten Drop-Down-Menü wählt man “Neue globale Codeausschnittsdatei…” aus und gibt der Snippet-Datei einen aussagekräftigen Dateinamen.

Die nun angezeigte Datei füllt man mit folgendem Inhalt.

{
  "Blog post frontmatter": {
    "prefix": "fmc",
    "description": "Erzeugt Frontmatter für Hugo-Artikel",
    "body": [
      "---",
      "title: ${1}",
      "date: ${2:${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE}T${CURRENT_HOUR}:${CURRENT_MINUTE}:${CURRENT_SECOND}+0100}",
	  "categories:", 
	  "- ${3}", 
	  "tags:",
    "- ${4}",
    "slug: ${5}",
      "---",
      "$0"
    ]
  }
}

In der ersten Zeile gibt man den Namen des Snippets an, der im Editor angezeigt wird. Der Prefix dient als Shortcode mit dem man den Inhalt des Snippets schnell einfügen kann. Hier kann man auch etwas anderes eintragen. Ich habe mir für fmc (front matter create) entschieden.

Im Body wird der Inhalt des Snippets angelegt, der automatisch eingefügt werden soll. In meinem Fall wird mit --- der Front-Matter-Bereich begonnen. Dann folgt der Titel, das Datum, die Kategorien, die Tags sowie der Slug über den der Artikel erreichbar ist. Mit --- wird der Front-Matter-Bereich wieder beendet.

Abschließend speichert man die Datei ab. Legt man nun einen neuen Artikel an, trägt man in der Datei fmc ein. Dies sollte bewirken, dass ein Menü erscheint, in dem man das Snippet ausführen kann. Macht man das, sollte automatisch folgender Inhalt eingetragen werden.

---
title: 
date: 2021-01-02T13:01:02+0100
categories:
- 
tags:
- 
slug: 
---

Im obigen Code-Beispiel werden dem einen oder anderen sicherlich ${1}, ${2} usw. aufgefallen sein. Dies sind Sprungmarken. Hat man mittels fmc das Snippet eingefügt, kann man mit der Tabulator-Taste diese Stellen der Reihe nach anspringen und somit die betreffenden Bereiche ausführen.

• VS Code friert nach dem Starten ein
• Mehrere Befehle mit einem Shortcut unter VS Code ausführen
• Maskieren von Text in Snippets bei VS Code