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

Navigieren innerhalb von Abhängigkeiten

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Sie können nicht nur ganz einfach zur Definition einer Funktion bzw. eines Objekts springen – Sie finden auch jederzeit ganz schnell heraus, wo bzw. an welchen Stellen und wie oft etwa ein bestimmtes Objekt benutzt wird.

Transkript

In diesem Video schauen wir uns an, wie man innerhalb von Abhängigkeiten navigieren kann. Die gute Frage ist jetzt hierbei, was ist mit Abhängigkeiten gemeint. Sehen wir uns doch zum Beispiel diese Main Page Controller JavaScript-Datei an. Hier haben wir öfters das $scope-Objekt, ich meine, das ist jetzt noch ein einfaches Beispiel, hier kann man noch sehen, wo kommt das $scope-Objekt eigentlich her. Das sehen wir hier oben schon beim Konstrukteur. Allerdings gibt es natürlich viel komplexere Szenarien und da kann man dann ganz einfach mit der F12-Taste die "Go to Definition"-Funktion aufrufen oder man macht einen Rechtsklick und klickt hier auf "Go to Definition" und man landet exakt an der Stelle, wo das Ganze definiert wurde. Umgekehrt ist natürlich das auch spannend, wir sehen irgendwo ein Objekt und möchten wissen, wo würden das eigentlich überall benutzt und auch in welchen Dateien. In dem Fall wird "$scope" auch nur in dieser einen Main Page Controller JavaScript-Datei benutzt. Allerdings gibt es dann auch das Szenario, wo es dann in anderen Dateien ebenfalls benutzt wird und das schafft man mit Shift+F12 oder hier auch wieder mit Rechtsklick "Find All References", und es öffnet sich neues Fenster und wir bekommen wirklich Zeile für Zeile angezeigt, wo das ganze nochmal benutzt wird. Mit einem Klick kann man natürlich auch direkt hin navigieren, ist es eben auf mehrere Dateien verteilt, dann kann man das Ganze hier ebenfalls in diesem Fenster auswählen. Jetzt kann das natürlich sein, dass wir den Inhalt davon irgendwo bearbeiten wollen, dann gibt es auch noch extra "Peek Definition", das ist dann mit Alt+F12, in dem Fall können wir nicht rein und etwas bearbeiten, weil es halt eine offene Variable ist. Das Feature gab es zum Beispiel auch wieder bei dem Code Editor Adobe Brackets und das hatte dann den Namen "Inline Editing". Das heißt, wir können jetzt hier zum Beispiel etwas verändern und wir sehen hier auch schon im Hintergrund, dass das natürlich wirklich exakt in dieser Datei dann auch geschieht, also wir haben jetzt hier direkt das Ganze verändern können. Hier ist es jetzt weniger spektakulär, aber hat man hier etwas umfangreichere Anwendungen, bei bestimmten Szenarien ist es extrem wertvoll die "Go to Definition"-Funktion, "Peek" und "Find All References", das sind die top Refactoring Tools, die hier dieser Studio Code mitbringt. Eine weitere gute Information bekommt man natürlich hier nochmal, wenn man die Steuerungstaste drückt, dann sieht man auch nochmal, wo das Scope-Element nochmal genauer herkommt. Wir sehen hier den Main Page Controller angezeigt. Allerdings befinden wir uns ja auch in einer JavaScript-Datei, das bedeutet, diese drei top Features werden am allerbesten natürlich mit TypeScript unterstützt, weil das natürlich für Visual Studio-Code einfacher fällt, hier Abhängigkeiten auflösen zu können, weil JavaScript an sich, so wie es jetzt ist, sehr untypisiert ist und deswegen ich wechsle mal nochmal zu Node-Debug, da kann man das auch nochmal schöner demonstrieren, da gehe ich dann nochmal zu meiner TypeScript-Datei, hier gehe ich auch schon mit dem Mauszeiger drüber, man bekommt die ganze Signatur angezeigt, welche Parameter mit welchen Datentypen werden hier durchgereicht, wenn ich jetzt hier zum Beispiel die Steuerungstaste gedrückt halte, sehen wir auch schon, dass automatisch der Funktionsname, wie einen Link dargestellt wird, und wenn ich da draufklicke, dann ist das ein sogenanntes "Go to Definition". Das bedeutet, wenn ich jetzt die F12-Taste drücken würde, würde ich jetzt zu dem Code springen, wo das Ganze implementiert wird. Jetzt ist das hier natürlich eine Node-spezifische Funktion, die von Node.js bereitgestellt wird und wäre dann nur in der Type Definition-File, das heißt, wo das Interface implementiert ist, für TypeScript, wo nur die Beschreibung vorhanden ist, das heißt, hier ist keine wirkliche Implementierung da. Hat man allerdings irgendwo mit TypeScript direkt was implementiert, kann man also wunderbar durch sein Code navigieren und springen mit der Steuerungstaste, indem man da mal draufklickt. Wir können hier auch nochmal "Find All References" anzeigen lassen und wir sehen, jetzt hier tatsächlich wird dieser createServer-Funktion einmal in der app.ts-Datei benutzt, wenn ich hier draufklicke, das ist natürlich die, die hier schon geöffnet wurde, und dann ist einmal diese Funktion hier innerhalb von der Type Definition-Datei und so kann man wunderbar schnell hin und her wechseln. Und wenn man jetzt hier die Steuerungstaste gedrückt hält und draufklickt, wird das auch nochmal automatisch an eigenen Fenster dargestellt. Man kann auch hier den Inline Editing-Modus verwenden. Wie man sieht, ich könnte direkt den Code bearbeiten. Das sind also wahnsinnig coole Features von Visual Studio-Code und wie schon gesagt, am allerbesten funktioniert das Ganze mit TypeScript.

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!