It’s #FrontendFriday – Speed up your code with Emmet in Visual Studio Code

04.09.2020

Hallo liebe #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.

Beispiel

 

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.

Beispiel

 

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-Sheat 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 das wir eine Navigation mit 4 Reitern erstellen wollen.

Beispielcode

 

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.

Beispielcode

 

Uns ist mittlerweile aufgefallen, dass die Listeneinträge nummeriert werden müssen. Für Emmet absolut kein Problem!

Beispielcode

 

Fazit

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.

 

 

Zurück zur Übersicht

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

*Pflichtfelder

*

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.