Emmet 148,459 turns a CSS-selector-like abbreviation into markup. It is built into VS Code 550 with no extension (and exists as a plugin for most other editors): type an abbreviation in an HTML, JSX or CSS file and press Tab. ! alone expands to a full HTML5 boilerplate with charset, viewport and <title>.
| Abbreviation | Expands to |
|---|---|
| nav>ul>li*3>a[href=#]{Item $} | A nav list of three links: Item 1, Item 2, Item 3 |
| div.card>h2.title+p | <div class="card"> holding <h2 class="title"> then <p> |
| ul>li.item$$*2 | Two <li> elements with classes item01, item02 |
| (header>nav)+main+footer | Grouping: header (with nav), main and footer as siblings |
| p>lorem8 | A paragraph of 8 placeholder words |
| m10-20 / df (CSS) | margin: 10px 20px; / display: flex; |
Emmet: Wrap with Abbreviation in the Command Palette wraps a selection: select three lines, enter ul>li*, and each line becomes its own list item. The engine is the open-source emmetio/emmet (https://github.com/emmetio/emmet 4,541 ) package, which you can also call from Node as expand("ul>li*3").