Code The Pixel

Using Emmet in VS Code

Asyraf Wahi Anuar - October 29, 2024
Published in Blog 128 Views Email This Article
Estimated reading time: 57 seconds

Using Emmet in Visual Studio Code is a great way to speed up your HTML and CSS workflow! Here’s a quick guide to get you started:

  1. Open a new HTML or CSS file: Start by creating or opening an existing file in VS Code.
  2. Type an Emmet abbreviation: Emmet abbreviations are shorthand codes that expand into full HTML or CSS code. For example, typing div and pressing Tab will expand to <div></div>.
  3. Use the Tab key: Press Tab to expand abbreviations. You can also use Enter to insert the expanded code.
  4. Wrap text with tags: Select the text you want to wrap, press Ctrl + Shift + P (or Cmd + Shift + P on macOS) to open the Command Palette, type "Wrap with" and select "Emmet: Wrap with Abbreviation".
  5. Customize Emmet settings: You can customize Emmet settings in your settings.json file. For example, to trigger expansion on Tab, add "emmet.triggerExpansionOnTab": true.

Emmet supports a wide range of abbreviations and snippets, making it a powerful tool for quickly writing and formatting code. Give it a try and see how it can streamline your coding process!


Cite this article (APA 6th Edition)