Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

Visual Studio Code Grundkurs

API-Schnittstellen

Testen Sie unsere 2013 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Hier bauen Sie Ihre erste eigene Extension – ein Nachbau der bereits vom Trainer erstellten Erweiterung.

Transkript

In diesem Video bauen wir unsere erste eigene Extension und zwar bauen wir exakt die Extension leichtgewichtig nach, die ich bereits entwickelt habe und die heißt json2ts. Dabei werden wir nicht die Geschäftslogik neu schreiben, die habe ich bereits schön ausgelagert auf der npm.repository, und so werden wir genauer einfach nur kennenlernen, wie wir aus Architektursicht gut herangehen und wie wir auf die API-en grob zugreifen und auf die ganzen Aktivierungsevents reagieren. Wir schauen uns Erstmal kurz an, was hinter json2ts steckt. Ich habe die Extension bereits installiert, json2ts. Die werde ich dann gleich mal wieder löschen und damit man das Ganze schön testen kann, gibt es einen jsonplaceholder-Page. Und zwar ist es ein "Fake Online REST API". Und ist einer meiner Lieblingsseiten, weil hier kann ich dann ganz einfach sagen, ich möchte so was wie /posts. Gehe ich hier "Link in neuem Tab öffnen" und schon haben wir hier eine REST Schnittstelle, wo wir sehen, dass wir einfach irgendwelche Fantasie-Blogposts bekommen. Und ich kopiere jetzt einfach noch mal diese URL. Und wenn ich jetzt am Ende von meinem Code Editor zum Beispiel gehe und gebe die Tastenkombination "Strg+Alt+X" ein, wird der Webservice im Hintergrund aufgerufen und hier ist dann auch schon das beschriebene TypeScript Interface anhand von den JSON-Ergebnis, was zurückkommt. Da muss ich natürlich nur sagen, es handelt sich hierbei um Post Element und so kann man wirklich schön typsicher später, wenn man dann irgendwo mit JSON und Webservices arbeitet, kann man hier wirklich wunderbar typsicher arbeiten mit dem Post-Element. Deswegen ich lösche jetzt Erstmal die Erweiterung, weil wir möchten ja, dass die eigene aktiv wird, das besser testen zu können. Es wird zwar beim Debuggen automatisch jede deaktiviert, aber sicherheitshalber deaktiviere ich es jetzt einfach und wie bauen wir jetzt diese Funktionalität ein. Das erste ist, dass wir Erstmal zum Extension TypeScript-Datei wechseln und ich persönlich entferne jetzt Erstmal alle Kommentare. Auch den Inhalt, ich entferne alles, was in "activate" ist, das brauchen wir jetzt alles Erstmal gar nicht. Und an erster Stelle sehen wir wunderbar, dass hier unsere API als Modul geladen wird und zwar hier mit der neuen Syntax schon, wie man das unter Export Script 6 macht. Das heißt, man macht "import* as" zusätzlich dazu, das ist die neue Schreibweise. Und das erste, was wir benötigen, sind Erstmal ein paar Pakete. Und zwar möchten wir darauf reagieren, wenn natürlich irgendwo eine Tastenkombination eingegeben wird. Zum Beispiel eben "Strg+Alt+V" oder so und da können wir natürlich innerhalb von Visual Studio Code darauf zugreifen, aber wir brauchen dann aus dem Zwischenspeicher die Daten. Und dazu gibt es extra eine Clipboard CopyPaste Modul, das heißt, wir installieren hier Erstmal ein paar Module. Und dazu gehe ich in die Package.json und installiere mir diese Module. Scripts, devDependencies, in dem Fall existiert noch kein Dependencies Eintrag, deswegen gebe ich das doch mal direkt in der Konsole ein. Benutze jetzt mal kurz nicht meine Erweiterung und zwar gibt es extra unter "npm install" "copy-Paste" und "save". Jetzt laden wir uns sozusagen ein Modul runter, womit wir auf die Zwischenablage zugreifen können. Anschließend installieren wir json2ts, das ist sozusagen meine Geschäftslogik, die ich eben auf npm ausgelagert habe, womit automatisch vom JSON-Code ein gültiger TypeScript-Code konvertiert wird. Das war auch schon alles, genau das wäre der erste Schritt gewesen, dann wechseln wir wieder in die Extension.ts, wir brauchen jetzt dazu auch noch keinen Test. Und importieren jetzt einfach mal genau das, was wir hinzugefügt haben, in dem Fall wäre das hier einmal "Import * as copyPaste from copyPaste" und hier macht er das mit einfachem Anführungszeichen. Als nächstes brauchen wir dann auch noch json2ts. In dem Fall ist es ja auch kein TypeScript Wert, deswegen schreiben wir zum Beispiel einfach jetzt nur "let copyPaste" und zwar mit "require". Das haben wir ja natürlich ganz vergessen, dass das hier kein TypeScript ist, dann müssen wir selbstverständlich diesen Standardweg wieder wählen, dann natürlich dasselbe mit "json2 typescript" ist gleich "require json2ts. Okay, das heißt, wir greifen auf die beiden Module zu und jetzt möchten wir hier etwas registrieren und zwar greifen wir auf die vscode API zu, auf die Commands und auf "registerommand", das heißt, wir möchten jetzt unsere Funktion registrieren und die nennen wir jetzt zum Beispiel "convert json2ts", geben eine anonyme Funktion mit rein. Und hier soll exakt das passieren, wenn man dann die Tastenkombination eingegeben hat, das heißt, wir registrieren diesen Command, aber ab wann der Commad aktiv wird, das entscheiden wir in der Package JSON. Hier greifen wir auf unsere "copyPaste" Erweiterung zu und fragen explizit die Zwischenablage ab mittels "Paste". Das Ganze passiert hier asynchron, das heißt, wir kriegen eine Callback-Funktion zurück, wo der erste Parameter ein Fehler einspricht, wenn was da ist und dann den eigentlichen Content, den Inhalt. Und wir müssen natürlich Erstmal überprüfen, "is json2ts is json". Das heißt, json2t hat extra nochmal eine Funktion, womit wir überprüfen können, ob es sich hierbei auch wirklich um einen JSON-Wert handelt, was wir in der Zwischenablage haben und wenn es ein JSON-Wert ist, dann können wir es auch konvertieren in eine TypeScript-Datei. Und da können wir jetzt Erstmal zum Beispiel in der Statusbar die Info mitgeben, dass wir das Ganze jetzt gerade konvertieren, greifen hier auf vscode zu, aufs Fenster, Window und da gibt es dann extra die Funktion "setStatusBarMessage". Und die Nachricht lautet natürlich "Convert JSON to TypeScript Interfaces". Und dann müssen wir natürlich die tatsächliche Logik aufrufen, das bedeutet, "json2ts convert" und zwar unseren "content". Und jetzt wird automatisch aus dem JSON-Content-String, ein TypeScript String Ergebnis zurückgegeben. Das ist eben also die Geschäftslogik, die wir schön außerhalb von unserer Extension handhaben und ich habe sie sogar als npm-Paket ausgelagert. Der Vorteil ist, es gibt auch noch HTML-Editoren wie Adobe Brackets, das auch komplett auf HTML5 und JavaScript aufbaut. Da habe ich exakt die selbe Extension dann auch programmieren können, ohne viel Aufwand. Jetzt müssen wir natürlich das Ganze dann auf den Editor bekommen und zwar wo da an dieser Position, wo es sich gerade der Cursor befindet. Das wird jetzt extrem spannend, weil wir da einige Dinge berücksichtigen müssen, Erstmal auf die API greifen wir mittels "vscode" zu, dann wieder auf das "window Name space" und dann gibt es hier an erster Stelle schon "activeTextEditor", also wir wollen auf den aktiven Text Editor zugreifen und dann gibt es hier eben explizit die Edit Funktion. Und da geben wir ein Callback mit ein und dieser Callback gibt uns dann einfach Parameter mit "editBuilder", womit wir dann direkt Zugriff haben. Wir müssen es natürlich hier alles asynchron machen, weil unsere Extension ja immer in einem separaten Prozess läuft, damit Visual Studio Code nicht durch irgendeine Erweiterung gebremst wird, das ist also ganz wichtig, dass man das versteht. Jetzt müssen wir uns die Startzeile merken, "startline". Von wo wollen wir denn anfangen zu schreiben? Und da greifen wir wieder auf den aktiven Text-Editor, "selection.start.line" Also wir machen das Ganze hier einfach nur in einzelne Variablen, dann wird der Code lesbarer. Dann "lastCharIndex", also wir ermitteln jetzt sozusagen, wo der Cursor sich gerade befindet. "Vscode" "window.activeTextEditor.document. lineAt". Also man sieht, es ist ja auch alles irgendwo mit dazu beschrieben worden. Textlänge. Und so bin ich auch natürlich auf die richtigen Funktionen gekommen um das Ganze zu erfüllen. Deswegen soll man sich jetzt auf keinen Fall abschrecken lassen von den langen Namen. Jetzt wollen wir hier ein neues Position-Objekt erzeugen. Und das braucht jetzt hier eben eine Startline und lastIndexChar und somit haben wir jetzt hier die aktuelle Cursorposition ermittelt. Und dann können wir dem EditBuilder mitteilen, "insert(Position)". Und zwar unser Result-Ergebnis. Also wir wollen da wo der Cursor sich gerade befindet, unseren TypeScript Code einfügen. Und das war´s auch schon. Am Ende können wir natürlich schönerweise dann noch mal "vscode.window setStatusBarMessage (Here are your TypeScript Interface... Enjoy)" Genau, so können wir dann unten noch mal eine Meldung ausgeben lassen. Und das war auch schon alles, damit unser Code aus der Zwischenablage hinzugefügt wird. Wie jetzt zum Beispiel der REST Webservice aufgerufen wird etc. was ich jetzt aller erstens demonstriert habe, das werden wir jetzt nicht implementieren. Es soll ja eben hier nur mal kurz zeigen, wie wir auf die API zugegriffen haben und genau. Das nächste ist, dass wir natürlich zwar hier diese registerCommand-Funktion aufrufen, sind aber eigentlich noch nicht wirklich registriert, weil wir kriegen hier nämlich nur ein Wert zurück. Und ich nenne es jetzt einfach mal "clipboard Json2ts". Da bekommen wir sozusagen ein Command zurückgereicht und den müssen wir jetzt sozusagen eben einmal dann am Ende registrieren. Kürze das Ganze etwas und zwar am Ende der Activate-Funktion greifen wir auf den Kontext zu von dieser zweiten Instanz "context. subscriptions. push" und dann geben wir unser Clipboard json2ts mit. Und so registrieren wir unsere Extension tatsächlich auf diese zweite Instanz. Und somit findet dann Visual Studio Code in der Extension-Instanz ja unsere Extension und damit jetzt auch dieser Command, den wir registriert haben ausgeführt wird, zum Beispiel eben auf bestimmte Tastenkombinationen, das müssen wir jetzt in der Package.json regeln. Dazu wechsle ich doch einmal zur package.json und zu dem Bereich "activationEvents". Hier haben wir schon "onCommand: extensiom.sayHello". Jetzt heißt es nicht mehr "Extension.sayHello", sondern wir haben das Ganze ja umbenannt in "convert.json2ts". Kopiere das mal in die Zwischenablage und füge das hier ein. Okay, ein Activation Event haben wir hinterlegt und nun müssen wir noch auf die Tastenkombinationen reagieren können. Und zwar kann man jetzt entscheiden, dass natürlich zusätzlich wenn ich hier zum Beispiel "Hello World" oben eintippe, dass das Ganze aufgerufen werden kann, oder dass wir eben mit einer Tastenkombination das machen. Ich füge jetzt einfach mal nur die Funktion mit den Tastenfunktionen zusätzlich hinzu. Und das funktioniert mit sogenannten Keybindings, ich kann hier übrigens auch mit "Strg+Leer" mir ein T-License geben lassen für die package.json. Mit ja auch für so eine Extension Library, wie wir das hier für Visual Studio Code machen. Also wir wollen Keybindings hinterlegen. Das wird mittels RI gemacht, auch wenn wir wirklich nur ein Eintrag hinterlegen möchten. Und zwar wollen wir hier einen Command und der heißt hierbei "Strg+V", "convert to TypeScript" und wir wollen auf folgende Tastenkombinationen reagieren und zwar "Strg + Alt +V". Wenn ich "Strg+Alt+V" betätige, dann will ich, dass dieser Command aktiviert wird. Dann wird erst der Code tatsächlich ausgeführt. Das war auch schon alles, dass unsere Extension fertiggeschrieben wurde. Wir geben mit, wann soll Sie aktiv werden, hier zum Beispiel bei einer Tastenkombination, oder direkt per CommandLine. Hier registrieren wir sozusagen unser Command. Und die hauptsächliche Logik findet hier intern statt und wir greifen hier immer auf die API mittels "vscode" zu und die eigentliche Geschäftslogik habe ich schön ausgelagert, können natürlich auch eigene Klassen sein, die hier intern sind und das war eigentlich alles. Wir müssen das natürlich auch Erstmal testen, ob das richtig ist. Mit "Strg+Shift+B" können wir bilden. Das ist jetzt nicht so ganz wichtig, bei mir läuft noch der TypeScript Compiler noch im Hintergrund. Also gar kein Problem. Und wenn ich jetzt noch mal F5 drücke, wurden nur die Tests gestartet, das heißt, ich wechsle hier auf "Launch Extension" starte, mache mal Visual Studio Code. Und ja jetzt brauchen wir zum Beispiel wieder unser JSON-Ergebnis von jsonplaceholder. Ich möchte jetzt eben mit "Strg+A", "Strg+C" kopiere ich mir jetzt also das alles in die Zwischenablage, als Beweis öffne ich hier meinen Notepad, "Strg+V". Füge also mit "Strg+V" alles ein, also es ist alles JSON-Code. Auch wenn ich hier "Strg+V" drücke, kriegen wir den JSON-Code und wenn ich jetzt "Strg+Alt+V" drücke, bekommen wir in einer extremen Geschwindigkeit unser fertiges TypeScript-Objekt und zwar anhand von dieser JSON-Syntax. Wir haben in diesem Video unsere erste eigene Extension geschrieben, wir haben gesehen, wie man einen Command registriert und wie man ein Event hinterlegt, wann ein Command auch aktiv werden soll und wir haben mit dem "vscode" API gearbeitet.

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!