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

Visual Studio Code Grundkurs

Projektvorlagen mit dem Yeoman VS Code Extension Generator

Testen Sie unsere 2021 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Gregor Biswanger stellt die beiden von ihm geschriebenen Extensions für Visual Studio Code vor und erläutert am praktischen Beispiel, wie man beim Schreiben eigener Erweiterungen die ersten Schritte macht, ohne zu stolpern.

Transkript

Das Schöne an Visual Studio Code ist, dass es extrem einfach ist Erweiterungen dafür zu schreiben und deswegen gibt es schon eine Vielzahl an Erweiterungen von der Community. Auf der Webseite "marketplace.visualstudio.com/VSCode" bekommt man nochmal jede Erweiterung ausführlich angezeigt, also eine komplette Dokumentation zum Beispiel. Wenn ich hier mal zum Beispiel "File Peek" auswähle, kann man zum Beispiel mittels gedrückter Steuerungstaste und auf ein Klick einer Datei dann direkt zu der Datei navigieren, wenn der Dateiname innerhalb von einem String angegeben wird, also das ist schon eine starke Erweiterung. Und man sieht hier eben das Ganze auch als GIF-Animation und viel mehr Dokumentation zu der Erweiterung und das ist halt das Angenehme über diese Webseite. Ich selber habe auch zwei Extensions geschrieben für Visual Studio Code, einmal json2ts. Mit json2ts kann man eben JSON Code kopieren und mittels "Strg+Alt+V" in Visual Studio Code einfügen und dann wird automatisch dieses JSON-Objekt beschrieben als TypeScript-Interface, das heißt, das Ganze wird hier typsicher hinzugefügt. Der Vorteil ist, dass man das selber eben nicht mehr machen muss und man kann dann sofort in Visual Studio Code eben typsicher auf sein JSON-Objekt zugreifen. Wie man hier sieht, hat man dann eben ein ordentliches IntelliSense. Dasselbe funktioniert hier auch mit einer REST-Service URL, die wird einfach in die Zwischenablage kopiert und mit "Strg+Alt+X" eingefügt und dann wird, automatisch durch meine Extension, der Web-Service im Hintergrund aufgerufen. Das JSON-Ergebnis wird analysiert und es wird ein TypeScript Interface eingefügt. Das ist das Besondere eben an json2ts und dann habe ich noch den "Package watcher" geschrieben, den haben wir bereits auch schon bei einem Video kennengelernt. Das heißt, man kann hier bei seiner package.json-Datei npm-Pakete hinzufügen und sobald diese JSON-Datei gespeichert wird, wird das Ganze installiert. Das funktioniert für den Node Package Manager und für den Bower Package Manager und das Besondere ist an beiden Erweiterungen, dass der Source Code komplett Open Source auf GitHub liegt, das heißt, Sie können sich da gerne inspirieren lassen von dem, was ich hier geschrieben und programmiert habe. Aber wie habe ich damit angefangen und wie startet man eben auch bei Visual Studio Code, seine eigene Extension zu schreiben? Das Erste ist, man wählt sich erstmal ein neues Verzeichnis. "Open folder" "MyExtension" und dann müssen wir in die Konsole wechseln und zwar gibt es extra unter Node.js ein Code Generator Template Tool. Das bedeutet, mit diesem Tool kann man sich eben bestimmte Templates, die für diesen Generator entwickelt wurden, herunterladen und der heißt hier Yeoman und den installiert man mit dem Node Package Manager, "npm install" "global" "yo" "Generator-Code". Das heißt, es wird "yo" installiert, "global" und "Generator-Code", das heißt, das ist von Microsoft, von Visual Studio Code. Beide Pakete werden jetzt global installiert, das kann natürlich etwas dauern. Nach der Installation kann man Yeoman jederzeit mit "yo" aufrufen und jetzt muss man hier natürlich das jeweilige Template mitgeben und zwar hatten wir ja "Generator-Code" mitinstalliert, das bedeutet, wir rufen das Ganze mittels "yo Code" auf und Yeoman startet das Ganze, fragt erstmal hier ab, ob er heimlich Daten mit aufnehmen darf, was wir so machen, ich bestätige das jetzt mal mit "Yes". Und dann sehen wir auch schon Yeoman. Und dann steht hier "Welcome to the Visual Studio Code Extension Generator" und jetzt sieht man auch schon den Vorteil von diesem Code Generator Template, das heißt, hier kann man dann mit den Pfeiltasten schön in der Konsole auswählen, was man vorhat zu entwickeln. Das heißt, man kann hier eine neue Erweiterung gleich in TypeScript schreiben, was ich persönlich sehr stark empfehlen würde. Es geht aber auch ohne TypeScript, sondern nativ direkt auf JavaScript. Man kann dann auch ein eigenes Theme schreiben, das unterscheidet sich dann noch mal von der Architektur. Man kann natürlich auch ein Language Support schreiben, das bedeutet, will man jetzt irgendeine spezielle Programmiersprache etwas stärker fördern in Visual Code, dann kann man das Ganze hier entwickeln oder man kann auch hierfür ganz einfache Code Snippets schreiben, was wir bereits schon beim Video kennengelernt haben. Ich wähle jetzt hier mal "New Extension" mit TypeScript aus. Und wie ist der Name der Extension? In dem Fall "HelloWorld." Danach wird der Indentifer gefragt von der Extension, ich belasse es mal beim Standard. Dann kann man natürlich hier noch mal beschreiben, was passiert denn bei der HelloWorld-Extension. Ich schreibe einfach mal "Sample" und dann ist natürlich das Wichtigste am Schluss, was ist der Publisher Name. In dem Fall ist es bei mir Gregor Biswanger. Man schreibt natürlich dann das Ganze zusammen. Das Schöne ist, jetzt wird sogar gleich gefragt, ob von Anfang an ein Git Repository frisch initialisiert werden soll. Das bestätigen wir auch gleich mal mit "Yes" und somit ist automatisch gleich ein neues Git Repository integriert, womit man dann sauber gleich anfangen kann, die Extension zu schreiben. Jetzt werden noch mal alle nötigen Node Package Manager Pakete installiert, die für das Projekt benötigt werden. Und das war dann auch schon alles, was man braucht, um das Template für eine Extension zu erzeugen.

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!