Emmet v1.0 released

I am glad to announce that after more than half a year of development Emmet (formerly Zen Coding) v1.0 has been released.

Emmet is a tool to speed up your work with HTML and CSS. The project is based on the mechanism of dynamic abbreviations that are understood “on the fly” and from which a ready-made code fragment is generated. The abbreviations are written using syntax similar to CSS selectors, but with some additions specific to generating code. For example, here is an abbreviation:

section>h2+ul.nav>li.nav-item$*5>a 

a simple keystroke turns into:
')

 <section> <h2></h2> <ul class="nav"> <li class="nav-item1"><a href=""></a></li> <li class="nav-item2"><a href=""></a></li> <li class="nav-item3"><a href=""></a></li> <li class="nav-item4"><a href=""></a></li> <li class="nav-item5"><a href=""></a></li> </ul> </section> 

But for convenient work with the code, you need not only to be able to write it quickly, but also to edit already existing code. Emmet offers a variety of actions that simplify working with existing code: selecting a pair of tags , quickly navigating to edit points , commenting on a tag, and much more .

As noted above, Emmet is the new name for the Zen Coding project, previously mentioned on Habré . With the new name, the project received a new life and new opportunities:

• There was full documentation and the official website where you can get the most complete information about the project and its capabilities.
• All plugins have been rewritten from scratch for closer integration with the editor. Most of them are updated automatically.
• Improved work with CSS: property values ​​can be written directly in the abbreviation. The experience and wishes of users were also taken into account - thanks to the fuzzy search module , you do not need to memorize cumbersome abbreviations, just write a few characters (for example, ov:h == ov-h == oh == oh == overflow: hidden );
• Improved module for determining implicit tag names . Earlier, if you tried to expand an abbreviation like .item , then you could get either <div class="item"> or <span class="item"> , depending on the type of the parent tag. Now the module looks at the tag name and can output, for example, <li> , <td> , <option> .
• Extensions support . Now, in order to add a new abbreviation or to customize the output of the result, you do not need to go into the plugin code, you just need to create several simple JSON files in a special folder.
• Generator "Lorem Ipsum" . Previously, in order to get the "fish" text for the site, you had to use third-party resources, and then format the result. Now you can get this text directly in the editor, and the number of words in the text can be adjusted by simply adding the number after the abbreviation. Moreover, the generator uses all the capabilities of the Emmet abbreviations, allowing you to add the necessary attributes to the generated elements and regulate the number of blocks created.
• New operator ^ .

I also release several additional projects that were created while working on Emmet:

• CodeMirror Movie ( in Russian ) is a plugin for CodeMirror editor that allows you to create demos for code.
• Plugins for DocPad ( in Russian ) - a story about how to create professional sites on DocPad , a framework for generating static sites.

Source code and plugins are available in a special repository . If you find errors or have any suggestions for improvement, I will be glad to know about them in the Issues section.