Emmet

HomePage | RecentChanges | EditorIndex | TextEditorFamilies | Preferences

 Emmet - open source plugin for HTML and CSS coding

 Author:   Sergey Chikuyonok
 Homepage: http://emmet.io/
 Family:   ScriptLanguage
 License:  The MIT License

Emmet (previously known as Zen Coding) is a plugin for many popular text editors which greatly improves HTML & CSS workflow:

Basically, most text editors out there allow you to store and re-use commonly used code chunks, called “snippets”. While snippets are a good way to boost your productivity, all implementations have common pitfalls: you have to define the snippet first and you can’t extend them in runtime.

Emmet takes the snippets idea to a whole new level: you can type CSS-like expressions that can be dynamically parsed, and produce output depending on what you type in the abbreviation. Emmet is developed and optimised for web-developers whose workflow depends on HTML/XML and CSS, but can be used with programming languages too.

For example, the sequence

div#page>div.logo+ul#navigation>li*5>a

expands into

<div id="page">

        <div class="logo"></div>
        <ul id="navigation">
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
        </ul>
</div>

The expand abbreviations function includes several other complex functions, such as wrapping a section of code with expanded code.

The following editors have (partial) Emmet support


HomePage | RecentChanges | EditorIndex | TextEditorFamilies | Preferences
Edit text of this page | View other revisions
Last edited December 14, 2013 3:59 pm (diff)
Search: