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
Open the "index.html" file in the "start" folder
Scaffold out a base HTML file
Type
!
and presstab
Press
tab
3 more times to place the cursor at the tab stop in the "title" attribute and entire "I Love Lamp"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.
In the
head
tag of the page, typelink
and presstab
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.
Enter
.has-text-centered
and presstab
and thenenter
Enter
img
and press tabEnter "logo.png" as the "src" of the image
Add a new line after the closing
</div>
tagType
.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.
Place your cursor inside the div with a class of
columns
Press
enter
to add a blank lineOn 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)
Last updated