Schneller programmieren mit Emmet

Emmet ist ein Plugin für die verschiedensten Entwicklungsumgebungen. Mit diesem könnt ihr mit weniger Zeitaufwand mehr HTML Code generieren. Also ein muss für jeden Entwickler! Jedoch benötigt Emmet etwas Einarbeitungszeit. Mit der gut gelungenen Dokumentation gewöhnt man sich aber recht schnell daran. Welche Editoren unterstützt werden seht ihr hier.

Ein einfaches Beispiel für Emmet wäre z.B. folgendes:

div>ul>li

Produziert folgendes:

<div>
    <ul>
        <li></li>
    </ul>
</div>

Oder ein einfaches Menü lässt sich so erzeugen:

ul>li.item$*5

Ausgegeben wird folgendes:

<ul>
	<li class="item1"></li>
	<li class="item2"></li>
	<li class="item3"></li>
	<li class="item4"></li>
	<li class="item5"></li>
</ul>

Sie sehen also ganz deutlich, dass man sich mit Emmet lästige Tipparbeit spart. Außerdem sehen Sie an diesem Beispiel das es CSS wirklich sehr ähnelt. Ein Punkt leitet eine Klasse ein und ein # eine ID für das jeweile Element.

Ein anderes Beispiel wäre ein fast komplettes HTML Grundgerüst:

html>(head>title{Emmet ist toll})(body>h1{Ueberschrift})
<html>
	<head>
		<title>Emmet ist toll</title>
	</head>
	<body>
		<h1>Ueberschrift</h1>
	</body>
</html>

Wer nun gefallen an Emmet gefunden hat, kann sich z.B. bei t3n das Emmet Guide Ansehen.

Aptana – Emmet installieren >>

Schreibe einen Kommentar

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