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 trigger expansion from the Command Palette). Examples:

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

Profiles and languages

Emmet is enabled for a default set of languages. Adjust emmet.includeLanguages when you want abbreviations in a template language that isn't covered out of the box, 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 / syntaxProfiles files. Later paths override earlier ones when names collide — useful for sharing a team snippet pack from the repo.

settings.json

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

Suggestions

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