Fryboyter

Mehrere Befehle mit einem Shortcut unter VS Code ausführen

Wenn ich einen Artikel erstelle, in dem ich ein oder mehrere Code-Beispiele zeige, wandle ich erst einmal diverse Zeichen des Codes in Entitäten um, sodass der Browser nicht versucht den Code auszuführen. Dies hat sonst oft ungewollte Nebenwirkungen. Somit wird das Zeichen < beispielsweise in &lt; umgewandelt. Danach packe ich den Code in einen pre und einen code Tag der für das Hervorheben des Codes zuständig ist. Dies sieht dann beispielsweise wie folgt aus.

<pre class="line-numbers language-bash" style="white-space:pre-wrap;">
<code class="language-bash">#!/bin/bash

if [ $# -eq 0 ]
  then
    echo &quot;Usage: $0 &lt;user_name&gt; &quot;
    exit;
fi

USER=$1

for repo in $(curl -s https://api.github.com/users/&quot;$USER&quot;/repos?per_page=1000 |grep git_url |awk &apos;{print $2}&apos;| sed &apos;s/&quot;\(.*\)&quot;,/\1/&apos;);do
git clone &quot;$repo&quot;;
done;</code>
</pre>

Hierfür nutze ich jeweils einen extra Shortcut der dies automatisiert. Für das Umwandeln der Zeichen wäre es dieser Shortcut.

{
    "key": "shift+f3",
    "command": "extension.htmlEntities"
}

Mittels Shift + F3 wird die Erweiterung html-entities ausgeführt. Und genau das vergesse ich ab und zu.

Nützlich wäre daher ein Shortcut der automatisch beide Aktionen durchführt. Das unterstützt VS Code aber leider aktuell nicht. Da ich derzeit keinen anderen Editor nutzen möchte, habe ich mir die Erweiterung multi-command installiert. Damit ist es möglich mehrere Befehle nacheinander auszuführen. Herausgekommen ist schlussendlich folgender Shortcut.

{
    "key":"shift+f5",
    "command":"extension.multiCommand.execute",
    "args":{
        "sequence":[
            "extension.htmlEntities",
            {
                "command":"editor.action.insertSnippet",
                "args":{
                    "name":"wrap_highlight"
                }
            }
        ]
    }
}

Der Shortcut Shift + F5 ruft die Erweiterung multi-command auf welche als Erstes die Erweiterung html-entities und danach das Snippet wrap_highlight ausführt. Letzteres hebt in meinem Fall den Code entsprechend hervor. Zukünftig werde ich also nicht mehr vergessen, Code-Beispiele vor der Veröffentlichung eines Artikels umzuwandeln.

OSBN | Allgemein

VS Code friert nach dem Starten ein

Wenn ich aktuell unter Arch Linux die OSS-Version des Editor VS Code starten will, startet diese zwar, friert sofort ein, sodass 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 VS Code ;-) ) 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 VS Code wieder normal starten.

Vermutlich handelt es sich hierbei um einen Bug seitens Arch Linux. VS Code 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 VS Code 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 VS Code)

OSBN | Allgemein

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.

OSBN | Allgemein

Maskieren von Text in Snippets bei VS Code

Urlaubszeit ist bei mir Bastelzeit. Daher bin ich gerade dabei mal wieder VS Code zu testen, obwohl ich mir vorab schon sicher bin, dass ich bei Sublime Text bleiben werde. Na ja 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 VS Code 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