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

Überblick über die Architektur einer Extension

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Hier werfen Sie einen Blick auf das Extension-Projekt und lernen die Architektur eines solchen Projekts kennen.

Transkript

In diesem Video sehen wir uns das erzeugte Extension-Projekt an, und das habe ich bereits in Visual Studio Code geöffnet. Wir beschäftigen uns etwas mit der Struktur und was davonaus mitgeliefert wird und in dem Fall eben wieder die gesamte Architektur abläuft. Der erste tolle Orientierungspunkt ist hier die Markdown-File "Visual Studio Code Extension Quickstart", und zwar wenn man da einmal drauf klickt und die Tastenkombination Strg+Shift+V betätigt, dann sieht man hier schon einmal eine kleine Einführung an, wo auch noch mal einiges geschrieben wurde. Nur so als Tipp. Aber wir beschäftigen uns ja auch noch mal, im Detail damit als erste ist natürlich das Visual Studio Code selbst einiges an Node Module besitzt, also Erweiterungen, um hiermit arbeiten zu können. Die spannendste Erweiterung davon dürfte nämlich hier sein, das "vscode"-Modul. Das ist sozusagen die Library also die API direkt dann zur IDE, also zur Entwicklungsumgebung von Visual Studio Code, weil jede Extension wird von Visual Studio Code mit Absicht in einen separaten Prozess gehostet. Damit ist sichergestellt, dass Erweiterungen Visual Studio Code nicht ausbremsen, sodass Visual Studio Code immer mit seiner eigenen Performance arbeiten kann. Das Schöne ist, hier sehen wir dann sogar eine "VS Code Declaration TypeScript"-File und damit können wir dann innerhalb von der Extension eben mit TypeScript-Typ sicher auf die API zugreifen von Visual Studio Code. Der Rest ist hier erst mal auch nicht so relevant. Das Nächste, was wirklich spannend ist, ist das Source-Verzeichnis. Das heißt, da wird dann die Logik von unserer Extension entwickelt, und wie wir hier schon sehen, ich habe hier auch das Projekt mit TypeScript ausgewählt, ist dann auch schon mal der erste Beispielcode vorhanden. Jetzt habe ich zu Beginn ja gesagt, dass jede Extension in einem separaten Prozess läuft, und zu Beginn wenn Visual Studio Code geöffnet wird, wird auch nicht jede Extension automatisch sofort aktiv, sondern es gibt dann ganz spezielle Parameter, die man dann mitgeben muss an Visual Studio Code, ab wann es relevant ist, dass unsere Extension reagiert und aufgerufen wird. Die wir dann noch mal etwas später sehen, also da gibt es dann einfach sowas wie, wenn eine spezielle Datei mit einer speziellen Dateiendung geöffnet wird oder wenn eine Datei geschlossen wird. Also wir können auch auf den Zustand regieren, wir können auf Editorfunktionen zugreifen, wir können auch überhaupt hier auf eine Statusbar zugreifen, die wir ganz unten sehen vom Workspace, wenn da irgendwo spezielle Zustände passieren, dass wir dann darauf reagieren können. Aber das ist jetzt zumindestens die Extension für so ein kleines HalloWelt-Beispiel, was hier bereits mit implementiert ist und ordentlich viel Dokumentation dabei ist per Kommentar. Wenn wir selber eine Extension schreiben, so eigentlich so gut wie möglich hier intern keine Geschäftslogik handhaben. Am besten ist, dass man dazu eben dann die eigenständige TypeScript-Datei hat und diese Extension-File dient sozusagen als Fassade für unsere Geschäftslogik und, ja, zur Vermittlung von Visual Studio Code und der Logik, die dann für uns relevant ist. Das sorgt dann gleich mal für eine saubere Architektur, und wir sehen hier zusätzlich, ein "OUT"-Verzeichnis wurde nochmal, eigentlich sowas vorhanden ist, das heißt, da sehen wir, dass automatisch unsere JavaScript-Datei also mit SourceMap-File hier extra in ein eigenes Verzeichnis gelegt wird. Und das ist auch wichtig, weil genau das der Bereich ist unter "out""src", was später als eigenständige Extension weiter gereicht wird. Sogar ein Test-Projekt wird hier zur Verfügung gestellt. Da sehen wir auch die nativen JavaScript-Dateien. Der TypeScript Code zum Test ist natürlich direkt unten drunter. Das Schöne ist, dass hier eben bereit schon ein Test-Framework integriert ist also als "mocha Test framework", das heißt und gängiges Standard JavaScript-Framework, was halt der ganz klassischen Unit Test Framework Syntax entspricht. Wie wir hier sehen können, wir greifen auf "assert.equal" zu, um ein Zustand von irgendwelchen Objekten wieder prüfen zu können. Das ist ideal, um zum Beispiel auch testgetrieben eine Extension aufzubauen. "typings", das sind dann einfach noch mal die nötigen Declarationtypes dabei für die "node.ts" Unterstützung und dann noch weitere VS Code Typing Deklarationen. Mehr ist dann jetzt hier auch in diesem "Hallo Welt"-Beispiel gar nicht vorhanden. Wenn wir das jetzt zum Beispiel einmal ausfüllen mit F5, also erst mal Strg+Shift+B, lassen wir es sozusagen im Standardtask laufen, der hier bereits integriert ist. Dann ist jetzt alles zum OUT-Verzeichnis kopiert worden, wobei da schon alles da war. Ja, wenn ich jetzt F5 drücke, wird extra Visual Studio Code noch mal geöffnet, aber diesmal in einem eigenständigen "Extension Development Host"-Prozess. Das bedeutet, dass wir so komplett isoliert sind von unserer jetzigen Instanz, wo wir hauptsächlich darin entwickeln, und da schon sehr, sehr viele Extensions von Haus deaktiviert sind, bis auf die eigene, die wir gerade entwickeln, die ist halt hier bereits von Haus veröffentlicht wurden. Das bedeutet, in dem Beispiel wird gesagt, dass wir hier ein Kommand haben, das registriert wurde, und wenn wir diesen Kommand schreiben, erhalten wir hier vom VS Code im Fenster eine Message mit dem Text "Hello World". Jetzt hier natürlich das Spannende. Was für ein Kommand wurde denn hier registriert? Was muss ich denn jetzt ausführen, damit meine Extension aktiv wird. Diese Regeln werden hier in der "package.json" mit durchgegeben. Und zwar sehen wir hier unter "commands" exakt einen Verweis auf die Schnittstelle, "extension.sayHello", sehen wir wieder "extension.sayHello" und dann sehen wir hier auch noch den Titel "Hello World". Das bedeutet, wenn ich jetzt hier innerhalb von der neuen instanzen Visual Code "Hello World" schreibe, sehen wir auch schon, dass uns das hier direkt eben in der Commandline angeboten wurde, und wenn ich das auswähle, dann wurde unsere Extension ausgeführt, "Hello World". Zum Beispiel wir können jetzt hier auch natürlich in der Extension einen Breakpoint setzen. Wenn ich jetzt hier noch mal "Hello World" schreibe, sagen wir auch direkt im Debug-Modus. Und das ist das Schöne, dass man hier halt das Ganze wunderbar ... TypeScript schreiben. Das ist alles schon fertig eingerichtet. Auch die Konfiguration, dass bei einem Debug automatisch dieses eine neue Instan von Virtual Studio Code in den Development Host gestartet wird etc. Diesen ganzen Aufwand erspart man sich einfach mit so einem tollen Projekt-Template. OK. Wir können jetzt zum Beispiel die Test starten. Dazu wechseln wir zum Beispiel in den Debug-Bereich und sehen hier oben "Launch Extension". Wir können jetzt hier zusätzlich "Launch Tests" auswählen, und jetzt werden nur die Tests ausgeführt, und dazu muss natürlich kurz Visual Studio Code extra geöffnet werden, und wir sehen dann direkt unterhalb in der Konsole, dass ein Test erfolgreich erfüllt wurde und auch noch ein Test ausgeführt wurde etc. Das sehen wir also alles wunderbar in dem Konsole-Output. Hier sieht man zum Beispiel auch noch mal in der "package.json", dass wir den Activation Event eben direkt auf einen "onCommand" setzen, das bedeutet halt eben, dass unsere Extension auch wirklich nur dann aktiv umgeladen wird, wenn eben das direkt durch die Commandline aufgerufen wurde. Das sind also diese ganz speziellen Regelungen. Diese zwei Parts, einmal das überhaupt Visual Studio Code unserer Extension kennt, die als Kommand hinterlegt wird und hier dass die eben erst aktiv wird, wenn man dann eben diesen Kommand ausführt. In diesem Video haben wir uns die Struktur angesehen von unserer erzeugten Extension und sind auf Eigenheiten eingegangen, wie zum Beispiel eine Extension geladen wird, und wie ein Test zum Beispiel gestartet wird oder auch die Extension selbst gedebugt werden kann.

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!