Emmet

Emmet is a web-developer’s toolkit for boosting HTML & CSS code writing. With Emmet, you can type expressions ( abbreviations ) similar to CSS selectors and convert them into code fragment with a single keystroke. For example, this abbreviation: This repo contains only core module for parsing and expanding Emmet abbreviations. Editor plugins are available as separate repos. This is a monorepo : top-level project contains all the code required for converting abbreviation into code fragment while ./packages folder contains modules for parsing abbreviations into AST and can be used independently (for example, as lexer for syntax highlighting). By default, Emmet expands markup abbreviation, e.g. abbreviation used for producing nested elements with attributes (like HTML, XML, HAML etc.). If you want to expand stylesheet abbreviation, you should pass it as a type property of second argument: A stylesheet abbreviation has slightly different syntax compared to markup one: it doesn’t support nesting and attributes but allows embedded values in element name. You can pass options property as well to shape-up final output or enable/disable various features. See src/config.ts for more info and available options. A common workflow with Emmet is to type abbreviation somewhere in source code and then expand it with editor action. To support such workflow, abbreviations must be properly extracted from source code: E.g. caret location is not at the end of abbreviation and must be moved a few characters ahead. The extract function is able to handle such cases with lookAhead option (enabled by default). This this option enabled, extract method automatically detects auto-inserted characters and adjusts location, which will be available as end property of the returned result: By default, extract tries to detect markup abbreviations (see above). stylesheet abbreviations has slightly different syntax so in order to extract abbreviations for stylesheet syntaxes like CSS, you should pass type: 'stylesheet' option: Lots of developers uses React (or similar) library for writing UI code which mixes JS and XML (JSX) in the same source code. Since any Latin word can be used as Emmet abbreviation, writing JSX code with Emmet becomes pain since it will interfere with native editor snippets and distract user with false positive abbreviation matches for variable names, methods etc.: A possible solution for this problem it to use prefix for abbreviation: abbreviation can be successfully extracted only if its preceded with given prefix.