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

Einfache Tasks hinterlegen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Durch den ausgeprägten Support von Tasks erweist sich Visual Studio Code auch als prädestinierte IDE für die Entwicklung außerhalb des reinen HTML-/CSS-/JavaScript-Entwicklungsfelds.

Transkript

Ein wesentlicher Punkt, wo sich "Visual Studio Code" auch als klassischer Code-Editor gegenüber anderen Code-Editoren stark abhebt, ist der Support von Tasks. Erst mal gibt es in der JavaScript-Welt schon sogenannte "Task Runner" und "Visual Studio Code" hat auch einen leichtgewichtigen Task Runner integriert und das arbeitet alles wunderbar miteinander zusammen. Schauen wir und das doch mal in einem Beispiel an, was sich den dahinter verbirgt. Dazu erzeugen wir einfach jetzt hier mal ein neues Projekt. Das wird dann unser "NodeHelloWorld" und das ist eben ein komplett leeres Webprojekt. Wir sehen auch in dem Ordner ist natürlich noch nichts da und als Beispiel wird jetzt erst mal nur mal eine "HalloWelt"-TypeScript-Datei angelegt. Das heißt, ich möchte jetzt hiermit TypeScripte entwickeln. In dem Fall geht es gar nicht so stark um die Funktionalität. Also ich brauche jetzt hier mit dem Codesnap-Bild ein "sayHello", dann ein "name" und das ist natürlich vom Typ "string". Und dann haben wir wieder unsere Console und da soll dann der Name ausgegeben werden. Und "sayHello" wird einmal aufgerufen mit dem Namen "Bill Gates" als Beispiel. Und jetzt haben wir unsere TypeScript-Datei. Ich speichere das Ganze mit "Steuerung S" und jetzt kann man natürlich diese TypeScript-Datei noch nicht wirklich im Web nutzen. Das heißt, aus dieser Datei muss jetzt erst mal eine JavaScript-Datei kompeliert werden. Das heißt, "TypeScript" habe ich bereits auf meinem Rechner installiert. Das kann man ganz einfach, wenn ich jetzt hier die Console öffne mit "npm install typescript-global" vornehmen. Wichtig, damit "npm" auch installiert ist, muss man auf "Node.js.org" und dann dem entsprechend auf seinem Gerät das Ganze installieren. Ich habe das Ganze schon ausgeführt und jetzt möchte ich eben, dass "Visual Studio" automatisch eben daraus eine JavaScript-Datei kompeliert. Das bedeutet, manuell müsste ich jetzt jedes Mal den TypeScript-Compiler aufrufen, "tsc" für TypeScript-Compiler. Und, nein, Moment, wir müssen erst mal auch in das Verzeichnis. Und zwar befinde ich mich hier bei diesem Pfad. Das müssen wir in der Console miteingeben. Und dann können wir auch mit dem, da haben wir unsere TypeScript-Datei "HalloWelt TypeScript". Jetzt müsste ich hier immer TypeScript-Compiler "HalloWelt TypeScript" aufrufen und jetzt wurde mir automatisch die JavaScript-Datei generiert. Und das ist natürlich doof, wenn ich das jedes Mal so händisch machen müsste. Und deswegen wird jetzt hier einfach mittels "SteuerungShiftB" der Task Runner gestartet. So wie man es zum Beispiel bei der großen "Visual Studio"-Version kennt. Da ist auch "SteuerungShiftB" für den Bild-Command. Jetzt ist es so, dass natürlich überhaupt noch nichts konfiguriert ist. "Visual Studio Code" hat keine Ahnung, was er machen soll. Er sagt eben, es ist bisher nichts konfiguriert worden. Das heißt, ich klicke hier auf "Configure Task Runner" und dann wird automatisch ein ".vscode"-Verzeichnis erzeugt, so wie wenn ich eigene Settings vornehmen würde für also projektspezifische-Settings und da haben wir jetzt eine neue JSON-Datei. Und da ist schon wahnsinnig viel Code enthalten, der auskommentiert ist. Hier ist auch extra für TypeScript-Compiler der nötige Code da. Das mit "HalloWelt" ist gerade Zufall. Das gehört hier wirklich zum Platzhalter, weil bei mir heißt es "HalloWelt" und hier ist es "HelloWorld". Und so wird jetzt die Console jedes Mal, wenn ich "SteuerungShiftB" drücke, ausgeführt. Als Beispiel, ich schreibe jetzt einfach nur mal "notepad". Ich entferne hier Argumente, speichere die Datei und wenn ich jetzt "SteuerungShiftB" drücke, dann wir einfach "Notepad" geöffnet. Das möchte ich natürlich nicht. Was bringt mir das, wenn jedes Mal "Notepad" geöffnet wird? Ich drücke jetzt hier mal "Steuerung Z". "Z", das heißt, ich möchte, dass der TypeScript-Compiler-Befehl aufgerufen wird, so wie wir das vorhin manuell gemacht haben. Und diesmal soll der TypeScript-Compiler, aber eben ein paar Parameter dazukriegen und zwar, dass er automatisch eine TypeScript-Config-Datei verwenden soll und das wird mittels "-p" gemacht. Und dann möchte ich, dass er alle TypeScript-Dateien, die innerhalb von meinem Projekt da sind miteinbezieht. Das macht er mit einem zusätzlichen Parameter und der lautet "." . Ganz komische, verrückte Parameter. Die kann man sich normalerweise nicht merken. Ich konnte sie mir auch nur merken, weil exakt diese Parameter untendrunter auskommentiert dargestellt werden. Das heißt, man könnte das natürlich jeder Zeit per "Copy" und "Paste" oben einbinden. Okay, jetzt ist es aber so, dass er die TypeScript-Config-Datei sucht. Die gibt es natürlich nicht. Die lege ich neu an. Das ist die "tsconfig.json". Das Besondere ja an "Visual Studio Code" ist, dass er jetzt anhand von dem Dateinamen jetzt ein Schema leiert im Hintergrund und kann mir jetzt ideal mittels Steuerung und Leertaste genau per "IntelliSense" anzeigen, was man alles so für die Konfiguration vornehmen kann. Das heißt, "compilerOptions". Was wollen wir den da vornehmen? Ich möchte hier zum Beispiel, dass er permanent scannen soll. Das heißt, ich habe hier die Watch-Funktion, genau. Die muss auf "true" gesetzt werden und das reicht eigentlich mal so auch von der Konfiguration her. Mehr muss ich nicht einstellen. Ich könnte jetzt hier noch die ECMAScript-Varianten aussuchen. Zu welcher JavaScript-Version soll das alles zurückversetzt werden. Und zwar wäre das hier die "target"-Version. Das heißt, ich könnte das hier bis zu einer ECMAScript 3-Version von JavaScript zurückkompelieren lassen. Bei unserem Code ist allerdings nichts spezifisches dabei. Ich speichere das Ganze und wenn ich jetzt, also wir haben die JavaScript-Datei nicht da, "SteuerungShiftB" einmalig drücke, wird mir hier diese JavaScript-Datei generiert, wie wir sehen können. Und links unten, rotiert jetzt so ein Balken. Und der hört auch nicht mehr auf. Das heißt, er erkennt jetzt automatisch, wenn die Datei gespeichert wurde. Wenn ich jetzt hier "Erich Gamma" schreibe, der Papa von "Visual Studio Code", "Steuerung S", ich speichere die Datei, dann hat auch automatisch "Visual Studio Code" den Compiler hier gestartet und wir sehen hier, oder besser gesagt der Compiler läuft noch, er hat automatisch die Datei hier übersetzt. Das aber auch nur, weil ich "watch: true" anhabe. Ansonsten müsste ich jedes Mal "SteuerungShiftB" drücken, oder eben auch, wenn ich hier "F1" drücke in der Commandline, kann ich hier "Run Build Task" ausführen. Es gibt dann auch den sogenannten "Show Task Log". Da sehen wir dann auch nochmal exakt, was der TypeScript-Compiler zum Beispiel aus ausgegeben hat. Da können wir jeder Zeit kontrollieren, ob es irgendwelche Fehler gab oder nicht. Wir haben in diesem Video gesehen, wie wir ein Task anlegen mit "Visual Studio Code". Dass wir mit "Visual Studio Code" den Task immer ausführen lassen können und wie hierbei der TypeScript-Compiler automatisch miteingebunden wird.

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
Ihr(e) Trainer:
Erscheinungsdatum:23.03.2017
Laufzeit:2 Std. 21 min (28 Videos)

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!