Skip to main content
Dan Rodney/3 min read

Topic 3D: Emmet: Commands

Build a Web Page

1

Mark Up Structure

Semantic HTML first — header, nav, main, footer.

2

Style Layout

Flexbox for one-dimensional, Grid for two-dimensional layouts.

3

Style Components

Buttons, cards, forms — reusable design system pieces.

4

Responsive Tweaks

Media queries for tablet and mobile breakpoints.

Master HTML & CSS at Noble Desktop

Noble Desktop's Full-Stack Web Development Certificate teaches HTML, CSS, and JavaScript — the complete front-end foundation.

Dive into our comprehensive guide on using Emmet, covering topics from viewing possible commands and enabling keystrokes to wrapping with abbreviations and evaluating mathematical expressions.

View Possible Emmet Commands

Emmet isn’t only about expanding abbreviations, it has additional features.

  1. Hit Cmd–Shift–P (Mac) or CTRL–Shift–P (Windows) to open the Command Palette.
  2. Type Emmet to see a list of features (the corresponding keystroke is shown on the right if has one).

Enabling Keystrokes for Emmet Commands

Emmet’s numerous features do not all have keystroke assigned by default. If you find an Emmet feature that you use a lot and you’d like to have a keyboard shortcut, here’s how to set up a keystroke for it:

  1. In Visual Studio Code do the following:

    • Mac users: Go into the Code menu and choose Preferences > Keyboard Shortcuts.
    • Windows users: Go into the File menu and choose Preferences > Keyboard Shortcuts.
  2. In the search field type in the feature’s name (or type Emmet to see all its features).
  3. Double–click on the desired feature.

  4. Press your desired keystroke, then hit Return.

    NOTE: It will warn you if there are other features already using that keystroke.

  5. You’re done, so close the Keyboard Shortcuts tab.

Emmet: Wrap with Abbreviation

Wrapping a tag around a selection is such a common task. In the Before You Begin section near the start of this book are instructions for assigning our preferred keystroke for this: Option–W (Mac) or ALT–W (Windows). Here’s how to use it:

  1. Select some code. For best results select from the start to end of the code, without including whitespace before or after.
  2. Hit Option–W (Mac) or ALT–W (Windows) and a panel will appear at the top the window.

  3. Type in an abbreviation for a tag, class, etc. For example, type .container to wrap something in a div with a container class.

    NOTE: As you type the abbreviation you’ll see the new code to confirm it’s working.

  4. Hit Return (Mac) or Enter (Windows) to finish (or hit Esc to cancel).

Emmet: Remove Tag

Emmet can remove a tag but keep its contents.

  1. Place your cursor in a tag you want to remove (or somewhere in the content within the tag).
  2. Use the Command Palette to find the Emmet: Remove Tag command.

This also works on elements that don’t have end tags (like an img tag).

Emmet: Update Image Size

Emmet can look up the size of an image file for you.

  1. Click anywhere in an img tag that does not have width or height attributes (such as <img src="img/logo.png">) or an img tag that has the wrong width and height.
  2. Use the Command Palette to find the Emmet: Update Image Size command.

Emmet: Evaluation Math Expression

Emmet can do math for you.

  1. Select some math such as 158/2
  2. Use the Command Palette to find Emmet: Evaluation Math Expression.