• Version 2.4.7
  • Published
  • 932 kB
  • 2 dependencies
  • MIT license


npm i emmet
yarn add emmet
pnpm add emmet


Emmet — the essential toolkit for web-developers



variable CSSAbbreviationScope

const CSSAbbreviationScope: {
readonly Global: '@@global';
readonly Section: '@@section';
readonly Property: '@@property';
readonly Value: '@@value';


    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.attributes'

                        'markup.attributes'?: Record<string, string>;
                        • Attribute name mapping. Can be used to change attribute names for output. For example, class -> className in JSX. If a key ends with *, this value will be used for multi-attributes: currentry, it’s a class and id since multiple marker is added for shorthand attributes only. Example: { "class*": "styleName" }

                        property 'markup.href'

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

                        property 'markup.valuePrefix'

                        'markup.valuePrefix'?: Record<string, string>;
                        • Prefixes for attribute values. If specified, a value is treated as prefix for object notation and automatically converts attribute value into expression if jsx is enabled. Same as in markup.attributes option, a * can be used.

                        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

                        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>