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.
- 1.Open the "index.html" file in the "start" folder
- 2.Scaffold out a base HTML file
tab3 more times to place the cursor at the tab stop in the "title" attribute and entire "I Love Lamp"
tabonce more to enter the body of the page
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
headtag of the page, type
- 2.Enter "bulma.css". Bulma is included as a local file in the "start" project
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.
imgand press tab
- 3.Enter "logo.png" as the "src" of the image
- 4.Add a new line after the closing
.section>.columnsand press tab
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
enterto add a blank line
- 3.On that line, create the entirety of the second block of markup (Step 2)
4. Enter "Go" as the value for the
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
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"
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"
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
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.
<divwith a class of
sectionto a "section" element, instead of a "div".