Online-Code-zu-Snippet-Konvertertool, unterstützt JavaScript / TypeScript / React / JSX / TSX      

Bitte geben Sie einen Snippet-Namen ein (name)
Bitte geben Sie ein Snippet-Präfix ein (prefix)
Bitte geben Sie eine Snippet-Beschreibung ein (description)
Bitte geben Sie den Codetext ein (code body)
Generierungstyp
Generiertes Snippet-Ergebnis

VSCode So verwenden Sie Codeausschnitte


Snippets in Visual Studio Code
VS Code-Snippets sind eine leistungsstarke Möglichkeit, Ihre Programmierproduktivität zu steigern, indem sie das Einfügen häufig verwendeter Codeblöcke automatisieren. Dabei kann es sich um einfache Texterweiterungen oder komplexere Vorlagen mit Platzhaltern und Variablen handeln. So können Sie sie nutzen:

Snippets erstellen:

Auf Snippet-Einstellungen zugreifen: Gehen Sie zu Datei > Einstellungen > Benutzer-Snippets (Code > Einstellungen > Benutzer-Snippets unter macOS). Alternativ können Sie die Befehlspalette (Strg+Umschalt+P oder Cmd+Umschalt+P) verwenden und „Einstellungen: Benutzer-Snippets konfigurieren“ eingeben.

Sprache auswählen: Sie werden aufgefordert, eine Sprache für Ihr Snippet auszuwählen (z. B. javascript.json, python.json usw.). Dadurch wird sichergestellt, dass das Snippet nur für diese bestimmte Sprache verfügbar ist. Sie können auch eine Datei „Globale Snippets“ erstellen, wenn das Snippet in allen Sprachen zugänglich sein soll.

Snippet definieren: Snippets werden im JSON-Format definiert. Jeder Snippet hat einen Namen, ein Präfix (die Tastenkombination, die Sie eingeben, um den Snippet auszulösen), einen Text (den einzufügenden Code) und eine optionale Beschreibung.

Beispiel (JavaScript):
{
  "For Loop": {
    "prefix": "forl",
    "body": [
      "for (let i = 0; i < $1; i++) {",
      "  $0",
      "}"
    ],
    "description": "For loop with index"
  }
}
In diesem Beispiel:

„For-Schleife“: Der Name des Snippets (zu Ihrer Information).

„forl“: Das Präfix. Wenn Sie „forl“ eingeben und die Tabulatortaste drücken, wird das Snippet eingefügt.

„Body“: Der einzufügende Code. $1, $2 usw. sind Tabstopps (Platzhalter). $0 ist die letzte Cursorposition.

„Beschreibung“: Eine optionale Beschreibung, die in den IntelliSense-Vorschlägen angezeigt wird.

Snippets verwenden:

Präfix eingeben: Beginnen Sie in einer Datei des richtigen Sprachtyps mit der Eingabe des von Ihnen definierten Präfixes (z. B. forl).

Snippet auswählen: IntelliSense von VS Code schlägt das Snippet vor. Wählen Sie es mit den Pfeiltasten oder durch Klicken aus.

Tabstopps verwenden: Drücken Sie die Tabulatortaste, um zwischen den Tabstopps ($1, $2 usw.) zu navigieren und die Werte einzugeben.

Variablen:

Snippets können auch Variablen wie $TM_FILENAME, $CURRENT_YEAR usw. verwenden. Eine vollständige Liste finden Sie in der VS Code-Dokumentation.

Beispiel mit Variablen (Python):
{
  "New Python File": {
    "prefix": "newpy",
    "body": [
      "#!/usr/bin/env python3",
      "# -*- coding: utf-8 -*-",
      "",
      "# ${TM_FILENAME}",
      "# Created by: ${USER} on ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE}"
    ]
  }
}
Durch die Beherrschung von Snippets können Sie die wiederholte Tipparbeit erheblich reduzieren und die Konsistenz Ihres Codes sicherstellen. Experimentieren Sie mit der Erstellung eigener Snippets für häufig verwendete Codemuster und beobachten Sie, wie Ihre Codierungseffizienz in die Höhe schnellt.