It’s #FrontendFriday – Speed up your code with Emmet in Visual Studio Code
Hallo liebe/r #FrontendFriday Leser/in. Wollt ihr in Visual Studio Code mit Lichtgeschwindigkeit Code produzieren und dabei bekannte CSS-Selektoren verwenden? Dann ist dieser Beitrag genau das richtige für euch.
Was ist Emmet?
Habt ihr euch schonmal gefragt, wer oder was für das automatische Schließen z.B. von einem div-Tag verantwortlich ist? Oder für das Einfügen von nicht optionalen Inhalten eines Input- oder Link-Elements? Die Antwort ist Emmet.
Emmet ist ein quellofenes Plugin, welches von Haus aus in Visual Studio Code integriert ist und zur schnellen Erstellung von Inhalten in Dateien dient. Das Plugin wandelt spezielle Kürzel sofort in normalen Code um, welcher wie gewohnt gespeichert und verwendet werden kann. Der eine oder andere alte Entwicklungshase kennt Emmet auch unter dem Namen „Zen Coding“. Wir fokussieren uns in diesem Beitrag vor allem auf html- sowie css-Dateien. Lasst uns mal dazu erstmal eine beispielhafte html-Datei erstellen und gleichzeitig ein paar Styles verlinken sowie Elemente erzeugen.
Nur in wenigen Sekunden haben wir ein html-Grundgerüst gebaut mit verlinkten Styles und mehr als 40 Elementen. Cool oder? Bei Betrachtung des Bildes sticht sofort die Autovervollständigung ins Auge, sobald mit der Eingabe einer Emmet-Abkürzung begonnen wird. Mit Enter kann anschließend die Umwandlung in Codeinhalte getriggert werden. Jedes einzelne Kürzel zu erklären würde sich nicht als Zielführend erweisen. Aus diesem Grund beschränke ich mich folgend auf wenige Beispiele. Bei Bedarf kann das offizielle Cheat-Sheet herangezogen werden. Es eignet sich sehr gut zum Spicken und stellt meiner Meinung nach einen sehr guten Einstiegspunkt zum Erlernen der Emmet-Kürzel dar.
Weitere Beispiele
Nehmen wir mal an, dass wir eine Navigation mit 4 Reitern erstellen wollen.
Dabei soll die Liste später über die ID „list“ selektiert werden und die jeweiligen Listeneinträge ihren Style über die CSS-Klasse „entry“ erhalten.
Uns ist mittlerweile aufgefallen, dass die Listeneinträge nummeriert werden müssen. Für Emmet absolut kein Problem!
Für den einen oder den anderen wird ersichtlich, dass mit Emmet die Implementierungsgeschwindigkeit enorm gesteigert werden kann. Deshalb die klare Empfehlung für alle Visual Studio Code Fans an dieser Stelle: Nutzt Emmet.
