Emmet v1.0 released

    I am pleased to announce that after more than six months of development , Emmet (former Zen Coding) v1.0 was released.

    Emmet is a tool to speed up work with HTML and CSS. The project is based on a mechanism of dynamic abbreviations that are parsed "on the fly" and from which a ready-made code fragment is generated. To write abbreviations, a syntax is used that is similar to CSS selectors, but with some additions specific to creating code. For example, here is an abbreviation:

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

    a simple keystroke turns into:



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

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

    • There was a full documentation and official website where you can get the most complete information about the project and its capabilities.
    • All plugins were 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 remember bulky names of abbreviations, just write a few characters (for example, ov:h== ov-h== o-h== oh== overflow: hidden);
    • Improved module for detecting implicit tag names . Previously, if you tried to expand the abbreviation like .item, you could get either
      , or , depending on the type of parent tag. Now the module looks at the tag name and can output, for example,
    • , , .
    • Support for extensions . Now, to add a new abbreviation or adjust the output of the result, you do not need to go into the plugin code, just create a few simple JSON files in a special folder.
    • Generator "Lorem Ipsum" . Previously, in order to get a “fishy” text for the site, you had to use third-party resources, and then format the result. Now you can get such text directly in the editor, and the number of words in the text can be adjusted simply by adding the number after the abbreviation. Moreover, the generator uses all the capabilities of Emmet abbreviations, allowing you to add the necessary attributes to the generated elements and adjust the number of blocks created.
    • New operator^ .

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


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

    Also popular now: