Visual Studio Code Grundkurs

Bracket-Navigation und Emmet

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Durch die optische Hervorhebung und die Match-Anzeige bei HTML-Brackets und vergleichbaren Elementen etwa in XML erleichtert Visual Studio Code die Bearbeitung von web-spezifischen Markup-Dateien.

Transkript

Visual Studio Code ermöglicht auch das extrem gute Bearbeiten von HTML-Elementen, zum Beispiel von den einzelnen Bracket Symbolen. Das heißt, wenn ich hier natürlich zum Beispiel ein Div-Element auswähle, bekomme ich ja auch schön farblich dargestellt, wo auch das entsprechende Div endet, wie oft hier das Wort Div vorkommt und hier beginnt zum Beispiel das Ganze ja mit diesen Bracket. Wenn wir aber jetzt zum Beispiel das input-Element ansehen und ich möchte jetzt bis zum Ende vom Bracket navigieren, dann müsste ich hier den Scrollbalken benutzen und ich möchte eigentlich bei meiner Tastatur bleiben und das lässt sich auch sehr schön mit einer Tastenkombination bewerkstelligen. Am besten einfach erstmal die F1 Taste drücken, so dass wenn die Commandline kommen und wir wollen auch ein Command ausführen und zwar den "Go to Bracket" Command. Und das Schöne ist, hier sehen wir auch nochmal die jeweilige Tastenkombination, welche dafür auch notwendig ist, ohne dass wir diesen Umweg über die Commandline ausfüllen müssten und soweit ich dann das Ganze bestätige, sind wir auch schon wieder am Ende. Mit dem selben Befehl in dem Fall was hier Steuerung+Shift spitze Klammer nach oben, kommen wir auch wieder in den Anfang von diesem input-Element. Das ist das Besondere hier für die Bracket-Navigation. Dann haben wir hier auch noch weitere Emmet Features. Das bedeutet, dass wir extrem schnell auch von Visual Studio Code aus, HTML Code erzeugen lassen können. Ich entferne mal ganz kurz hier den ganzen Code, der bereits da war. Und nun gibt es ein paar ganz coole Template-Funktionen, zum Beispiel wenn ich jetzt das Ausrufezeichen schreibe, und dann die Tab-Taste drücke, wird mir automatisch ein HTML Grundgerüst generiert. Das ist praktisch, wenn ich eine neue HTML-Datei anlege und möchte dieses Grundgerüst dementsprechend haben. Steuerung ZZ, dann habe ich hier wieder mein alten Code, in dem Fall verwende ich hier, hier Bootstrap zum Layouten der Weboberfläche und es wäre jetzt natürlich auch ganz einfach möglich, indem ich nur div schreibe Punkt container und dann die Tab-Taste betätige, wird automatisch mir ein Div-Element erzeugt, die Klasse abonniert, und ich kann hier direkt mit dem Arbeiten beginnen. Was auch möglich wäre und auch sehr oft praktisch ist, zum Beispiel beim Erzeugen von Listen. Ich schreibe hier zum Beispiel ein Div, dann möchte ich ein Kinder-Element mit ul, dann hat das Listenelement auch noch mal einzelne Listenelementeinträge und davon möchte ich zum Beispiel zehn Stück haben. Und mit Bestätigen der Tab-Taste bekomme ich zehn Listeneinträge generiert, ohne dass ich hier müheselig den ganzen Code dazu schreiben muss. Für weitere Emmet Befehle empfehle ich dann die offizielle Dokumentation dazu unter docs.emmet.io hier bekommt man noch viele weitere Abkürzungen präsentiert, wo man wahnsinnig schnell in Visual Studio Code sich das Ganze generieren lassen kann. Also es ist keine Erfindung von Visual Studio Code, das unterstützen auch andere Code-Editoren, aber normalerweise erst, wenn noch mal spezielle Erweiterungen installiert werden und das ist halt bei Visual Studio Code "per default", also per Standard schon mit dabei.

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!