Skip to content
TyrnBeta

Emmet

Emmet turns short abbreviations such as ul>li*3 into full markup. In Tyrn it comes from the Emmet extension, which provides an Emmet language server.

Install

  1. Open the Extensions view with cmd-shift-x.
  2. Search for Emmet.
  3. Click Install.

See Languages for more on extensions.

Use it

Type an abbreviation in a file of a language the extension supports, such as HTML, CSS or JSX. Emmet suggestions appear in the completions menu. Accept one to expand it.

Tailwind CSS also offers Emmet completions in the files where it runs. See Tailwind CSS.

Wrap with an abbreviation

The Wrap With Abbreviation action wraps the selection in markup you describe. It has no default key. Run editor: wrap with abbreviation from the command palette, or bind it:

keymap.json
[
  {
    "context": "Editor && mode == full",
    "bindings": { "ctrl-alt-w": "editor::WrapWithAbbreviation" }
  }
]

Select some text, press the key, and type an abbreviation such as div.card>p.

Turn it off for a language

Add the server with ! to a language’s language_servers:

settings.json
{
  "languages": {
    "Elixir": { "language_servers": ["!emmet-language-server", "..."] }
  }
}