Snippets in Visual Studio Code

Code-Snippets sind Vorlagen, die das Einfügen wiederkehrender Code-Muster wie Schleifen oder bedingte Anweisungen erleichtern.

In Visual Studio Code erscheinen Snippets in IntelliSense (⌃Space (Windows, Linux Ctrl+Space)) zusammen mit anderen Vorschlägen, sowie in einer speziellen Snippet-Auswahl (Snippet einfügen in der Befehlspalette). Es gibt auch Unterstützung für Tab-Vervollständigung: Aktivieren Sie diese mit "editor.tabCompletion": "on", geben Sie einen **Snippet-Präfix** (Triggertext) ein und drücken Sie Tab, um ein Snippet einzufügen.

Die Snippet-Syntax folgt der TextMate-Snippet-Syntax mit den Ausnahmen von 'interpoliertem Shell-Code' und der Verwendung von \u; beides wird nicht unterstützt.

Integrierte Snippets

VS Code verfügt über integrierte Snippets für eine Reihe von Sprachen wie JavaScript, TypeScript, Markdown und PHP.

Sie können die verfügbaren Snippets für eine Sprache anzeigen, indem Sie den Befehl Snippet einfügen in der Befehlspalette ausführen, um eine Liste der Snippets für die Sprache der aktuellen Datei zu erhalten. Beachten Sie jedoch, dass diese Liste auch von Ihnen definierte Benutzersnippets und von installierten Erweiterungen bereitgestellte Snippets enthält.

Snippets aus dem Marketplace installieren

Viele Erweiterungen im VS Code Marketplace enthalten Snippets. Sie können nach Erweiterungen suchen, die Snippets enthalten, indem Sie in der Erweiterungsansicht (⇧⌘X (Windows, Linux Ctrl+Shift+X)) den Filter @category:"snippets" verwenden.

Wenn Sie eine Erweiterung finden, die Sie verwenden möchten, installieren Sie sie, starten Sie VS Code neu, und die neuen Snippets sind verfügbar.

Eigene Snippets erstellen

Sie können Ihre eigenen Snippets ganz einfach ohne Erweiterung definieren. Um Ihre eigenen Snippets zu erstellen oder zu bearbeiten, wählen Sie Snippets konfigurieren unter Datei > Einstellungen, und wählen Sie dann die Sprache (nach Sprachkennung) aus, für die die Snippets angezeigt werden sollen, oder die Option Neue globale Snippet-Datei, wenn sie für alle Sprachen angezeigt werden sollen. VS Code verwaltet die Erstellung und Aktualisierung der zugrunde liegenden Snippet-Datei(en) für Sie.

Snippet-Dateien sind in JSON geschrieben, unterstützen C-Style-Kommentare und können eine unbegrenzte Anzahl von Snippets definieren. Snippets unterstützen die meisten TextMate-Syntaxen für dynamisches Verhalten, formatieren Leerzeichen intelligent basierend auf dem Einfügekontext und ermöglichen eine einfache mehrzeilige Bearbeitung.

Unten sehen Sie ein Beispiel für ein for-Schleifen-Snippet für JavaScript

// in file 'Code/User/snippets/javascript.json'
{
  "For Loop": {
    "prefix": ["for", "for-const"],
    "body": ["for (const ${2:element} of ${1:array}) {", "\t$0", "}"],
    "description": "A for loop."
  }
}

Im obigen Beispiel

• "For Loop" ist der Snippet-Name. Er wird über IntelliSense angezeigt, wenn keine description angegeben ist.
• prefix definiert ein oder mehrere Triggerwörter, die das Snippet in IntelliSense anzeigen. Teilzeichenkettenabgleich wird auf Präfixe angewendet, sodass in diesem Fall "fc" mit "for-const" übereinstimmen könnte.
• body besteht aus einer oder mehreren Inhaltszeilen, die beim Einfügen als mehrere Zeilen zusammengefügt werden. Neue Zeilen und eingebettete Tabs werden entsprechend dem Kontext formatiert, in dem das Snippet eingefügt wird.
• description ist eine optionale Beschreibung des Snippets, die von IntelliSense angezeigt wird.

Zusätzlich enthält der body des obigen Beispiels drei Platzhalter (in der Reihenfolge der Navigation aufgeführt): ${1:array}, ${2:element} und $0. Sie können mit Tab schnell zum nächsten Platzhalter springen, wo Sie den Platzhalter bearbeiten oder zum nächsten springen können. Der Text nach dem Doppelpunkt : (falls vorhanden) ist der Standardtext, z. B. element in ${2:element}. Die Reihenfolge der Platzhalter ist aufsteigend nach Zahl, beginnend bei eins; Null ist ein optionaler Sonderfall, der immer zuletzt kommt und den Snippet-Modus mit dem Cursor an der angegebenen Position verlässt.

Dateivorlagen-Snippets

Sie können das Attribut isFileTemplate zur Definition Ihres Snippets hinzufügen, wenn das Snippet dazu dient, den Inhalt einer Datei zu füllen oder zu ersetzen. Dateivorlagen-Snippets werden in einer Dropdown-Liste angezeigt, wenn Sie den Befehl Snippets: Datei aus Snippet füllen in einer neuen oder vorhandenen Datei ausführen.

Snippet-Geltungsbereich

Snippets sind so eingegrenzt, dass nur relevante Snippets vorgeschlagen werden. Snippets können eingegrenzt werden durch entweder

1. die **Sprache(n)**, auf die Snippets beschränkt sind (möglicherweise alle)
2. das **Projekt(e)**, auf das Snippets beschränkt sind (wahrscheinlich alle)

Sprach-Snippet-Geltungsbereich

Jedes Snippet ist auf eine, mehrere oder alle ("globale") Sprachen beschränkt, je nachdem, ob es in

1. einer **Sprachen**-Snippet-Datei
2. einer **globalen** Snippet-Datei

Benutzerspezifische Single-Language-Snippets werden in der Snippet-Datei einer bestimmten Sprache definiert (z. B. javascript.json), auf die Sie über die Sprachkennung über Snippets: Snippets konfigurieren zugreifen können. Ein Snippet ist nur beim Bearbeiten der Sprache zugänglich, für die es definiert ist.

Mehrsprachige und globale Benutzersnippets werden alle in "globalen" Snippet-Dateien (JSON mit der Dateiendung .code-snippets) definiert, auf die ebenfalls über Snippets: Snippets konfigurieren zugegriffen werden kann. In einer globalen Snippet-Datei kann eine Snippet-Definition eine zusätzliche Eigenschaft scope haben, die eine oder mehrere Sprachkennungen aufnimmt, wodurch das Snippet nur für die angegebenen Sprachen verfügbar ist. Wenn keine scope-Eigenschaft angegeben ist, ist das globale Snippet in **allen** Sprachen verfügbar.

Die meisten benutzerspezifischen Snippets sind auf eine einzelne Sprache beschränkt und werden daher in einer sprachspezifischen Snippet-Datei definiert.

Projekt-Snippet-Geltungsbereich

Sie können auch eine globale Snippet-Datei (JSON mit der Dateiendung .code-snippets) haben, die für Ihr Projekt gilt. Projektordner-Snippets werden mit der Option Neue Snippet-Datei für ''... im Dropdown-Menü Snippets: Snippets konfigurieren erstellt und befinden sich im Stammverzeichnis des Projekts in einem .vscode-Ordner. Projekt-Snippet-Dateien sind nützlich, um Snippets mit allen Benutzern zu teilen, die an diesem Projekt arbeiten. Projektordner-Snippets ähneln globalen Snippets und können über die scope-Eigenschaft auf bestimmte Sprachen beschränkt werden.

Snippet-Syntax

Der body eines Snippets kann spezielle Konstrukte verwenden, um Cursors und den einzufügenden Text zu steuern. Die folgenden sind unterstützte Funktionen und ihre Syntaxen

Tabstopps

Mit Tabstopps können Sie den Editor-Cursor innerhalb eines Snippets bewegen. Verwenden Sie $1, $2, um Cursorpositionen anzugeben. Die Zahl ist die Reihenfolge, in der die Tabstopps besucht werden, während $0 die endgültige Cursorposition bezeichnet. Mehrfache Vorkommen desselben Tabstopps sind verknüpft und werden synchron aktualisiert.

Platzhalter

Platzhalter sind Tabstopps mit Werten, wie ${1:foo}. Der Platzhaltertext wird eingefügt und ausgewählt, sodass er leicht geändert werden kann. Platzhalter können verschachtelt sein, wie ${1:another ${2:placeholder}}.

Auswahl

Platzhalter können Auswahlmöglichkeiten als Werte haben. Die Syntax ist eine kommagetrennte Aufzählung von Werten, eingeschlossen mit dem Pipe-Zeichen, z. B. ${1|one,two,three|}. Wenn das Snippet eingefügt und der Platzhalter ausgewählt wird, fordert die Auswahl den Benutzer auf, einen der Werte auszuwählen.

Variablen

Mit $name oder ${name:default} können Sie den Wert einer Variablen einfügen. Wenn eine Variable nicht gesetzt ist, wird ihr **Standardwert** oder ein leerer String eingefügt. Wenn eine Variable unbekannt ist (d. h. ihr Name nicht definiert ist), wird der Name der Variablen eingefügt und zu einem Platzhalter gemacht.

Die folgenden Variablen können verwendet werden

• TM_SELECTED_TEXT Der aktuell ausgewählte Text oder ein leerer String
• TM_CURRENT_LINE Der Inhalt der aktuellen Zeile
• TM_CURRENT_WORD Der Inhalt des Wortes unter dem Cursor oder ein leerer String
• TM_LINE_INDEX Die nullbasierte Zeilennummer
• TM_LINE_NUMBER Die einbasierte Zeilennummer
• TM_FILENAME Der Dateiname des aktuellen Dokuments
• TM_FILENAME_BASE Der Dateiname des aktuellen Dokuments ohne Erweiterungen
• TM_DIRECTORY Das Verzeichnis des aktuellen Dokuments
• TM_FILEPATH Der vollständige Dateipfad des aktuellen Dokuments
• RELATIVE_FILEPATH Der relative (zum geöffneten Arbeitsbereich oder Ordner) Dateipfad des aktuellen Dokuments
• CLIPBOARD Der Inhalt Ihrer Zwischenablage
• WORKSPACE_NAME Der Name des geöffneten Arbeitsbereichs oder Ordners
• WORKSPACE_FOLDER Der Pfad des geöffneten Arbeitsbereichs oder Ordners
• CURSOR_INDEX Die nullbasierte Cursor-Nummer
• CURSOR_NUMBER Die einbasierte Cursor-Nummer

Zum Einfügen des aktuellen Datums und der aktuellen Uhrzeit

• CURRENT_YEAR Das aktuelle Jahr
• CURRENT_YEAR_SHORT Die letzten beiden Ziffern des aktuellen Jahres
• CURRENT_MONTH Der Monat als zweistellige Zahl (z. B. '02')
• CURRENT_MONTH_NAME Der vollständige Monatsname (z. B. 'Juli')
• CURRENT_MONTH_NAME_SHORT Der kurze Monatsname (z. B. 'Jul')
• CURRENT_DATE Der Tag des Monats als zweistellige Zahl (z. B. '08')
• CURRENT_DAY_NAME Der Name des Tages (z. B. 'Montag')
• CURRENT_DAY_NAME_SHORT Der kurze Name des Tages (z. B. 'Mo')
• CURRENT_HOUR Die aktuelle Stunde im 24-Stunden-Format
• CURRENT_MINUTE Die aktuelle Minute als zweistellige Zahl
• CURRENT_SECOND Die aktuelle Sekunde als zweistellige Zahl
• CURRENT_SECONDS_UNIX Die Anzahl der Sekunden seit der Unix-Epoche
• CURRENT_TIMEZONE_OFFSET Der aktuelle UTC-Zeitzonen-Offset als +HH:MM oder -HH:MM (Beispiel -07:00).

Zum Einfügen von Zufallswerten

• RANDOM 6 zufällige Dezimalziffern
• RANDOM_HEX 6 zufällige Hexadezimalziffern
• UUID Eine Version 4 UUID

Zum Einfügen von Zeilen- oder Blockkommentaren, unter Berücksichtigung der aktuellen Sprache

• BLOCK_COMMENT_START Beispielausgabe: in PHP /* oder in HTML <!--
• BLOCK_COMMENT_END Beispielausgabe: in PHP */ oder in HTML -->
• LINE_COMMENT Beispielausgabe: in PHP //

Das folgende Snippet fügt /* Hello World */ in JavaScript-Dateien und <!-- Hello World --> in HTML-Dateien ein

{
  "hello": {
    "scope": "javascript,html",
    "prefix": "hello",
    "body": "$BLOCK_COMMENT_START Hello World $BLOCK_COMMENT_END"
  }
}

Variablentransformationen

Transformationen ermöglichen es Ihnen, den Wert einer Variablen zu ändern, bevor er eingefügt wird. Die Definition einer Transformation besteht aus drei Teilen

1. Ein regulärer Ausdruck, der mit dem Wert einer Variablen oder einem leeren String abgeglichen wird, wenn die Variable nicht aufgelöst werden kann.
2. Ein "Formatstring", der die Referenzierung von Gruppen, die im regulären Ausdruck gefunden wurden, ermöglicht. Der Formatstring ermöglicht bedingte Einfügungen und einfache Modifikationen.
3. Optionen, die an den regulären Ausdruck übergeben werden.

Das folgende Beispiel fügt den Namen der aktuellen Datei ohne deren Endung ein, also von foo.txt wird foo.

${TM_FILENAME/(.*)\\..+$/$1/}
  |           |         |  |
  |           |         |  |-> no options
  |           |         |
  |           |         |-> references the contents of the first
  |           |             capture group
  |           |
  |           |-> regex to capture everything before
  |               the final `.suffix`
  |
  |-> resolves to the filename

Platzhalter-Transformation

Ähnlich wie bei einer Variablen-Transformation ermöglicht eine Transformation eines Platzhalters die Änderung des eingefügten Textes für den Platzhalter beim Wechsel zum nächsten Tabstopp. Der eingefügte Text wird mit dem regulären Ausdruck abgeglichen und der Treffer oder die Treffer – abhängig von den Optionen – werden durch den angegebenen Ersatzformattext ersetzt. Jedes Vorkommen eines Platzhalters kann seine eigene Transformation unabhängig voneinander definieren, indem der Wert des ersten Platzhalters verwendet wird. Das Format für Platzhalter-Transformationen ist dasselbe wie für Variablen-Transformationen.

Transformationsbeispiele

Die Beispiele werden in doppelten Anführungszeichen gezeigt, wie sie in einem Snippet-Body erscheinen würden, um die Notwendigkeit einer doppelten Escapierung bestimmter Zeichen zu veranschaulichen. Beispiel-Transformationen und die resultierende Ausgabe für den Dateinamen example-123.456-TEST.js.

Grammatik

Unten ist die EBNF (Extended Backus-Naur Form) für Snippets. Mit \ (Backslash) können Sie $, } und \ escapen. Innerhalb von Choice-Elementen maskiert der Backslash auch Komma- und Pipe-Zeichen. Nur die Zeichen, die maskiert werden müssen, können maskiert werden, sodass $ nicht innerhalb dieser Konstrukte maskiert werden sollte und weder $ noch } innerhalb von Choice-Konstrukten maskiert werden sollten.

any         ::= tabstop | placeholder | choice | variable | text
tabstop     ::= '$' int
                | '${' int '}'
                | '${' int  transform '}'
placeholder ::= '${' int ':' any '}'
choice      ::= '${' int '|' text (',' text)* '|}'
variable    ::= '$' var | '${' var '}'
                | '${' var ':' any '}'
                | '${' var transform '}'
transform   ::= '/' regex '/' (format | text)+ '/' options
format      ::= '$' int | '${' int '}'
                | '${' int ':' '/upcase' | '/downcase' | '/capitalize' | '/camelcase' | '/pascalcase' '}'
                | '${' int ':+' if '}'
                | '${' int ':?' if ':' else '}'
                | '${' int ':-' else '}' | '${' int ':' else '}'
regex       ::= JavaScript Regular Expression value (ctor-string)
options     ::= JavaScript Regular Expression option (ctor-options)
var         ::= [_a-zA-Z] [_a-zA-Z0-9]*
int         ::= [0-9]+
text        ::= .*
if          ::= text
else        ::= text

TextMate-Snippets verwenden

Sie können auch bestehende TextMate-Snippets (.tmSnippets) mit VS Code verwenden. Sehen Sie sich das Thema TextMate-Snippets verwenden in unserem Abschnitt zur Extension API an, um mehr zu erfahren.

Tastenkombinationen für Snippets zuweisen

Sie können benutzerdefinierte Tastenkombinationen erstellen, um bestimmte Snippets einzufügen. Öffnen Sie keybindings.json (Einstellungen: Tastenkombinationsdatei öffnen), die alle Ihre Tastenkombinationen definiert, und fügen Sie eine Tastenkombination hinzu, die "snippet" als zusätzliches Argument übergibt

{
  "key": "cmd+k 1",
  "command": "editor.action.insertSnippet",
  "when": "editorTextFocus",
  "args": {
    "snippet": "console.log($1)$0"
  }
}

Die Tastenkombination ruft den Befehl Snippet einfügen auf, fordert Sie jedoch nicht zur Auswahl eines Snippets auf, sondern fügt das bereitgestellte Snippet ein. Sie definieren die benutzerdefinierte Tastenkombination wie gewohnt mit einer Tastenkombination, einer Befehls-ID und einem optionalen Kontext für die "when"-Klausel, wann die Tastenkombination aktiviert ist.

Anstatt den Wert des Arguments snippet zum Definieren Ihres Snippets inline zu verwenden, können Sie auch auf ein vorhandenes Snippet verweisen, indem Sie die Argumente langId und name verwenden. Das Argument langId wählt die Sprache aus, für die das durch name bezeichnete Snippet eingefügt wird, z. B. wählt das folgende Beispiel das myFavSnippet aus, das für csharp-Dateien verfügbar ist.

{
  "key": "cmd+k 1",
  "command": "editor.action.insertSnippet",
  "when": "editorTextFocus",
  "args": {
    "langId": "csharp",
    "name": "myFavSnippet"
  }
}

Nächste Schritte

• Kommandozeile - VS Code verfügt über eine umfangreiche Kommandozeilenschnittstelle zum Öffnen oder Vergleichen von Dateien und zum Installieren von Erweiterungen.
• Extension API - Erfahren Sie mehr über andere Möglichkeiten, VS Code zu erweitern.
• Snippet-Leitfaden - Sie können Snippets für die Verwendung in VS Code packen.

Häufig gestellte Fragen

Was, wenn ich bestehende TextMate-Snippets aus einer .tmSnippet-Datei verwenden möchte?

Sie können TextMate-Snippet-Dateien ganz einfach für die Verwendung in VS Code packen. Weitere Informationen finden Sie unter TextMate-Snippets verwenden in unserer Dokumentation zur Extension API.

Wie kann ich eine Variable in das eingefügte Skript einfügen lassen?

Um eine Variable in das eingefügte Skript zu bekommen, müssen Sie das '$' des $variable-Namens escapen, damit es nicht von der Snippet-Erweiterungsphase verarbeitet wird.

"VariableSnippet":{
    "prefix": "_Var",
    "body": "\\$MyVar = 2",
    "description": "A basic snippet that places a variable into script with the $ prefix"
  }

Dies führt zum eingefügten Snippet als

$MyVar = 2

Kann ich Snippets aus IntelliSense entfernen?

Ja, Sie können bestimmte Snippets aus IntelliSense (Vervollständigungsliste) ausblenden, indem Sie auf die Schaltfläche Aus IntelliSense ausblenden rechts neben den Snippet-Elementen im Dropdown-Menü des Befehls Snippet einfügen klicken.

Sie können das Snippet immer noch mit dem Befehl Snippet einfügen auswählen, aber das ausgeblendete Snippet wird nicht in IntelliSense angezeigt.