Snippets

Einleitung

Sogenannte Code-Schnipsel, dienen dazu, sich häufig wiederholende Code-Zeilen zu automatisieren. Dazu werden Vorlagen erstellt, die man jederzeit abrufen kann. Eigene Code-Snippets sparen Zeit, indem sie häufig verwendete Code-Blöcke auf ein kurzes Kürzel legen.

So erstellst du dein erstes Snippet

Snippet-Menü öffnen
➤ Gehe in Visual Studio Code auf Zahnrad > Code-Auschnitte.

➤ Oder nutze die Tastenkombination Ctrl+Shift+P und tippe “Snippets”.
Programmiersprache bzw. Typ auswählen
➤ Wähle die Programmiersprache bzw. den Typ aus, für die das Snippet gelten soll (z. B. markdown oder javascript). Alternativ kannst du eine “Global Snippets” Datei für alle Sprachen erstellen.
Snippet definieren bzw. erstellen
➤ Es öffnet sich eine .json Datei. ➤ Der body ist ein Array aus Zeichenketten. Jede Zeile deines Codes wird in Anführungszeichen gesetzt und durch ein Komma getrennt.
1. Tabs und Einrückungen
  Innerhalb der Anführungszeichen kannst du echte Tabs oder Leerzeichen verwenden. Empfehlung: Nutze \t für einen Tabulator. VS Code wandelt das beim Einfügen automatisch in deine bevorzugte Einrückung (z.B. 2 oder 4 Leerzeichen) um.
2. Tab-Sprünge (Placeholders)
  Das ist das Herzstück. Du definierst, wo der Cursor landen soll, wenn du nach dem Einfügen die Tab-Taste drückst. Simple Sprünge: ${1}, ${2}, ${3}… Der Cursor startet bei 1. Drückst du Tab, springt er zu 2. Platzhalter mit Standardtext: ${1:Standardwert}. Hier markiert VS Code beim Reinspringen den Text „Standardwert“, sodass du ihn sofort überschreiben kannst. Der Endpunkt: $0 markiert immer die letzte Position, an der der Cursor landet, wenn alle anderen Tab-Sprünge durchlaufen sind.
➤ Hier ein konkretes Beispiel:
```
  "Astro Komponente": {
    "prefix": "ast-comp",
    "body": [
      "---",
      "// Bereich 1: Imports",
      "import ${1:ComponentName} from './${1:ComponentName}.astro';",
      "---",
      "",
      "<div class=\"wrapper\">",
      "\t<${1:ComponentName} ",
      "\t\tcolor=\"${2:blue}\" ",
      "\t\ttitle=\"${3:Titel hier}\"",
      "\t/>",
      "\t$0",
      "</div>"
    ],
    "description": "Erstellt ein Grundgerüst für eine Astro-Komponente"
  }
```
Snippet benutzen
Ist man in dem entsprechenden Dateityp, tippt man den im Snippet angegebenen Prefix. Daraufhin erscheint das Snippet als Auswahl, die man mit dem Drücken von Enter bestätigt.

Hilfreiche Video-Anleitungen

Eigene Code Snippets in Visual Studio Code anlegen

Schneller Coden in Visual Studio Code mit User Snippets - komplette Einführung und Vorlagen!