Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

Visual Studio Code Grundkurs

Eigene Code-Snippets schreiben

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Visual Studio Code bringt eine Menge Code-Snippets mit, doch natürlich können Sie schnell und bequem das Programm durch selbstgeschriebene Snippets erweitern.

Transkript

Visual Studio Code selbst bietet einige Codes-Snippets, um die Entwicklung nochmal ordentlich zu beschleunigen. Und zwar, wenn ich jetzt hier zum Beispiel "function" schreibe, sehen wir schon hier beim IntelliSense so ein viereckiges Symbol, das steht eben dann dafür, dass es sich hierbei um ein Code-Snippet handelt. Wenn ich das direkt auswähle, sehen wir auch, dass mein Cursor direkt hier, bei der erzeugten Funktion steht und wir können jetzt hier "say hello" das Ganze bezeichnen. Drücke ich nochmal die Tab-Taste, bin ich auch schon direkt bei den Parametern, dann kann ich hier "Name" eingeben und drücke ich noch einmal die Tab-Taste, bin ich auch schon innerhalb von der Funktion und hier kann ich ganz schnell eine Funktion schreiben, die einen Namen ausgibt und genau solche Code-Snippets kann man natürlich auch selber schreiben, was oft sehr sinnvoll ist. Als Beispiel wäre gerade unter JavaScript, was sehr wichtig ist, ist hier zum Beispiel Observer bepattern von dem Reactive Extension für JavaScript zum Beispiel spannend oder vom ECMAScript Standard Promise, um hier asynchrone Dinge ausführen zu können. Und wir sehen schon, was hier eigentlich für einen Code notwendig ist, um einen Promise zu implementieren oder ein Observer. Also dieser ganze Codeblock ist jedes Mal nötig, wenn ich das machen möchte, und es könnte man hiermit ein Promise-Snippet natürlich viel schneller bewerkstelligen und jetzt wird natürlich noch nichts vorgeschlagen. Das heißt, wir müssten das selber implementieren, dieses Snippet und dazu geht man hier, unter "File" "Preferences" "User Snippets". Für welche Sprachen möchten wir das Ganze machen? Wir machen das Ganze direkt in, machen wir das mal in TypeScript, das heißt, das automatisch in TypeScript angezeigt wird, und hier wird auch schon etwa vorgeschlagen, wie man das Ganze implementieren soll, was natürlich schon mal enorm viel abnimmt. Das heißt, wir können selber hier mit Steuerung+C und Steuerung+V das Ganze einbinden. Und was jetzt im Wesentlichen natürlich dann später erzeugt werden muss, ist ja das, was jetzt hier im Body steht. und jedes Mal, was als erstes selektiert wird und mit Tab-Taste als nächstes selektiert wird, wird durch etwa sogenannte Dollarzeichen und der Nummerierung gekennzeichnet. Das erste ist, was wollen wir für ein Präfix, wann soll das Ganze aufgerufen werden mit Promise und dann muss ich natürlich nochmal zu dem Codebereich rüber, kopieren wir das, mit Steuerung+Tab wir sind wieder zurück und dann können wir hier eben Zeile für Zeile das Ganze hier einbinden, und nachdem wir hier dann die ganzen Zeilen eingebunden haben, wir möchte natürlich die Leerzeichen auch mit dabei haben, die Tab-Zeichen sozusagen. Können wir auch schon, wir haben nur noch ein paar Zeilen, dann das Ganze nutzen und dann müssen wir uns Gedanken machen, wo soll natürlich dann als erstes der Cursor gesetzt werden, wenn ich dann auf Tab drücke, was soll als nächstes bestätigt werden. Das ist in dem Beispiel auch wieder sehr einfach, so, dann kommen wir zum letzten Punkt, und zwar kann man das auch, wenn man es jetzt so schön eingerückt lässt, hier wunderbar selber nochmal sehen, etwas ungewohnt, dass das wir jede Zeile einzeln einbinden müssen. An erster Stelle wollen wir hier erstmal, dass der Variablenname von so einem Promise angegeben wird, das heißt, wir haben hier $1 und anschließend hätten wir eine doAsync-Funktion. Das heißt, das ist die Funktion, die wirklich hauptsächlich asynchron ausgeführt wird, kommt deren Callback können wir hier direkt vom Promise, wieder Funktion aufrufen. Belassen wir es doch erstmal hier mit $1 nur hier bei der Variable, das reicht jetzt erstmal vollkommen aus für dieses Beispiel, dann können wir natürlich hier nochmal die Beschreibungen hinzugeben, "async promise function" und dann geben wir noch eine kleine Beschreibung mit, "create a promise function". Gut und und schon haben wir uns eigenes Code-Snippet implementiert, dann muss das Ganze recht gespeichert werden, Steuerung+S, ist jedoch, dass jetzt dieses Snippet automatisch im Roaming Profile abgelegt wird, das heißt, es steht uns eben für viele weitere Projekte jederzeit immer wieder zur Verfügung. Und dann testen wir das Ganze einmal, indem wir hier direkt wieder in unsere TypeScript-Datei reingehen, und jetzt möchte ich eben automatisch, wenn ich hier "promise" schreibe, dann sehen wir hier eben auch schon unser viereckiges Symbol, "promise" "Create a promise function", hier, können wir nochmal auf "Info" klicken, es wird natürlich nicht noch mehr angezeigt, aber klicken wir einmal drauf, und wir sehen, wie der ganze Code eingefügt wurde, jetzt kann ich natürlich hier sagen "My promise function", das nur als Beispiel, das war es dann auch schon, und jetzt wird natürlich die Promise-Klasse nicht erkannt, ich bin jetzt hier auch außerhalb von der Klasse, es ist ja nur ein Beispiel und zur Demonstration, wie eben so ein Code-Snippet selbst implementiert wird. Also möchte man dann zum Beispiel dieses Snippet dann auch eben wieder verwenden, innerhalb von einem Team, zum Beispiel auch dann das Ganze mit weitergeben, dann empfiehlt sich natürlich dann direkt hier, aus dem Roaming Profiles diese JSON-Datei eben direkt aus dem Pfad hier zu gruppieren und bei jedem einzufügen, das funktioniert wunderbar. Ich habe das Ganze jetzt so aufgebaut, weil es für mich besser zu lesen ist, was natürlich ebenfalls funktioniert und was man sonst sogar machen sollte, wäre, dass man hier Escape-Sequenzen verwendet mit Slash-Type und dann würde der natürlich auch automatisch die Tab-Zeichen einfügen. Bei mir hat das aber allerdings bisher so Gur geklappt, wie ich das Ganze jetzt hier auch aufgebaut habe, weil es in der Praxis gab es hierbei nie Probleme, und das war es auch schon. Wir haben in diesem Video gesehen, wie man Code-Snippets nutzt, wie man selber ein Code-Snippet schreibt und wie man Code-Snippets auch innerhalb vom Team bereitstellen kann und was es so zu beachten gibt.

Visual Studio Code Grundkurs

Lernen Sie alles Wichtige kennen, um mit dem kostenlosen Quelltexteditor von Microsoft in die Entwicklung von Webprojekten einsteigen zu können

2 Std. 21 min (28 Videos)
Derzeit sind keine Feedbacks vorhanden...
 
Hersteller:
Software:
Exklusiv für Abo-Kunden
Erscheinungsdatum:23.03.2017

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!