How to write less code using VS Code and Emmet

VS Code has a powerful feature built in called Emmet abbreviations. These abbreviations are based on Emmet

Here are some Emmet abbreviations to save you some time.

HTML5 boilerplate code:

VS Code has a Emmet abbreviation that generates the boilerplate HTML 5 code. This is super helpful as I can never ever remember this code.

The abbreviation is html:5

VS Code Emmet HTML 5 abbreviation

You can view the above VS Code Emmet abbreviation in action here

Referencing a stylesheet:

When adding a style sheet reference to your HTML page, can’t remember if a stylesheet references uses a style or rel tag? Never fear, VS Code has your back as it has an Emmet abbreviation for this too.

The abbreviation is link:css

VS Code Emmet style sheet link abbreviation

You can view the above VS Code Emmet abbreviation in action here

VS Code Emmet abbreviations also understand CSS selectors.

Nesting elements:

VS Code Emmet let’s you nest elements by using the Child combinator, also known as the > selector.

VS Code Emmet child combinator abbreviation

You can view the above VS Code Emmet abbreviation in action here

Placing elements next to each other:

VS Code Emmet lets you place elements next to one another or adjacent by using the adjacent sibling combinator:

VS Code Emmet adjacent sibling abbreviation

You can view the above VS Code Emmet abbreviation in action here

Creating multiple instances of an element:

If you know you are going to need 5 li elements inside a ul element, you can use the * (multiplication) Emmet abbreviation:

VS Code Emmet multiplication abbreviation

You can view the above VS Code Emmet abbreviation in action here

Creating more complex markup with VS Code Emmet:

If you want to create more complex markup you might need to use grouping by wrapping your elements with parenthesis:

VS Code Emmet complex markup using grouping

You can view the above VS Code Emmet abbreviation in action here

Adding CSS classes:

Tired of writing the class keyword on every element that needs a CSS class? You can use the CSS class selector syntax to add class-name(s):

VS Code Emmet adding a class to an element

You can view the above VS Code Emmet abbreviation in action here

Adding and Id to an element:

VS Code Emmet also supports the CSS ID selector, this allows you to add an ID to an element without having to type out the ID keyword:

VS Code Emmet CSS ID selector

You can view the above VS Code Emmet abbreviation in action here

Multiple CSS classes and adding attributes to elements:

VS Code Emmet also supports adding multiple class names on the same element, if you need to add multiple CSS class names to the same element separate each CSS class name by a period (.)

You can also add HTML attributes to an element by using the CSS attribute selector syntax ([attribute-name=”value”])

VS Code Emmet multiple class names and HTML attributes

You can view the above VS Code Emmet abbreviation in action here

Appending numerical values to CSS classes or ID’s:

VS Code Emmet can append numeric values to an element’s ID or class name based on the position relative to it’s parent, to generate numeric values append the $ (dollar) symbol after the class name.

VS Code Emmet append numeric values to CSS class name

You can view the above VS Code Emmet abbreviation in action here

Climbing up one level relative to the parent:

If you need to add an element outside the current element you can climb up a level by using the ^ symbol:

VS Code Emmet how to climb up a level

You can view the above VS Code Emmet abbreviation in action here

Generate lorem ipsum placeholder text with VS Code and Emmet:

If you need to generate placeholder text you can use the VS Code Emmet Lorem Ipsum place holder text abbreviation. You can also specify the amount of words you want to be generated by specifying the word count.

How to generate lorem ipsum placeholder text with VS Code and Emmet

You can view the above VS Code Emmet abbreviation in action here

Custom text:

If you need to specify custom text for your element you can wrap your custom text in braces ({}):

How to add custom text to HTML elements using VS Code Emmet

You can view the above VS Code Emmet abbreviation in action here

Creating custom Emmet abbreviations

VS Code supports custom Emmet abbreviations.

In your .vscode folder create a snippets.json file, add the following code:

{
   "html": {
      "snippets": {
      }
   }
}

Each custom Emmet abbreviation you add will be added beneath the “snippets” section, lets add some Bootstrap custom snippets:

Primary Alert:

"bs4-alert-primary": "div.alert.alert-primary[role='alert']"

Secondary Alert:

"bs4-alert-secondary": "div.alert.alert-secondary[role='alert']"

Primary Button:

"bs4-button-primary": "button[type='button'].btn.btn-primary"

Secondary Button:

"bs4-button-secondary": "button[type='button'].btn.btn-secondary"

Modal:

"bs4-modal": "div.modal[tabindex='-1']>div.modal-dialog>div.modal-content>(div.modal-header>(h5.modal-title>{$0})+button[type='button'].close[data-dismiss='modal'][aria-label='Close']>span[aria-hidden='true']>{×})+(div.modal-body>{$0})+div.modal-footer>(bs4-button-secondary[data-dismiss='modal']>{$0})+bs4-button-primary>{$0}"

You can follow along creating custom VS Code Emmet abbreviations here:

type less with VS Code and Emmet