Contents
  1. 1. Quickly Generate an HTML Structure
  2. 2. Quickly Generate CSS Styles
  3. 3. Format Code

Emmet was formerly known as Zen Coding. It uses abbreviations to speed up HTML/CSS coding, and VS Code has built-in support for it.

1. Quickly Generate an HTML Structure

  • To generate a tag, simply enter the tag name and press the tab key. For example, enter div and then press the tab key to generate <div></div>
  • To generate multiple identical tags, append *. For example, div*3 quickly generates three div tags
  • For tags with a parent-child relationship, use >, for example, ul > li
  • For tags with a sibling relationship, use +, for example, div+p
  • To generate a tag with a class name or id, enter .demo or #two directly, then press the tab key. For example, div.banner
  • If the generated div class names need to be sequential, use the auto-increment symbol $, for example, div.demo$*5
  • To add content inside the generated tag, use {}biaoshi

2. Quickly Generate CSS Styles

CSS abbreviations can be formed from the first letter of each word:

For example, enter ti2em and press tab to generate text-indent: 2em;

For example, enter w200 and press tab to generate width: 200px;

3. Format Code

By default, VS Code formats code when you save. If it is not formatted automatically, configure it as follows:

[New version]:

Open File-Preferences-Settings, search for format, and enable automatic formatting on save.

[Old version]:

Open: File->Preferences->Settings

Search for: emmet.include

Add the following statements under [User] in setting.json

"editor.formatOnType":true,
"editor.formatOnSave":true,

Once configured, the document will be formatted whenever you save it.

You can also format the document manually: right-click-Format Document, or press Shift+Alt+F