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.
This exercise is excerpted from Noble Desktop’s front-end web development (Emmet coding tips) training materials and is compatible with updates through 2022. To continue learning web development with hands-on training, check out our coding bootcamps in NYC and live online.
View Possible Emmet Commands
Emmet isn’t only about expanding abbreviations, it has additional features.
- Hit Cmd–Shift–P (Mac) or CTRL–Shift–P (Windows) to open the Command Palette.
- 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:
-
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.
- In the search field type in the feature’s name (or type Emmet to see all its features).
- Double–click on the desired feature.
-
Press your desired keystroke, then hit Return.
NOTE: It will warn you if there are other features already using that keystroke.
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:
- Select some code. For best results select from the start to end of the code, without including whitespace before or after.
- Hit Option–W (Mac) or ALT–W (Windows) and a panel will appear at the top the window.
-
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.
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.
- Place your cursor in a tag you want to remove (or somewhere in the content within the tag).
- 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.
- 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. - Use the Command Palette to find the Emmet: Update Image Size command.
Emmet: Evaluation Math Expression
Emmet can do math for you.
- Select some math such as 158/2
- Use the Command Palette to find Emmet: Evaluation Math Expression.
