Reference implementation of Emmet abbreviation expander

Emmetabbreviation expander

Reference implementation of Emmet’s “Expand Abbreviation” action.

import { expand } from '@emmetio/expand-abbreviation';

console.log(expand('ul.nav>.nav-item{Item $}*2'));
// outputs:
// <ul class="nav">
//   <li class="nav-item">Item 1</li>
//   <li class="nav-item">Item 2</li>
// </ul>

// use XHTML-style output
console.log(expand('img[src=image.png]', {
    profile: {
        selfClosingStyle: 'xhtml'
// outputs: <img src="image.png" alt="" />

// Output in Slim syntax
console.log(expand('ul.nav>.nav-item{Item $}*2', {syntax: 'slim'}));
// outputs:
// ul.nav
//   li.nav-item Item 1
//   li.nav-item Item 2


This module exports two functions: parse(abbr, options)and expand(abbr, options).

The parse(abbr, options)function parses abbreviation into tree, applies various transformations required for proper output and returns parsed tree. The expand(abbr, options)does the same but returns formatted string. In most cases you should use expand(abbr, options)only but if you want to analyze or update parsed abbreviation somehow, you can parse()abbreviation first, update parsed tree and then expand()it:

import { parse, expand } from '@emmetio/expand-abbreviation';

// 1. Parse string abbreviation into tree
const tree = parse('ul>.item*3');

// 2. Walk on each tree node, read or update them somehow
tree.walk(node => { ... });

// 3. Output result


Both parse()and expand()methods accept the following options:

  • syntax(string): abbreviation output syntax. Currently supported syntaxes are: html, slim, pug, haml.
  • field(index, placeholder)(function): field/tabstop generator for host editor. Most editors support TextMate-style fields: ${0}or ${1:placeholder}. For TextMate-style fields this function will look like this:
const field = (index, placeholder) => `\${${index}${placeholder ? ':' + placeholder : ''}}`;

Emmet natively supports TextMate fields and provides module for parsing them.

  • text(string or array of strings): insert given text string(s) into expanded abbreviation. If array of strings is given, the implicitly repeated element (e.g. li*) will be repeated by the amount of items in array.
  • profile(object or Profile): either predefined output profileor options for output profile. Used for by markup formattersto shape-up final output.
  • variables(object): custom variables for variable resolver.
  • snippets(object, array of objects or SnippetsRegistry): custom predefined snippets for abbreviation. The expanded abbreviation will try to match given snippets that may contain custom elements, predefined attributes etc. May also contain array of items: either snippets (object) or references to default syntax snippets(string; the key in default snippets hash).
  • addons(object): hash of additional transformationsthat should be applied to expanded abbreviation, like BEM or JSX. Since these transformations introduce side-effect, they are disabled by default and should be enabled by providing a transform name as key and transform options as value:
    bem: {element: '--'}, // enable transform & override options
    jsx: true // no options, just enable transform
  • format(object): additional options for output formatter:

    • markup(object): options for markup syntaxes like XML, HTML, Pug, Slim etc.:

      // Auto-comment expanded HTML elements with specific attributes, e.g. `p.foo` → `<p class="foo"></p><!-- .foo -->`
      comment: {
          // Enable/disable commenting
          enabled: false,
          // Attributes that should trigger node commenting on specific node, if commenting is enabled
          trigger: ['id', 'class'],
          // Template strings for placing before opening and/or after closing tags. Content between `[` and `]` will be outputted only if specified attribute name (uppercased; dashes replaced with underscores) is available in element
          before: '',
          after: '\n<!-- /[#ID][.CLASS] -->'
    • stylesheet(object): options for stylesheet formatters like CSS, SCSS, LESS etc.:

          // Use short hex notation where possible, e.g. `#000` instead of `#000000`
          shortHex: true,
          // A string between property name and value
          between: ': ',
          // A string after property value
          after: ';'

See testfolder for usage examples.

Design goals

This module is just an umbrella projects that combines various stand-alone submodules into a unified process for parsing and outputting Emmet abbreviations. Thus, you can create your own “Expand Abbreviation” implementation that can re-use these submodules with additional tweaks and transforms that matches your requirements.

The standard abbreviation expanding workflow:

  1. Parse Emmet abbreviationinto DOM-like tree.
  2. Prepare parsed tree for markup output. This step includes implicit name resolving (.itemdiv.item), item numbering (.item$*2.item1+.item2) and so on.
  3. Match tree nodes with predefined snippets. Snippets are basically another Emmet abbreviations that define element shape (name, attributes, self-closing etc.).
  4. Resolve variablesin parsed tree.
  5. Convert parsed abbreviation to formatted string using markup formatters.

Build targets

@emmetio/expand-abbreviationNPM module is available in two flavors: CommonJS and ES6 modules. There’s also a complete, zero-dependency UMD module suitable for browsers (see dist/expand-full.js).







  • 如何使expandoobject通过ASP.NET MVC JsonResult回来吗?

    TimDog(https://stackoverflow.com/users/199210/timdog)提出了一个问题:How to flatten an ExpandoObject returne...

    2 年前
  • sandwich-expando

    Installation: . Sandiwch Expando An Animated SandwichButton to X React Component example gif(./e...

    3 个月前
  • raml-jsonschema-expander

    Expands JSON Schema draft 4 references from a RAML object created with raml2obj. RAML JSON Schema E...

    1 年前
  • markdown-it-expand-tabs

    A markdownit plugin to replace leading tabs with spaces in code blocks markdownitexpandtabs A mar...

    1 年前
  • jss-plugin-expand

    JSS plugin that gives you a better syntax than CSS. jsspluginexpand Version(https://img.shields.i...

    3 个月前
  • jss-expand

    JSS plugin that gives you a better syntax than CSS. JSS plugin that gives you a better syntax than...

    1 年前
  • jquery-expander

    Expand and collapse HTML content Overview The Expander Plugin hides (collapses) a portion of an e...

    2 年前
  • jquery-expandable

    jqueryexpandable是什么 什么是jqueryexpandable,A jQuery plugin that autoexpands textareas to fit the cont...

    2 年前
  • jQuery UI Accordion Expand/Collapse All

    AlecRust(https://stackoverflow.com/users/312681/alecrust)提出了一个问题:jQuery UI Accordion Expand/Collapse...

    2 年前
  • glob-expand

    A sync glob / minimatch / RegExp function with a gruntjs like of patterns, with minimum depepndenci...

    2 年前


扫码加入 JavaScript 社区