icancode.de

Emmet – Der Weg des geringsten Widerstands

Einleitung

Ben

Ben

Ben studiert Medieninformatik und Gestaltung an der Uni Bielefeld. Nebenberuflich als iOS-Softwareentwickler in einem kleinen Startup tätig, beschäftigt er sich mit allen Dingen die mit Apple zu tun haben.


Neuste Artikel

Die besten Fonts zum Programmieren 15th June, 2015

Google Fonts 24th April, 2015

Programmierung

Emmet – Der Weg des geringsten Widerstands

Veröffentlicht am .

Webentwicklung mit HTML und CSS ist trotz moderner Entwicklungsumgebungen und Texteditoren oftmals noch viel Schreibarbeit von sich wiederholendem Boilerplate-Code. Viele Tags und das saubere Formatieren von Quellcode verlangsamt die Entwicklung unnötig. Um dem entgegenzuwirken gibt es Emmet.

Emmet bezeichnet sich selbst als essentieller Werkzeugkasten für Webentwickler. Das Plugin, welches für viele Code-Editoren verfügbar ist, lässt HTML-Code aus Abkürzungen entstehen. Die Syntax richtet sich dabei nach den bekannten CSS-Selektoren für Child-Elemente, Klassen und IDs. So kann man beispielsweise folgendes schreiben:

div>ul>li

Emmet macht dann daraus sinnvollen HTML-Code

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

Aber auch komplizierte Statements sind möglich, beispielsweise um verschachtelte oder sich wiederholende Strukturen zu erzeugen.

div>(header>ul>li*2>a)+footer>p

wird zu:

<div>
    <header>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </header>
    <footer>
        <p></p>
    </footer>
</div>

Die Syntax-Liste mit allen Abkürzungen findet man hier. Als Bonus bringt Emmet auch einen Generator für Lorem-Ipsum-Platzhaltertexte mit.

Für die bekanntesten Editoren und IDEs ist Emmet als kostenloses Plugin zum Download verfügbar, unter anderem Sublime, Netbeans, Eclipse, Notepad++ und Vim ;-)

Ben

Ben

Ben studiert Medieninformatik und Gestaltung an der Uni Bielefeld. Nebenberuflich als iOS-Softwareentwickler in einem kleinen Startup tätig, beschäftigt er sich mit allen Dingen die mit Apple zu tun haben.

Navigation