Pixelbart

Visual Studio Code: Eigene Snippets erstellen

Hier erfährst du, wie du häufig genutzte Snippets als Visual Studio Code Snippet abspeicherst und dir deine Arbeit mit VS Code erleichterst, weil du nicht immer die selben Blöcke und Codezeilen schreiben musst.

Snippet

Bevor wir mit der eigentlichen Integration beginnen, sollten wir uns überlegen, was wir eigentlich brauchen und wie wir das was wir brauchen, eigentlich tippen.

In unserem Beispiel wollen wir das nachfolgende Snippet als Snippet in Visual Studio Code einfügen:

(function($) {
    "use strict";

    // Hier soll der Cursor automatisch landen!

})(jQuery);Code-Sprache: JavaScript (javascript)

Wichtig ist uns vor allem, dass auch die Abstände und Tabs richtig sind. Außerdem wollen wir, dass der Cursor genau an der genannten Stelle landet, sobald wir das Snippet von Visual Studio Code einfügen lassen.

Hintergrundinformation

In Visual Studio Code wird fast alles mittels JSON konfiguriert, was es uns Entwicklern sehr erleichtert, Visual Studio Code zu erweitern. Auch unser heutiges Snippet wird mit so einer Datei bereitgestellt.

In unserem Beispiel wollen wir function($) tippen, damit obiger Code gezeigt wird. Dafür legen wir also erst einmal die notwendige Codeausschnittsdatei an. Visual Studio Code speichert die Datei immer mit der Dateiendung .code-snippets und diese Dateien findest du für gewöhnlich unter folgendem Pfad (Windows):

  • C:\Users\…\AppData\Roaming\Code\User\snippets

Codeausschnittsdatei erstellen

Zuerst öffnen wir die Benutzerausschnitte, denn dort legen wir unsere Snippets ab. Diese findest du, wenn du zu Datei > Einstellungen > Benutzerausschnitte navigierst.

Visual Studio Code Snippets - Benutzerausschnitte öffnen
Visual Studio Code Snippets – Benutzerausschnitte öffnen

Hier klickst du dann auf Neue globale Codeausschnittsdatei… um eine neue Datei anzulegen. Du findest hier auch alle deine anderen Snippets, die direkt in Visual Studio Code hinterlegt sind.

Visual Studio Code Snippets - Neue globale Codeausschnittsdatei
Visual Studio Code Snippets – Neue globale Codeausschnittsdatei

Anschließend vergeben wir einen Namen für unsere Datei. Die Endung muss dafür nicht angegeben werden. In unserem Beispiel nennen wir die Datei jquery wrapper, da wir einen jQuery Wrapper hinterlegen wollen.

Codeausschnittsdatei befüllen

Jetzt, wo wir unsere Codeausschnittsdatei haben, befüllen wir sie. Die ursprüngliche Datei sollte in etwas so aussehen:

{
	// Place your global snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
	// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 
	// is left empty or omitted, the snippet gets applied to all languages. The prefix is what is 
	// used to trigger the snippet and the body will be expanded and inserted. Possible variables are: 
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. 
	// Placeholders with the same ids are connected.
	// Example:
	// "Print to console": {
	// 	"scope": "javascript,typescript",
	// 	"prefix": "log",
	// 	"body": [
	// 		"console.log('$1');",
	// 		"$2"
	// 	],
	// 	"description": "Log output to console"
	// }
}Code-Sprache: JSON / JSON mit Kommentaren (json)

Den Inhalt entfernen wir jetzt, sodass nur noch das leere JSON-Objekt zu sehen ist:

{
	
}Code-Sprache: JSON / JSON mit Kommentaren (json)

Jetzt erweitern wir das leere Objekt, in dem wir unser erstes Snippet hinterlegen. Die Erklärung zum Snippet, findest du direkt da drunter:

{
	"jQuery Wrapper": {
		"scope": "javascript",
		"prefix": ["function($)"],
		"body": ["(function($) {\n\t\"use strict\";\n\n\t$1\n\n})(jQuery);" ],
		"description" : "Generiert einen jQuery-Wrapper für JavaScript."
	}
}Code-Sprache: JSON / JSON mit Kommentaren (json)

Du kannst das Objekt jetzt endlos mit eigenen Snippets erweitern. Du musst die neuen Objekte lediglich mit einem Namen versehen. In unserem Beispiel haben wir unser Objekt jQuery Wrapper genannt. Hier wissen wir immer, dass wir einen jQuery Wrapper erstellen. Die restlichen Nodes kurz erklärt:

  • Scope: Hier legen wir feste, für welche Sprache unser Snippet gelten soll. Da wird ein jQuery-Snippet einfügen wollen, nehmen wir hier JavaScript sprich.
  • Prefix: Hier geben wir an, was wir tippen müssen, um von Visual Studio den gewünschten Vorschlag zu erhalten. In unserem Beispiel wollen wir den Vorschlag sehen, sobald wir (function($)), (function($) {}) oder function($) tippen. Die ersten beiden Vorschläge sind mehr auf Grund unserer Gewohnheit, wobei die letzte Schreibweise von uns zu bevorzugen ist (eine Priorisierung gibt es nicht).
  • Body: Hier landet unser Snippet. Wichtig ist, dass wir mittels \n einen Zeilenumbruch und mit \t ein Tab erzielen. Außerdem findest du hier auch eine Visual Studio Code Variable, nämlich $1. Mit dieser Variable teilen wir VS Code mit, dass wir an dieser Stelle mit dem Cursor landen wollen.
  • Description: Hier beschreiben wir unser Objekt. Das kannst du benennen wie du möchtest. Wichtig ist nur, dass du am Ende weißt, was hier eigentlich gemacht wird. Außerdem wird die Beschreibung vor dem Einfügen der Vorlage kurz gezeigt, damit du auch immer weißt, was hier eigentlich passiert.

Jetzt drücken wir nur noch Speichern (STRG+S) und das Snippet ist sofort einsatzbereit. Du kannst das Snippet auch in offenen Fenstern/Tabs verwenden, ohne Visual Studio Code neu zu starten – sehr praktisch!

Visual Studio Code Snippets - Ergebnis
Visual Studio Code Snippets – Ergebnis

Weitere Befehle und Funktionen, findest du in der offiziellen Anleitung von Visual Studio Code. Du kannst mir gerne auf Facebook schreiben, welche Snippets du angelegt hast. Das würde mich wirklich interessieren.

Weiterführende Links:

In

,