How to Use Emmet in VS Code for HTML and CSS

· Category: VS Code & Developer Tools

Short answer

Emmet is a built-in toolkit in VS Code that expands abbreviations into full HTML and CSS code. It helps you write markup faster with CSS-selector-like syntax.

Steps

  1. Open an HTML file and type an abbreviation like ul>li*5.
  2. Press Tab or Enter to expand it into a list with five items.
  3. For CSS, type m10 and press Tab to expand to margin: 10px;.
  4. Use ! followed by Tab to generate a complete HTML5 boilerplate.
  5. Customize Emmet preferences in settings.json under emmet.*.

Tips

  • Emmet works in JSX, Vue, and other templating languages with proper configuration.
  • You can add custom snippets via snippets.json.
  • Use grouping () and numbering $ for complex structures.

Common issues

  • Emmet may not expand if the file language mode is not set correctly.
  • Conflicting extensions can override the Tab key behavior.