DEPRECATED AND NO LONGER SUPPORTED: use standards-frieldly ES6 template literals instead

better-emmet-plugin

Emmet abbreviation parser for better-dom

On front-end it's typically to have some HTML pieces in Java Script. This plugin helps to simplify such embed strings using a nice Emmet-like syntax which we are all familiar with. Compare the line below:

DOM.create("<ul><li class='list-item'></li><li class='list-item'></li><li class='list-item'></li></ul>");

to the equivalent micro template

DOM.create(DOM.emmet("ul>li.list-item*3"));

Take a look at the Emmet cheat sheet for more examples, but be aware about the differences.

Where to use

DOM.emmet converts an Emmet abbreviation to HTML string:

DOM.emmet("a+b"); // => "<a></a><b></b>"
DOM.emmet("select>option[value=$]*2"); 
// => "<select><option value="1"></option><option value="2"></option></select>"

If you use a ES6 trinspiler for your source code, the plugin exposes DOM.emmetLiteral. This function provides even more elegant syntax for microtemplating using template literals:

var emmet = DOM.emmetLiteral;
...
DOM.create(emmet`ul>li.list-item*3`);
DOM.create(emmet`a>{Hello ${username}!}`);

Differences from emmet.io parser

Element aliases are not supported
Implied tag names are not supported
Shortcut a{text} instead of a>{text} is not supported
Operator ^ is not supported (use scopes instead)
Expandos are not supported
Boolean attributes (attributes are boolean by default)
Default attribute values are not supported
Short tags are not supported

Do not be crazy with microtemplates!

Several recommendations from the emmet docs:

You don’t really need to write complex abbreviations. Stop thinking that “typing” is the slowest process in web-development. You’ll quickly find out that constructing a single complex abbreviation is much slower and error-prone than constructing and typing a few short ones.

Browser support

Desktop

Chrome
Safari 6.0+
Firefox 16+
Opera 12.10+
Internet Explorer 8+ (see notes)

Mobile

iOS Safari 6+
Android 2.3+
Chrome for Android