Editor

Emmet

Expand abbreviations into HTML and CSS markup without leaving the keyboard.

Expanding abbreviations

In HTML, JSX/TSX, and CSS-family languages, type an Emmet abbreviation and press Tab (or expand it from the Command Palette). Examples:

div.card>h2+p becomes a card-shaped HTML fragment
m10 in a stylesheet becomes margin: 10px;

Profiles and languages

Emmet is on for a default set of languages. Use emmet.includeLanguages when you want abbreviations in a template language that is not covered yet, and emmet.excludeLanguages to turn it off where it gets in the way.

Custom snippets and syntax profiles

Point emmet.extensionsPath at one or more folders that contain Emmet snippets or syntaxProfiles files. When names collide, later paths win. That is a handy way to share a team snippet pack from the repo.

settings.json

{
  "emmet.extensionsPath": ["./emmet"]
}

Suggestions

emmet.showExpandedAbbreviation and related settings control whether Emmet expansions show up in the suggestion list as you type, only in markup and CSS files, or not at all.