Topic 3D: Emmet: Commands

View Possible Emmet Commands

Emmet extends far beyond basic abbreviation expansion—it's a comprehensive toolkit that can transform your HTML and CSS workflow. Understanding the full scope of available commands is essential for maximizing your productivity in modern development environments.

1. Hit Cmd–Shift–P (Mac) or Ctrl–Shift–P (Windows) to open the Command Palette.
2. Type Emmet to see a complete list of available features. Each command displays its corresponding keyboard shortcut on the right side when available, giving you immediate insight into the most efficient ways to access frequently used functions.

Enabling Keystrokes for Emmet Commands

While Emmet ships with several default keyboard shortcuts, many of its most powerful features remain unassigned to preserve your editor's keybinding space. Professional developers often customize these shortcuts based on their specific workflow patterns. Here's how to create custom keyboard shortcuts for the Emmet commands you use most frequently:

1. In Visual Studio Code, access the keyboard shortcuts preferences:

   • Mac users: Navigate to Code menu → Preferences → Keyboard Shortcuts.
   • Windows users: Navigate to File menu → Preferences → Keyboard Shortcuts.
2. In the search field, type the specific feature name you want to customize, or type Emmet to browse all available commands and identify workflow opportunities.
3. Double-click on your desired feature to enter keybinding mode.

4. Press your preferred key combination, then hit Return to confirm.

   NOTE: Visual Studio Code will immediately alert you if your chosen combination conflicts with existing shortcuts, helping you avoid workflow disruptions.

5. Close the Keyboard Shortcuts tab to return to your editor.

Now let's explore some of Emmet's most valuable commands that can dramatically improve your coding efficiency.

Emmet: Wrap with Abbreviation

The ability to wrap existing code with new HTML elements is fundamental to efficient front-end development. This feature becomes particularly valuable during refactoring sessions or when adding semantic structure to existing markup. We recommend assigning Option–W (Mac) or Alt–W (Windows) for quick access to this essential function.

1. Select the code you want to wrap. For optimal results, select from the beginning to the end of your target content, excluding any leading or trailing whitespace that might interfere with proper nesting.
2. Press Option–W (Mac) or Alt–W (Windows). A command input panel will appear at the top of your editor window.

3. Enter an Emmet abbreviation for your desired wrapper element. For example, type .container to wrap your selection in a div with class "container", or section.hero to create a semantic section element with a hero class.

   NOTE: The preview updates in real-time as you type, allowing you to verify the generated markup before committing the change.

4. Press Return (Mac) or Enter (Windows) to apply the wrapper, or Esc to cancel the operation.

Emmet: Remove Tag

During development and refactoring, you'll frequently need to remove HTML elements while preserving their content. This command provides a surgical approach to element removal without the tedious manual selection of opening and closing tags.

1. Position your cursor anywhere within the tag you want to remove—either in the opening tag, closing tag, or within the element's content.
2. Access the Command Palette and execute Emmet: Remove Tag.

This command intelligently handles both container elements with closing tags and self-closing elements like img, br, or input tags, making it universally applicable across different HTML structures.

Emmet: Update Image Size

Manually determining and entering image dimensions is both time-consuming and error-prone. Emmet's image size detection automatically reads file dimensions and updates your markup, ensuring accuracy while saving valuable development time.

1. Click anywhere within an img tag that lacks width and height attributes (such as <img src="img/logo.png">) or contains incorrect dimensional values.
2. Execute Emmet: Update Image Size from the Command Palette.

The command automatically reads the actual image file dimensions and updates your HTML with the correct width and height attributes, which is particularly valuable for optimizing layout shift performance in modern web applications.

Emmet: Evaluate Math Expression

While it might seem like a minor feature, Emmet's mathematical evaluation capability proves surprisingly useful for CSS calculations, responsive design breakpoints, and quick dimensional adjustments during development.

1. Select a mathematical expression such as 158/2, 1920*0.75, or 16*1.5.
2. Execute Emmet: Evaluate Math Expression from the Command Palette.

The selected expression will be instantly replaced with the calculated result, streamlining workflows that involve proportional calculations or unit conversions commonly required in responsive design work.