VS-Code-Snippets: Das leistungsstärkste Tool zur Steigerung Ihrer Codierungsproduktivität

Schreiben Sie mehr Code mit weniger Tastenanschlägen

Jeder möchte in der Lage sein, mehr Code mit weniger Tastenanschlägen zu produzieren. Pfeilfunktionen in JavaScript sind in letzter Zeit unglaublich beliebt geworden - und Sie sparen nur 6 Zeichen!

(function(){console.log('a')})() // 32 charachters(()=>{console.log('a')})() // 26 charachters

Es gibt jedoch eine bessere Möglichkeit, die Eingabe zu speichern - und dieser Artikel zeigt Ihnen das entsprechende Tool.

Code Ausschnitte

Seit Jahren verwenden Menschen Codefragmente, um Zeit zu sparen - ob es sich um allgemeine Funktionen, Dateistrukturen oder sogar Vorlagen für ganze Systeme handelt. Dies ist keine neue Idee.

Das Problem bei vielen vorhandenen Systemen besteht darin, dass diese Snippets häufig in Textdateien oder anderen Dateisystemen gespeichert wurden und manuell kopiert und eingefügt werden mussten, wo immer sie benötigt wurden.

Dies war großartig für große Codeausschnitte. Einzeiler waren jedoch oft schneller zu tippen als nach der Datei zu suchen, sie zu kopieren und einzufügen.

Der nächste Schritt waren Tools wie TextExpander oder AutoHotKeys, mit denen spezielle Tastenfolgen eingerichtet werden konnten, um Codefragmente überall dort einzufügen, wo Sie tippen. Diese sind großartig und können Ihnen viel Zeit sparen… aber wir können noch einen Schritt weiter gehen.

VS-Code-Schnipsel

VS Code verfügt über ein System, das leistungsfähiger ist als TextExpander oder AutoHotKeys. Die eingebauten Codefragmente können so konfiguriert werden, dass sie viel mehr als nur den Code einfügen.

Bevor wir über die ausgefallenen Funktionen sprechen, lernen wir, wie Sie ein Snippet erstellen.

Drücken Sie im VS-Code Strg + Umschalt + P, um die Befehlspalette zu öffnen und nach einem Snippet zu suchen. Wenn Sie "Benutzer-Snippets konfigurieren" auswählen, wird eine Liste der Codierungssprachen angezeigt, für die Sie ein Snippet erstellen können. Wir werden mit JavaScript gehen.

Dies öffnet den Snippet-Editor. Es gibt einen Kommentar, der Ihnen zeigt, wie Sie ein einfaches Snippet erstellen, aber wir werden unser eigenes erstellen.

Dieser Ausschnitt ist einer meiner Lieblingscodezeilen. Es ist ein schönes Muster für die Handhabung von Versprechen.

const handle = prom => prom.then(res => [null, res]).catch(err => [err, null]);

Um unser Snippet zu erstellen, müssen wir einen neuen Schlüssel im Objekt erstellen. Dieser Schlüssel zeigt auf ein Objekt mit einem prefix, bodyund description.

"insert handle function": { "prefix": "", "body": [], "description": ""}

Das Präfix ist der Text, den wir eingeben möchten, um dieses Snippet auszulösen. Sie müssen sicherstellen, dass dies eindeutig ist. Wenn Sie handlees aufrufen, wird das Snippet jedes Mal ausgelöst, wenn Sie die Funktion aufrufen, damit wir mit so etwas fortfahren können promHandle.

Der Body ist ein Array der Zeilen im Snippet. Wenn Sie mehrere Codezeilen haben, enthält das Body-Array mehrere Zeichenfolgen. Die Beschreibung wird angezeigt, wenn Sie den Vorschlag im VS-Code sehen.

Wenn all dies abgeschlossen ist, erhalten Sie ungefähr Folgendes:

"insert handlefunction": { "prefix": "promHandle", "body": [ "const handle = prom => prom.then(res => [null, res]).catch(err => [err, null]);" ], "description": "inserting a 'handle' function"}

Wenn Ihre Snippet-Datei gespeichert ist und Sie mit der Eingabe beginnen, erhalten promhandleSie einen neuen Vorschlag. Wenn Sie darauf eingeben, werden die Beschreibung des Snippets sowie die erste Zeile des Codes angezeigt.

Jetzt können Sie sich Hunderte von Zeichen sparen, indem Sie Ihre eigenen Schnipsel erstellen. Aber es gibt noch einige mächtigere Funktionen!

Registerkarte Punkte einfügen

Wenn Sie Ihre Snippets einfügen, müssen Sie normalerweise einige Informationen hinzufügen. Unabhängig davon, ob Sie eine Funktion benennen oder die Variablen auswählen, können Sie in Ihrem Code Punkte festlegen, an denen Sie Daten eingeben müssen. Wenn Sie diese Snippets hinter sich lassen, können Sie zwischen diesen Einfügepunkten wechseln.

Um einen Einfügepunkt hinzuzufügen, müssen Sie nur $1den ersten Punkt, $2den zweiten usw. hinzufügen . Dies ist sehr nützlich für Funktionen, bei denen sie ein Objekt erwarten.

"sendMessage": { "prefix": "sendMessage", "body": [ "await botHelper.sendToUser({message$1, userID});" ], "description": "await sending a message using bot helper"},

Sie können mehrere Registerkartenpunkte im gesamten Code verteilen, sodass Sie Ihr Snippet schnell und einfach füllen können, ohne auf jeden Punkt klicken oder die Pfeiltaste drücken zu müssen.

Sprachspezifische Schnipsel

Als wir den Snippet-Editor zum ersten Mal öffneten, wurde uns eine Liste mit Sprachen angezeigt. Wir haben JavaScript gewählt, aber Sie hätten auch eine der anderen 44 Sprachen wählen können. Das Tolle an VS-Code-Snippets ist, dass sie an einen bestimmten Dateityp gebunden werden können.

Wenn Sie eine HTML-Datei schreiben, erhalten Sie nicht alle Ihre JavaScript- oder Python-Snippets. Dies bedeutet auch, dass Sie mit demselben Präfix je nach Dateityp, in dem Sie gerade arbeiten, unterschiedliche Snippets erstellen können! Aber keine Sorge, Sie können immer noch globale Snippets hinzufügen, wenn Sie sie in einem beliebigen Dateityp verwenden möchten.

Standortspezifische Snippets

Ähnlich wie bei sprachspezifischen Snippets können Sie auch ordnerspezifische Snippets erstellen. Dies kann großartig sein, wenn dieselbe benannte Funktion in zwei verschiedenen Projekten unterschiedliche Aufgaben ausführt.

New Snippet file for '...'Wählen Sie einfach bei der Auswahl Ihrer Sprache.

Weitere Snippets erstellen

Jetzt kennen Sie die leistungsstarken Möglichkeiten, mit denen VS-Code-Snippets Ihre Produktivität verbessern können. Wahrscheinlich möchten Sie Lasten erstellen. Leider kann es frustrierend sein, sie zu erstellen. Zum Glück gibt es zwei Lösungen:

Snippet-Generator

Snippet Generator ist eine Site, auf der Sie Code einfügen und einfach in das Snippet-Format konvertieren können.

Es ist sehr einfach zu bedienen und ermöglicht es Ihnen, schnell Snippets zu erstellen, die Sie einfach kopieren und direkt in Ihre Snippet-Dateien einfügen können. Es funktioniert mit jeder Sprache und ist völlig kostenlos.

Snippet-Erweiterungen

Wenn Sie ein Framework wie React oder Angular verwenden, gibt es viele Snippets, die Sie erstellen möchten. Glücklicherweise ist dies ein Problem, das andere Leute zuvor hatten, so dass sie Bibliotheken mit allgemeinen Snippets für jedes Framework erstellt haben.

Searching for snippets in the VS Code extension marketplace produces hundreds of results that you can install. Everything from React, Angular and Vue to ES6 JS, C# and PHP. These often have a full range of snippets to dramatically cut down you time spent typing.

The one disadvantage of these extensions is that you’ll have to learn what the prefixes (triggers) are, but you’ll quickly memorise the ones you use most.

Thanks for reading this post on increasing your coding productivity with VS Code Snippets. If you’ve learnt something then hit that clap ?button, and follow me for more tips, tricks and tutorials!