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

Visual Studio Code Grundkurs

JavaScript, JSON und CSS IntelliSense

Testen Sie unsere 2016 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Anhand der Dateiendung erkennt Visual Studio Code automatisch, mit welchen Auto-Vervollständigungs-Vorschlägen das Programm Ihnen die mühevolle Tipparbeit abnehmen kann.

Transkript

einer meiner Lieblings Features von Visual Studio Code ist die IntelliSense-Unterstützung von TypeScript-, JavaScript-, CSS- und JSON-Dateien. Was ist zum Beispiel mit JSON-Datei gemeint? Anhand von Dateinamen erkennt Visual Studio Code zu welcher JSON-Datei diese Konfigurationsdatei zum Beispiel gehört, also "package.json" ist ein Bestandteil von Node.js, wo man zum Beispiel eben seine Librariy, seine Abhängigkeiten hier, in diesen JSON reinschreibt, das, was man zum Beispiel haben möchte, es gibt zum Beispiel hier Jasmin-Node. Das ist ein Unit Test Framework für JavaScript und wir sehen, dass er jetzt hierbei, während ich es eintippe, eigentlich schon alles vorschlägt, was zum Beispiel der Paketmanager von Node.js,, also NPM beinhaltet und ich weiß jetzt gar nicht, was so die aktuelle Version ist, es würde jetzt hier automatisch ein Stern eingetragen. Aber wenn ich jetzt wieder mit Steuerung+Leer hier, innerhalb von diesem Feld, das Ganze eintippe, erhalte ich automatischen einen Vorschlag, was ebenso die aktuelle Version ist von Node.js. und das praktische dabei ist eben, dass das jetzt automatisch installiert wurde. Ich empfehle hierbei auch noch meine Erweiterung zu installieren, die habe ich selbst entwickelt und geschrieben, die kann man hier ganz einfach installieren, unter "Install Extension" und dann ist bei mir der Name Package Watcher, Package Watcher, das ist eben, dass automatisch diese JSON-Datei auch noch beobachtet wird, und wenn hier irgendwas sich verändert beim NPM oder Bauer-Paketmanager, werden automatisch im Hintergrund die nötigen Pakete heruntergeladen uns installiert. Und jetzt ist die Installation der Erweiterung abgeschlossen und man muss nur noch Visual Studio Code dazu einmal neu starten. Ich entferne das jetzt hier nochmal, damit automatisch das Paket wieder gelöscht wird aus unserem Projekt, von Package Watcher. Es wird jetzt natürlich nicht installiert, das heißt, wir haben jetzt hier zwar "Jasmine-Growl-Reporter" und Reports, aber "Jasmine-node" ist nicht installiert, und wenn ich jetzt hier einfach Steuerung+Leer, es wird hier sofort die Intellisense angezeigt, wähle "Jasmine-node" aus, sage, ich will die aktuellste Version und sobald die Datei gespeichert wird, wird jetzt automatisch im Hintergrund "Jasmine-node" installiert. Wie sehen, es ist jetzt hier installiert worden. Wenn ich das ganze hier entferne und die JSON-Datei speichere, wird das jetzt automatisch auch wieder gelöscht, es ist auch schon wieder weg. Das ist der Paket-Watcher, eine Erweiterung von mir und und dann eben der JSON- IntelliSense-Support von Visual Studio Code. Wir haben hier zum Beispiel auch von TypeScript die Konfigurationsdatei "tsconfig.json" und hier kann man dann direkt bei den Eigenschaften, Steuerung+Leer, die Empfehlung bekommen von Visual Studio Code, was man dann hier überhaupt eintragen kann und das hat einen extremen Vorteil. In der Regel müsste man jetzt bei der TypeScript-Dokumentation nachschlagen, was es denn hier alles von Konfigurationen gibt. Das bleibt einem bei Visual Studio Code erspart, hier braucht man nur die Tastenkombination Steuerung+Leertaste tippen und wir sehen, wir bekommen hier eine Autovervollständigung, also IntelliSense von der TS Config Datei. Können Sie auch nochmal mehr Infos einblenden lassen, wenn diese vorhanden sind, wird auch etwas mehr angezeigt und dann kann man eben ganz bequem in Visual Studio Code seine JSON- Konfigurationsdateien schreiben. Wenn wir jetzt zum Beispiel dann auch noch den CSS-IntelliSense genauer ansehen, und zwar gehe ich hierbei zu meinem Webprojekt, und zwar zu der Index.HTML-Datei, wechseln wir doch mal hier zu einem Style, den ich jetzt einfach mal schnell erzeuge, das ist unsere Testklasse, bekomme ich hier ebenfalls mit Steuerung+Leer alle gängigen Optionen für die CSS-Eigenschaften angezeigt, kann jetzt hier zum Beispiel die Farbe auswählen, auch hier wieder Steuerung+Leer und ich bekomme wieder alle Farbkombinationen automatisch eingeblendet im Bezug einer kleinen Vorschau, also diese IntelliSense-Unterstützung ist extrem praktisch. Dasselbe ist natürlich hier auch mit TypeScript, das ist natürlich wahnsinnig gut unterstützt von Visual Studio Code. Kann jetzt hier zum Beispiel mit "unverständlich" auf mein Objekt zugreifen und bekomme automatisch alles angezeigt, was mir hier von diesem Main Page Controller zur Verfügung gestellt wird. Wird einmal diese IntelliSense hier nicht angezeigt, dann einfach auch wieder Steuerung+Leer und es öffnet sich automatisch die Autovervollständigungsliste. Das Ganze funktioniert natürlich bei JavaScrip selber auch, allerdings wird hierbei mehr darauf eingegangen, was wurde bereits hier vorher irgendwo erkannt, das eingegeben worden ist, plus was wäre alles möglich bei einem JavaScript-Objekt mit anzuhängen, also er versucht ja auch viel zu interpretieren und dann ist das alles nicht mehr so genau, wie bei TypeScrip. Wir sehen, dass ich zum Beispiel hier, wenn ich das schreibe, schon um einiges mehr angezeigt bekomme, wie gerade eben. Wir sehen hier dann zwischendrin ist einmal diese "say Hello"- Funktion, wir bekommen auch kein schönes Icon dazu angezeigt, das ist natürlich etwas unschön. Wenn man allerdings auch nicht mit TypeScriptteilt arbeitet, nur in JavaScript arbeitet und dann aber Type Definition-Files von TypeScript installiert, bekommt man auch eine IntelliSense-Unterstützung für bestimmte JavaScripts Funktionen. Das ist nur mal so ein kleiner Tipp am Rande, wer also nicht mit TypeScript arbeiten möchte oder kann, der kann sich einfach die TypeScript Definition-Files herunterladen und kann dann innerhalb von Visual StudioCode die ganzen IntelliSense-Features nutzen. Wir haben in diesem Video gesehen, dass Visual Studio Code automatisch die JSON- Konfigurationsdatei erkennt und die passende IntelliSense zur Verfügung stellt. Mittels Steuerung+Leer und die Visual Studio Code Extension, meinerseits Package Watcher installiert, dann auch noch automatisch die Pakete oder löscht diese wieder, der ganze Support ist ebenfalls für CSS da und TypeScript und wenn man Type Definition-Dateien heruntergeladen und installiert hat, funktioniert das ebenfalls fürJavaScript.

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!