Creating HTML with Emmet

Web developers spend a lot of their time composing HTML. There is a feature built-in to VS Code called "Emmet". Emmet helps you to quickly create markup, styles and even provides some neat utilities for automating various routine tasks.

Create HTML boilerplate

1. Open the "index.html" file in the "start" folder

2. Scaffold out a base HTML file

   1. Type ! and press tab

3. Press tab 3 more times to place the cursor at the tab stop in the "title" attribute and entire "I Love Lamp"

4. Press tab once more to enter the body of the page

Include the Bulma CSS framework

Bulma is a great little CSS framework. We're going to use it to help us position all of the elements on the page.

1. In the head tag of the page, type link and press tab

2. Enter "bulma.css". Bulma is included as a local file in the "start" project

Add some markup

You'll see two sections of markup that are commented out - Step 1 and Step 2. You'll need to create these blocks with Emmet.

1. Enter .has-text-centered and press tab and then enter

2. Enter img and press tab

3. Enter "logo.png" as the "src" of the image

4. Add a new line after the closing </div> tag

5. Type .section>.columns and press tab

Add more markup

In the previous exercise, you created HTML by using Emmet in short spurts. This is how you will most often use. However, you can create larger blocks of markup in one go. In this example, we'll create another section of markup all in one line.

1. Place your cursor inside the div with a class of columns

2. Press enter to add a blank line

3. On that line, create the entirety of the second block of markup (Step 2)

(.column.is-10>#colorInput.input.is-large)+(.column>a#goButton.button.is-primary.is-large)

Note that sometimes, if your Emmet is complex enough, VS Code might not recognize the expansion and nothing will happen when you hit tab. To force VS Code to expand your Emmet, make sure your cursor is just after the last character on the line. Press Ctrl + Space and hit Enter.

4. Enter "Go" as the value for the a element

Wrap all the markup in a container element

It's common to need to wrap a block of markup in some tag. The most common way of doing this is to hold down shift to select all the lines you need, cut them, create the new tag and then paste the contents inside. It can be done quicker with Emmet.

Emmet has a feature called "Balance Outward". What it does is select all of the markup surrounding your cursor and it selects it at the opening/closing tag level. The more times you execute it, the farther out it goes. I map this to a keyboard shortcut of Ctrl + Shift + Down Arrow

For this exercise, you will be selecting all the markup, and then wrapping it all in a div tag.

To select all the markup...

• Put your cursor anywhere inside

• Open the Comman Palette (Cmd/Ctrl + Shift + P) and select "Emmet: Balance Outward" (or use your keyboard shortcut if you created one)

• Repeat this until you have select all of the markup inside the body tag

You can wrap anything in a tag with Emmet by using the "Wrap with abbreviation" command.

• Open the Command Palette (Cmd/Ctrl + Shift+ P)

• Select "Emmet: Wrap with abbreviation"

• Type #app.container

• Press enter

Formatting

At this point, your markup may look pretty wonky. VS Code comes with an HTML formatter. I have included one in the extension pack called "Prettier". To format the document...

• Open the Command Palette (Cmd/Ctrl + Shift + P)

• Select "Format Document"

If VS Code tells you there are multiple formatters and asks which one you want to use, select "Prettier"

You won't want to manually format the document every time you save it, so I've included an extension in the VS Code Can Do That extension pack which will toggle on Auto-Format on Save. This means that whenever you save a document, VS Code will format it.

• Open the Command Palette(Cmd/Ctrl + Shift + P)

• Select "Toggle Format on Save"

• Formatting is now enabled whenever you save the document

Renaming tags

Another thing you will do quite often is to change the tag of an element. This is tricky because you need to change the opening and closing tags at the same time. VS Code does not do this out of the box.

The "Auto Close Tag" extension in the VS Code Can Do That extension pack will update the closing tag whenever you update the opening one.

Change the <div with a class of section to a "section" element, instead of a "div".

Note that this can also be done in Emmet. Place your cursor anywhere on the same line as the tag you want to update and Select "Update Tag" from the Command Palette (Cmd/Ctrl + Shift + P)