• Version 2.3.5
  • Published
  • 751 kB
  • 2 dependencies
  • MIT license


npm i emmet
yarn add emmet
pnpm add emmet


Emmet — the essential toolkit for web-developers



function expandAbbreviation

expandAbbreviation: (abbr: string, config?: UserConfig) => string;

    function extract

    extract: (
    line: string,
    pos?: number,
    options?: Partial<ExtractOptions>
    ) => ExtractedAbbreviation | undefined;
    • Extracts Emmet abbreviation from given string. The goal of this module is to extract abbreviation from current editor’s line, e.g. like this: <span>.foo[title=bar|]</span> -> .foo[title=bar], where | is a current caret position.

      Parameter line

      A text line where abbreviation should be expanded

      Parameter pos

      Caret position in line. If not given, uses end of line

      Parameter options

      Extracting options

    function markup

    markup: (abbr: string | Abbreviation, config: Config) => string;
    • Expands given *markup* abbreviation (e.g. regular Emmet abbreviation that produces structured output like HTML) and outputs it according to options provided in config

    function parseMarkup

    parseMarkup: (abbr: string | Abbreviation, config: Config) => Abbreviation;
    • Parses given Emmet abbreviation into a final abbreviation tree with all required transformations applied

    function parseStylesheet

    parseStylesheet: (
    abbr: string | CSSAbbreviation,
    config: Config
    ) => CSSAbbreviation;
    • Parses given Emmet abbreviation into a final abbreviation tree with all required transformations applied

    function parseStylesheetSnippets

    parseStylesheetSnippets: (snippets: SnippetsMap) => CSSSnippet[];
    • Converts given raw snippets into internal snippets representation

    function resolveConfig

    resolveConfig: (config?: UserConfig, globals?: GlobalConfig) => Config;

      function stringifyMarkup

      stringifyMarkup: (abbr: Abbreviation, config: Config) => string;
      • Converts given abbreviation to string according to provided config

      function stringifyStylesheet

      stringifyStylesheet: (abbr: CSSAbbreviation, config: Config) => string;

        function stylesheet

        stylesheet: (abbr: string | CSSAbbreviation, config: Config) => string;
        • Expands given *stylesheet* abbreviation (a special Emmet abbreviation designed for stylesheet languages like CSS, SASS etc.) and outputs it according to options provided in config


        interface AbbreviationContext

        interface AbbreviationContext {}

          property attributes

          attributes?: {
          [name: string]: string | null;

            property name

            name: string;

              interface ExtractedAbbreviation

              interface ExtractedAbbreviation {}

                property abbreviation

                abbreviation: string;
                • Extracted abbreviation

                property end

                end: number;
                • End location of extracted abbreviation

                property location

                location: number;
                • Location of abbreviation in input string

                property start

                start: number;
                • Start location of matched abbreviation, including prefix

                interface ExtractOptions

                interface ExtractOptions {}

                  property lookAhead

                  lookAhead: boolean;
                  • Allow parser to look ahead of pos index for searching of missing abbreviation parts. Most editors automatically inserts closing braces for [, { and (, which will most likely be right after current caret position. So in order to properly expand abbreviation, user must explicitly move caret right after auto-inserted braces. With this option enabled, parser will search for closing braces right after pos. Default is true

                  property prefix

                  prefix: string;
                  • A string that should precede abbreviation in order to make it successfully extracted. If given, the abbreviation will be extracted from the nearest prefix occurrence.

                  property type

                  type: SyntaxType;
                  • Type of context syntax of expanded abbreviation. In 'stylesheet' syntax, brackets [] and {} are not supported thus not extracted.

                  interface GlobalConfig

                  interface GlobalConfig {}
                  • Raw config which contains per-syntax options. markup and syntax keys are reserved for global settings for all markup and stylesheet syntaxes

                  index signature

                  [syntax: string]: Partial<BaseConfig>;

                    interface Options

                    interface Options {}

                      property 'bem.element'

                      'bem.element': string;
                      • A string for separating elements in output class

                      property 'bem.enabled'

                      'bem.enabled': boolean;
                      • Enable/disable BEM addon

                      property 'bem.modifier'

                      'bem.modifier': string;
                      • A string for separating modifiers in output class

                      property 'comment.after'

                      'comment.after': string;
                      • Template string for comment to be placed *after* closing tag. Example: \n<!-- /[#ID][.CLASS] -->

                      property 'comment.before'

                      'comment.before': string;
                      • Template string for comment to be placed *before* opening tag

                      property 'comment.enabled'

                      'comment.enabled': boolean;
                      • Enable/disable element commenting: generate comments before open and/or after close tag

                      property 'comment.trigger'

                      'comment.trigger': string[];
                      • Attributes that should trigger node commenting on specific node, if commenting is enabled

                      property 'jsx.enabled'

                      'jsx.enabled': boolean;
                      • Enable/disable JSX addon

                      property 'markup.href'

                      'markup.href': boolean;
                      • Automatically update value of element's href attribute if inserting URL or email

                      property 'output.attributeCase'

                      'output.attributeCase': StringCase;
                      • Attribute name case: lower, upper or '' (keep as-is)

                      property 'output.attributeQuotes'

                      'output.attributeQuotes': 'single' | 'double';
                      • Attribute value quotes: 'single' or 'double'

                      property 'output.baseIndent'

                      'output.baseIndent': string;
                      • A string for base indent, e.g. context indentation which will be added for every generated line

                      property 'output.booleanAttributes'

                      'output.booleanAttributes': string[];
                      • A list of boolean attributes

                      property 'output.compactBoolean'

                      'output.compactBoolean': boolean;
                      • Produce compact notation of boolean attributes: attributes which doesn’t have value. With this option enabled, outputs <div contenteditable> instead of <div contenteditable="contenteditable">

                      property 'output.field'

                      'output.field': FieldOutput;
                      • A function that takes field index and optional placeholder and returns a string field (tabstop) for host editor. For example, a TextMate-style field is $index or ${index:placeholder}

                        Parameter index

                        Field index

                        Parameter placeholder

                        Field placeholder (default value), if any

                        Parameter offset

                        Current character offset from the beginning of generated content

                        Parameter line

                        Current line of generated output

                        Parameter column

                        Current column in line

                      property 'output.format'

                      'output.format': boolean;
                      • Enable output formatting (indentation and line breaks)

                      property 'output.formatForce'

                      'output.formatForce': string[];
                      • A list of tag names that should *always* get inner indentation.

                      property 'output.formatLeafNode'

                      'output.formatLeafNode': boolean;
                      • When enabled, automatically adds inner line breaks for leaf (e.g. without children) nodes

                      property 'output.formatSkip'

                      'output.formatSkip': string[];
                      • A list of tag names that should not get inner indentation

                      property 'output.indent'

                      'output.indent': string;
                      • A string for one level indent

                      property 'output.inlineBreak'

                      'output.inlineBreak': number;
                      • How many inline sibling elements should force line break for each tag. Set to 0 to output all inline elements without formatting. Set to 1 to output all inline elements with formatting (same as block-level).

                      property 'output.newline'

                      'output.newline': string;
                      • A string to use as a new line

                      property 'output.reverseAttributes'

                      'output.reverseAttributes': boolean;
                      • Reverses attribute merging directions when resolving snippets

                      property 'output.selfClosingStyle'

                      'output.selfClosingStyle': 'html' | 'xml' | 'xhtml';
                      • Style of self-closing tags: html (<br>), xml (<br/>) or xhtml (<br />)

                      property 'output.tagCase'

                      'output.tagCase': StringCase;
                      • Tag case: lower, upper or '' (keep as-is)

                      property 'output.text'

                      'output.text': TextOutput;
                      • A function for processing text chunk passed to OutputStream. May be used by editor for escaping characters, if necessary

                      property 'stylesheet.after'

                      'stylesheet.after': string;
                      • A string after property value

                      property 'stylesheet.between'

                      'stylesheet.between': string;
                      • A string between property name and value

                      property 'stylesheet.floatUnit'

                      'stylesheet.floatUnit': string;
                      • A unit suffix to output by default after float values, 'em' by default

                      property 'stylesheet.fuzzySearchMinScore'

                      'stylesheet.fuzzySearchMinScore': number;
                      • A float number between 0 and 1 to pick fuzzy-matched abbreviations. Lower value will pick more abbreviations (and less accurate)

                      property 'stylesheet.intUnit'

                      'stylesheet.intUnit': string;
                      • A unit suffix to output by default after integer values, 'px' by default

                      property 'stylesheet.json'

                      'stylesheet.json': boolean;
                      • Output abbreviation as JSON object properties (for CSS-in-JS syntaxes)

                      property 'stylesheet.jsonDoubleQuotes'

                      'stylesheet.jsonDoubleQuotes': boolean;
                      • Use double quotes for JSON values

                      property 'stylesheet.keywords'

                      'stylesheet.keywords': string[];
                      • List of globally available keywords for properties

                      property 'stylesheet.shortHex'

                      'stylesheet.shortHex': boolean;
                      • Use short hex notation where possible, e.g. #000 instead of #000000

                      property 'stylesheet.unitAliases'

                      'stylesheet.unitAliases': SnippetsMap;
                      • Aliases for custom units in abbreviation. For example, r: 'rem' will output 10rem for abbreviation 10r

                      property 'stylesheet.unitless'

                      'stylesheet.unitless': string[];
                      • List of unitless properties, e.g. properties where numeric values without explicit unit will be outputted as is, without default value

                      property inlineElements

                      inlineElements: string[];
                      • A list of inline-level elements


                      enum CSSAbbreviationScope

                      const enum CSSAbbreviationScope {
                      Global = '@@global',
                      Section = '@@section',
                      Property = '@@property',
                      Value = '@@value',

                        member Global

                        Global = '@@global'
                        • Include all possible snippets in match

                        member Property

                        Property = '@@property'
                        • Include properties only in abbreviation match

                        member Section

                        Section = '@@section'
                        • Include raw snippets only (e.g. no properties) in abbreviation match

                        member Value

                        Value = '@@value'
                        • Resolve abbreviation in context of CSS property value

                        Type Aliases

                        type Config

                        type Config = ResolvedConfig & {
                        options: Options;

                          type SyntaxType

                          type SyntaxType = 'markup' | 'stylesheet';

                            type UserConfig

                            type UserConfig = Partial<ResolvedConfig>;

                              Package Files (6)

                              Dependencies (2)

                              Dev Dependencies (10)

                              Peer Dependencies (0)

                              No peer dependencies.


                              To add a badge like this onejsDocs.io badgeto your package's README, use the codes available below.

                              You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/emmet.

                              • Markdown
                              • HTML
                                <a href="https://www.jsdocs.io/package/emmet"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>