Meister VS Code Snippets für effizientes Codieren

Beim Schreiben des neuesten Codes in Visual Studio Code (VS Code), erwischen Sie sich jemals dabei, immer wieder das Gleiche zu tippen? Vielleicht haben Sie heute zehnmal eine Funktionsdeklaration getippt oder zum 20. Mal denselben Parametersatz auf Befehl definiert. Wussten Sie, dass Sie Ihre Zeit und geistige Gesundheit mit Visual Studio Code Snippets zurückgewinnen können?

Visual Studio Code Snippets sind kleine Textstücke, die in VS Code gespeichert sind. Sie können diese Snippets über ein Menü oder eine Tastenfolge aufrufen und eine Menge Zeit sparen, wenn Sie feststellen, dass Sie Textblöcke mit wenigen Unterschieden zwischen jedem Vorkommen wiederholen.

Zum Beispiel können Sie unten sehen, dass Sie durch einfaches Tippen von wvb in VS Code die Möglichkeit haben, deutlich mehr Text zu erweitern, wie durch den Text Write-Verbose im Kästchen angezeigt. Das ist die Kraft der Snippets!

In diesem Artikel werden Sie lernen, wie Sie mit VS Code Snippets arbeiten, einschließlich der Verwendung von Standard-Snippets, Erweiterungs-Snippets und sogar der Erstellung Ihrer eigenen!

Voraussetzungen

Dies wird ein praktischer Artikel zum Mitmachen. Wenn Sie planen, mitzumachen und zu lernen, wie man mit VS Code Snippets arbeitet, benötigen Sie die VS Code Version 1.17 oder höher. Zur vollständigen Offenlegung: Ich werde VS Code 1.38.1 auf Windows verwenden.

Sie können die neueste Version von VS Code für Ihre spezielle Plattform hier herunterladen.

Finden von VS Code Snippets

Bevor Sie Ihre eigenen Codeausschnitte erstellen können (was Sie tun werden), ist es wichtig, zu lernen, wie Sie die integrierten Codeausschnitte finden können.

Sie können alle Codeausschnitte im Menüinterface finden. Das Menüinterface ermöglicht es Ihnen, Codeausschnitte zu überprüfen und zu verwenden. Um auf das Menü zuzugreifen, können Sie entweder F1 oder Strg-Umschalt-P drücken, „Codeausschnitt“ eingeben und Enter drücken. Sie sehen ein Menü ähnlich dem unten gezeigten.

Wenn Sie Enter auf Codeausschnitt einfügen drücken, sehen Sie eine Dropdown-Liste mit verfügbaren Codeausschnitten, wie unten gezeigt. Sie können sehen, dass standardmäßig ziemlich viele Codeausschnitte verfügbar sind und weitere durch Scrollen anzeigen lassen.

Die Dropdown-Liste der verfügbaren Codeausschnitte ermöglicht es Ihnen, die integrierten Codeausschnitte zu überprüfen, die durch das Hinzufügen einer Sprachenerweiterung in VS Code verfügbar sind.

Sprachenerweiterungen

Sie können VS Code verwenden, um mit vielen verschiedenen Sprachen zu arbeiten. Jede Sprache hat ihre eigenen Feinheiten. Um diese Unterschiede zu unterstützen, bietet VS Code Sprachenerweiterungen an.

Sprachenerweiterungen bieten VS Code intelligente Bearbeitungsfunktionen für verschiedene Programmiersprachen. Sprachenerweiterungen geben Programmiersprachen zusätzliche Unterstützung, wie zum Beispiel:

• Syntaxhervorhebung
• IntelliSense
• Formatierung
• Fehlerprüfung
• Vervollständigung von Codeausschnitten

Erweiterungen werden über das VS Code Erweiterungsmenü installiert.

Sie können die Definition dieser Codeausschnitte über die Spracherweiterungen überprüfen, indem Sie die JSON-Datei unter Windows öffnen, die sich unter C:\Users\.vscode\extensions\ms-code.-\snippets befindet.

Erweiterungen haben an sich nichts mit Codeausschnitten zu tun, aber Sie werden feststellen, dass viele Erweiterungen mit integrierten Codeausschnitten geliefert werden, über die Sie Bescheid wissen sollten.

Ausklappen von Codeausschnitten

Wenn Sie einen Codeausschnitt über die Menüoberfläche auswählen, sehen Sie den Inhalt des Codeausschnitts in der Datei. Dieser Vorgang, bei dem die Codeausschnittsdefinitionen in nützlichen Code umgewandelt werden, wird als Ausklappen bezeichnet.

Wenn Sie den Präfix aufrufen, liest VS Code diesen spezifischen Präfix und führt die in dem Codeausschnitt definierten Anweisungen aus. Diese Anweisungen können von Ausschnitt zu Ausschnitt variieren. Dieser gesamte Vorgang des Aufrufens, Umwandelns und Einfügens des Codeausschnitts wird als Ausklappen bezeichnet.

Verwendung von Codeausschnitten in VS Code-Erweiterungen

Einige Codeausschnitte sind standardmäßig in VS Code enthalten, aber wenn Sie eine Erweiterung installieren, werden manchmal eigene Codeausschnitte mitgeliefert. Beispiele für Erweiterungen mit enthaltenen Codeausschnitten sind die Python-Erweiterung von Microsoft, die PowerShell-Erweiterung von Microsoft und die C#-Erweiterung von Microsoft.

Speicherort von Codeausschnitten in Erweiterungen

Diese Erweiterungen werden normalerweise unter dem Verzeichnis C:\Users<Benutzername>.vscode\extensions in Windows installiert, wie Sie unten sehen können.

Die Ordner für die Erweiterungen folgen der Benennungskonvention ms-vscode.-. Jeder dieser Ordner enthält einen Ordner snippet, der die Snippets enthält, die mit der Erweiterung geliefert werden.

Beispiel für eine Erweiterungscode-Snippet

Um die Verwendung eines Erweiterungs-Snippets zu demonstrieren, nehmen wir die PowerShell-Erweiterung als Beispiel. Diese Erweiterung wird mit einigen nützlichen Snippets namens region und for geliefert, um das Erstellen von PowerShell-region-Blöcken und *for*-Schleifen zu beschleunigen.

Sagen wir, Sie müssen eine for-Schleife in einem PowerShell-Skript erstellen, die in einem Region-Block eingeschlossen ist. Der Code dazu wird unten angezeigt. Der Code im untenstehenden Screenshot ist 50 Zeichen lang und erstellt eine for-Schleife in einem Region-Block, die über die Zahlen 1 bis 10 iteriert.

Anstatt jedes einzelne Zeichen in diesem Beispiel einzugeben, können Sie zwei Snippets verwenden, die mit der PowerShell-Erweiterung von Microsoft namens region und for installiert sind.

Schauen Sie sich unten an, wie einfach es ist, jedes dieser Snippets zu verwenden, um eine Menge Tipparbeit zu sparen!

Erstellung von benutzerdefinierten Code-Snippets in Visual Studio Code

Sie müssen sich nicht auf die Snippets beschränken, die standardmäßig in VS Code oder in Erweiterungen enthalten sind. Möglicherweise enthalten die vorhandenen Erweiterungen nicht den gewünschten Code oder Sie möchten die Snippets selbst formatieren. Glücklicherweise können Sie Ihre eigenen Snippets erstellen! In diesem Abschnitt erfahren Sie, wie das geht.

Um ein benutzerdefiniertes Snippet zu erstellen, öffnen Sie Ihre benutzerspezifischen Snippets in VS Code, indem Sie auf Datei → Einstellungen → Benutzersnippets klicken. Dadurch wird der Bereich zur Auswahl der Snippet-Sprache geöffnet. Hier können Sie eine Sprache angeben, in der Sie das Snippet erstellen möchten. Ein Beispiel dafür sehen Sie im folgenden Bildschirmfoto.

Wenn Sie eine Sprache auswählen, erstellt VS Code eine language.json-Datei in C:\Benutzer<Benutzername>\AppData\Roaming\Code\User\snippets unter Windows. Alle benutzerdefinierten Snippets für verschiedene Sprachen haben eine Datei in diesem Verzeichnis.

Die Ihnen verfügbaren Sprachen können von dem oben gezeigten Beispiel abweichen. In der oben gezeigten VS Code-Installation wurden bereits viele Sprach-Erweiterungen installiert.

Suchen Sie die Sprache, für die Sie das Snippet erstellen möchten, und drücken Sie die Eingabetaste, um die Sprach-JSON-Datei zu öffnen. In dieser Datei werden Ihre benutzerdefinierten Snippets gespeichert, und hier können Sie Ihre benutzerdefinierten Snippets erstellen.

Für ein benutzerdefiniertes Snippet müssen vier Datenpunkte angegeben werden:

1. A snippet name (line 9 below)
2. A prefix, which is what you’ll use to call your snippet (line 8 below)
3. A body, which is your snippet code that is loaded into your scripts (lines 7 to 3 below)
4. A description, which will show up in your IntelliSense (line 2 below)

Erstellen eines benutzerdefinierten Python-Snippets

Schauen wir uns an, was es braucht, um einen benutzerdefinierten Ausschnitt für die Programmiersprache Python zu erstellen. In diesem Beispiel wird das Präfix dt einen benutzerdefinierten Python-Ausschnitt aufrufen. Dieser Ausschnitt gibt eine Nachricht mit der aktuellen Uhrzeit vor.

Erstellen Sie die JSON-Datei

Öffnen Sie zunächst den Ausschnitt-Sprachauswähler, geben Sie Python ein und drücken Sie Enter, um eine python.json-Datei zu erstellen. Dadurch wird eine python.json-Datei im Ordner C:\Users<Benutzername>\AppData\Roaming\Code\User\snippets auf Windows geöffnet.

Im Bild unten sehen Sie den Standardzustand der Datei.

Zuweisen eines Namens und Präfixes

Jetzt ist es an der Zeit, die JSON-Datei zu bearbeiten. Definieren Sie zunächst den Namen und das Präfix (dt). Ausschnitt-Präfixe sind kurz und klar, da dies der Wert ist, der eingegeben wird, um den Ausschnitt aufzurufen. Je kürzer das Ausschnitt-Präfix ist, desto weniger Zeichen müssen eingegeben werden, um es aufzurufen.

Im Bild unten sehen Sie ein Beispiel dafür, wie dies aussieht.

Definieren des Inhalts

Der Inhalt enthält den Code, der erweitert wird, wenn der Ausschnitt aufgerufen wird. Dieser Code kann einfacher Text und Kommentare sein. Er kann auch andere Funktionen enthalten, die Sie in späteren Abschnitten sehen werden. Wenn der Inhalt mehrere Zeilen hat, gibt es einige Fallstricke, auf die Sie achten müssen.

• Jede Zeile muss in doppelten Anführungszeichen stehen
• Jede Zeile muss mit einem Komma enden
• Alle Zeilen müssen in eckigen Klammern stehen („[“ und „]“)

Im Beispiel unten sehen Sie, wie der Beispielinhaltsausschnitt aussieht.

Definition der Beschreibung

Die Beschreibung ist eine Nachricht, die den Präfix wie unten beschrieben definiert.

Die Beschreibung wird unter dem Präfix in der Snippet-Liste angezeigt und bietet weitere Informationen darüber, was das Snippet tut. Sie hilft auch dabei, das Snippet von ähnlichen erstellten Snippets zu unterscheiden.

Unten sehen Sie ein Beispiel-Screenshot von Snippets, die Präfixe und Beschreibungen identifizieren.

Wenn Sie noch keine benutzerdefinierten Python-Snippets definiert haben, sollten Sie nach dem Erstellen des Snippets eine python.json-Datei haben, die wie der folgende Code-Snippet aussieht.

{
    "DateTime Snippet": {
        "prefix": "dt",
        "body": [
            "import datetime",
            "dt = datetime.datetime.now()",
            "print(f\"The time is {dt} and this is a message\")"
        ],
        "description": "Prints a message with current time"
    }
}

Speichern Sie diese JSON-Datei und nun steht das benutzerdefinierte Snippet in jeder Python-Datei in VS Code zur Verfügung.

Wenn Sie jetzt einen Python-Tab öffnen und den Präfix dt eingeben, wird das benutzerdefinierte Snippet angezeigt. Durch Drücken von Eingabe wird das Snippet im Python-Tab erweitert.

Erstellen eines benutzerdefinierten JavaScript-Snippets mit eingeschlossenem Text.

Snippets sind nicht auf die Wörter beschränkt, die Sie im Snippet-Body definieren. Snippets können auch Text aus der Datei enthalten, aus der sie aufgerufen werden.

VS Code hat interne Variablen, die Sie verwenden können. Dies sind Platzhalter, die den aktuell markierten Text nehmen und in das Snippet einfügen. Zum Beispiel können Sie durch Hinzufügen der Variable $TM_SELECTED_TEXT zum Snippet den ausgewählten Text anzeigen. Schauen Sie sich die Seite VS Code Variables Reference für eine vollständige Auflistung aller internen VS Code Variablen an.

Um dies zu demonstrieren, erstellen wir einen Codeausschnitt, der einfach eine Zeile erstellt, um den ausgewählten Text in der Konsole auszugeben, genannt log-it.

Öffnen Sie den Codeausschnitt-Sprachauswähler, geben Sie JavaScript ein und drücken Sie Enter, um eine Datei namens javascript.json zu erstellen. Diese Datei wird ähnlich aussehen wie die zuvor erstellte python.json Datei. Dieses Mal enthält sie jedoch Beispiel-Javascript-Code anstelle von Python-Code. Den Standardzustand können Sie im folgenden Screenshot sehen.

Erstellen Sie nun einen Codeausschnitt mit folgendem JSON:

{
	"Print selected line to console": {
		"prefix": "log-it",
		"body": [
			"console.log('$TM_SELECTED_TEXT');"
		],
		"description": "Log highlighted text output to console"
	}
}

Speichern Sie diese JSON-Datei und Sie können diesen Codeausschnitt nun in Ihren JavaScript-Dateien verwenden.

Wenn Sie diesen Codeausschnitt mit markiertem Text aufrufen, wird $TM_SELECTED_TEXT durch den markierten Text ersetzt. Wenn Sie diesen Codeausschnitt ohne markierten Text aufrufen, bleibt $TM_SELECTED_TEXT leer. Dies können Sie im folgenden Screenshot sehen.

Erstellen eines benutzerdefinierten PowerShell-Codeausschnitts mit Tabstopps

Bisher waren die gezeigten Beispiele vollständig, wenn sie aufgerufen wurden. Selbst der JavaScript-Code geht davon aus, dass zuvor Text markiert wurde. Aber was ist mit den Fällen, in denen Sie Werte in den Codeausschnitt eingeben müssen, nachdem er aufgerufen wurde?

Was ist, wenn Sie den Wert in das console.log() eingeben möchten, anstatt den markierten Text zu verwenden? Was ist, wenn Sie an verschiedenen Stellen im Codeausschnitt etwas eingeben möchten?

In diesem Abschnitt erfahren Sie, wie Sie Tabstopps verwenden, um Text in den erzeugten Code einzugeben, zu dem der Codeausschnitt erweitert wird. Tabstopps sind festgelegte Positionen in Ihrem Codeausschnitt, zu denen der Cursor springt. Diese Positionen werden jedes Mal in der Reihenfolge besucht, wenn Sie Tab drücken. Mit diesen Tabstopps können Sie Werte in den Codeausschnitt eingeben, nachdem er erweitert wurde.

Tabstopps werden durch die Verwendung der Codeausschnittvariablen $0, $1, $2 usw. im Codeausschnitt definiert und geben an, wohin der Cursor springen soll, wenn Sie den Codeausschnitt aufrufen und Tab drücken.

Die Tabstopps folgen der normalen Reihenfolge (1 folgt auf 2 folgt auf 3 usw.) mit einer Ausnahme: Tabstopp 0 ist der Ort, an dem der Cursor nach allen anderen Tabstopps platziert wird. Um dies zu demonstrieren, wird der nachstehende Codeausschnitt zu einer Write-Output-Nachricht mit dem aktuellen Datum und einem Platz für weiteren Text erweitert.

Dieses body mit zwei Tabstopps

• $1 am Ende der Write-Output-Nachricht
• $0 in der nächsten Zeile, damit der Codeausschnitt mit einer leeren Zeile endet

{
    "DateTime Snippet PS": {
        "prefix": "dtPS",
        "body" : [
            "Write-Output -Message "The time is $((Get-Date).ToLocalTime()) and $1"","$0"
        ]
        "description": "PSCustomObject with 3 lines"
    }
}

Speichern Sie diesen Codeausschnitt und rufen Sie ihn auf, indem Sie den Präfix dtPS in einer PowerShell-Datei eingeben.

Wenn der Codeausschnitt erweitert wird, springt der Cursor zur Position von Tabstopp 1. Fügen Sie von hier aus den gewünschten Wert oder Code hinzu und drücken Sie Tab, um den Cursor zum nächsten Tabstopp zu springen. Dies wird fortgesetzt, bis Sie alle angegebenen Tabstopps durchlaufen haben.

Sie können dies im folgenden Screenshot in Aktion sehen.

Hinzufügen von Standardwerten zu Tabstopps

Tabstopps sind zwar großartig für den Anfang, aber was ist, wenn Sie bestimmte Werte in diesen Positionen benötigen, aber die Möglichkeit haben möchten, sie bei Bedarf zu ändern? Jetzt ist es an der Zeit, Standardwerte einzuschließen.

Das obige Beispiel hatte einen Tabstopp, aber wenn der Schnipsel erweitert wurde, befand sich kein Text an seiner Stelle. Der Cursor sprang zur Tabstopp-Position und dann musste der Benutzer übernehmen.

Wenn es nur eine Möglichkeit gäbe, dass ein Wert dort sein könnte, wo der Tabstopp ist – auf diese Weise könnte der Schnipsel erweitert werden und dieser Wert würde damit erweitert werden. Wenn der Tabstopp an dieser Stelle ankommt, kann der Standardwert überschrieben oder übersprungen werden.

Schauen wir uns an, wie man Standardwerte zu benutzerdefinierten Schnipseln hinzufügt. Sie tun dies, indem Sie die oben genannte PowerShell-Schnipsel-JSON-Datei bearbeiten.

Zum Starten öffnen Sie den Schnipsel-Sprachauswähler, wählen Sie PowerShell aus und ändern Sie die Tabstopps von $1 auf ${1:Dies ist meine Standardnachricht}. Der Wert nach dem Doppelpunkt wird zum Standardwert. Dieser Wert wird mit dem Schnipsel erweitert.

Wenn dieser Tabstopp erreicht wird, können zwei Dinge passieren. Der Standardwert kann überschrieben werden oder er kann übersprungen und sein Standardwert beibehalten werden.

Unten sehen Sie die Änderung im Body.

{
	"DateTime Snippet PS" {
		"prefix": "dtPS",
		"body" : [
			"Write-Output -Message \"The time is $((Get-Date).ToLocalTime()) and $1{1:this is my default message}\"",
			"$0"
		],
		"description": "PSCustomObject with 3 lines"
	}
}

Nachdem Sie aktualisiert und gespeichert haben, werden diese Standardwerte erweitert und erscheinen auch im IntelliSense-Fenster, wenn sie aufgerufen werden, wie im folgenden Screenshot gezeigt.

Standardnachrichten sind gute Beispiele dafür, was Sie mit Tabstopps tun können. Tabstopps geben Ihnen auch die Möglichkeit, eine Auswahl zu treffen. Im nächsten Abschnitt sehen Sie ein Beispiel dafür, wie Sie Ihrer Tabstopps Auswahlmöglichkeiten hinzufügen können.

Auswahlmöglichkeiten zu Tabstopps hinzufügen

Tabstopps sind nicht darauf beschränkt, einen Standardwert oder überhaupt keinen Wert zu haben. Sie können in der VS Code-Schnipseldefinition definiert werden, um dem Benutzer auch Optionen anzubieten, wenn der Schnipsel erweitert wird.

Vielleicht haben Sie eine Situation, in der Sie in einem Schnipsel einen anderen Wert oder Befehl auswählen möchten. Anstatt drei verschiedene Schnipsel mit unterschiedlichen Auswahlmöglichkeiten zu erstellen, können Sie den Schnipsel bearbeiten, um eine Auswahl mit einem Tabstopp anzuzeigen, wie im folgenden Screenshot gezeigt.

Tabstopps stellen eine Auswahl dar, wenn die folgende Syntax im Schnipselkörper verwendet wird:

${N|Choice1,Choice2,Choice3[,Choice]|}

Der oben gezeigte Tabstopp wurde modifiziert, um die Wahlmöglichkeit von:

• Write-Output
• Write-Warning
• Write-Error

Dies wurde erreicht, indem zwei Pipe-Zeichen ( | ) nach dem Tabstopp platziert wurden. Die Auswahlmöglichkeiten werden innerhalb der Pipe-Zeichen durch Kommas getrennt. Dies können Sie im folgenden Codeblock sehen.

${1|
    Write-Output -Message \"The time is $((Get-Date).ToLocalTime()) and this is my default message\", // <-- Wahl 1 
    Write-Warning -Message \"The time is $((Get-Date).ToLocalTime()) and this is my default message\", // <-- Wahl 2
    Write-Error -Message \"The time is $((Get-Date).ToLocalTime()) and this is my default message\" // <-- Wahl 3
|}

Unten sehen Sie das Beispiel-Schnipsel.

{
    "DateTime Snippet PS" {
        "prefix": "dtPS",
        "body" : [
            "Write-Output -Message \"The time is $((Get-Date).ToLocalTime()) and this is my default message\", Write-Warning -Message \"The time is $(Get-Date).ToLocalTime()) and this is my default message\", Write-Error -Message \"The time is $(Get-Date).ToLocalTime()) and this is my default message\"|}",
            "$0"
        ],
        "description": "PSCustomObject with 3 lines"
    }
}

Wenn der benutzerdefinierte Schnipsel jetzt erweitert wird, wird die Auswahlmöglichkeit, welche Option gewählt werden soll, in einem IntelliSense-Fenster angezeigt, wie im folgenden Screenshot zu sehen.

Von hier aus können Sie die gewünschte Option auswählen und sehen, wie sie sich in diese Option ausbreitet. In unserem Beispiel-Screenshot unten wird die gesamte Codezeile durch die Möglichkeit ersetzt, zwischen drei verschiedenen „Write“-Befehlen zu wählen, und es wird gezeigt, dass jeder einzelne ohne Probleme aufgerufen und ausgeführt werden kann.

Zusammenfassung

Benutzerdefinierte Schnipsel können aus einfachem Text oder Code bestehen. Sie können Platzhalter enthalten, damit Sie Nachrichten, Standardwerte oder Auswahlmöglichkeiten einbeziehen können, sowie hervorgehobenen Text.

Es muss keine mühsame Aufgabe sein, jeden einzelnen Zeichenblock des Codes einzutippen. Mit Schnipseln müssen Sie sich nicht jedes Mal die genaue Syntax für eine Schleife (for), eine Schleife durch alle Elemente (foreach) oder eine switch-Anweisung merken. Schnipsel sind die perfekte Lösung für diese Nische.

I’ve shown Python, JavaScript, and PowerShell snippets in this post. VS Code snippets are available for many, many more languages. Your limits are only what you use and what you can think of!

Weiterführende Informationen

• Einführung in PowerShell-Funktionen