Fryboyter

VSCode friert nach dem Starten ein

Wenn ich aktuell unter Arch Linux die OSS-Version des Editor VSCode starten will, startet diese zwar, friert sofort ein so dass man das Programm nur noch gewaltsam beenden kann. Die Lösung ist aber erfreulicherweise ziemlich einfach.

Öffnet man die Datei /usr/bin/code-oss mit einem Editor (vorzugsweise nicht VSCode ;-) ) sollte der Inhalt wie folgt aussehen.

ELECTRON_RUN_AS_NODE=1 exec electron11 /usr/lib/code/out/cli.js /usr/lib/code/code.js "$@"

Alles was man machen muss ist electron11 auf electron zu ändern. Danach sollte VSCode wieder normal starten.

Vermutlich handelt es sich hierbei um einen Bug seitens Arch Linux. VSCode benötigt als Abhängigkeit das Paket electron (aktuell Version 12). Mit diesem wird die Datei /usr/bin/electron installiert. Im Paket code wurde allerdings letzten Monat /usr/bin/electron auf /usr/bin/electron11 geändert (https://github.com/archlinux/svntogit-community/commit/412cf018280fd9b9f612eb84075354b9fe555af8). Vermutlich weil VSCode zu der Zeit noch von Version 11 von electron abhängig war. Und nach dem Update auf Version 12 wurde vermutlich vergessen es entsprechend anzupassen. Aber das ist nur eine Vermutung. Eventuell betrifft das Problem auch andere Distributionen (und ggf. auch die normale Version von VSCode)

OSBN | Allgemein

VSCode - 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, so dass man mit einem Befehl wie hugo new vscode-snippet-fuer-front-matter-anlegen.md einen neuen Artikel anlegen kann.

Ich bevorzuge es allerdings alles mit dem Editor zu machen. Aktuell nutze ich VSCode. 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 Kategorieren, 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.

OSBN | Allgemein

Maskieren von Text in Snippets bei VSCode

Urlaubszeit ist bei mir Bastelzeit. Daher bin ich gerade dabei mal wieder VSCode zu testen, obwohl ich mir vorab schon sicher bin, dass ich bei Sublime Text bleiben werde. Naja egal, darum geht es gerade nicht.

Damit ich relativ bequem Artikel veröffentlichen kann, habe ich mir unter Sublime Text diverse Snippets angelegt. Bei einem geht es darum, dass ich Text markiere und per Shortcut der HTML-Code hinzugefügt wird mit dem ich Text als Code hervorhebe. Somit wird zum Beispiel aus “10 PRINT “hallo welt” folgendes.

<pre class="line-numbers language-bash" style="white-space:pre-wrap;">
<code class="language-bash">10 PRINT "hallo welt"</code>
</pre>

Unter VSCode habe ich mir folgendes Snippet angelegt.

"wrap_highlight": {
		"prefix": "wrap_highlight",
		"body": [
			"<pre class="line-numbers language-bash" style="white-space:pre-wrap;">",
			"<code class="language-bash">$TM_SELECTED_TEXT</code>",
			"</pre>"
		],
		"description": "Highlight Code"
	},

Sieht eigentlich ganz gut aus, macht aber nicht was es soll. Denn als Ausgabe erhält man folgendes.

<pre class=
 style=
<code class=
>10 PRINT "hallo welt"</code>
</pre>

Die Lösung ist in dem Fall allerdings recht einfach. Die Ursache ist die fehlende Maskierung (auch escapen genannt) der Anführungszeichen innerhalb des Bereichs “body”.

"wrap_highlight": {
		"prefix": "wrap_highlight",
		"body": [
			"<pre class=\"line-numbers language-bash\" style=\"white-space:pre-wrap;\">",
			"<code class=\"language-bash\">$TM_SELECTED_TEXT</code>",
			"</pre>"
		],
		"description": "Highlight Code"
	},

Ändert man das Snippet wie oben angegeben macht es auch das was es soll.

OSBN | General