Using Emmet Plugin/Extension To Write Codes Faster

Emmet is a free add-on for your text editor that allows you to type shortcuts that are then expanded into full pieces of code. By using Emmet, email designers type less, saving both keystrokes and time. It gives you some default abbreviations for a range of file types including .html and .css which expand into useful code snippets. Emmet support is built into VS Code so it does not require downloading an extension.

Here are some shortcuts you would find useful

1) Creating the HTML boilerplate for any project

By default, once the emmet extension is enabled, typing the ! button and clicking the enter button in an HTML document would auto-generate the boilerplate shown in the image above.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=a, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>

2) Creating a nav with a list

Typing nav>ul>li would generate the for a nav menu

<nav>
    <ul>
        <li></li>
    </ul>
</nav>

3) Creating Multiple Elements with Multiplication

When trying to create an element with more than one content, we use the multiplication* button. Typing li*5 would generate the code for creating multiple list items depending on the amount of numbers it is multiplied by

<li></li>
<li></li>
<li></li>
<li></li>
<li></li>

4) Numbering item's

In order to list items, we make use of $ while combining with multiplication. h$[title=item$]{Header $}*3 the 3 tells it to create just 3.

<h1 title="item1">Header 1</h1>
<h2 title="item2">Header 2</h2>
<h3 title="item3">Header 3</h3>

5) Creating siblings

We use the addition sign + when trying to create siblings div+p+bq

<div></div>
<p></p>
<blockquote></blockquote>

I hope you find this useful, if you have any questions kindly ask in the comment section.

Husmarn's Blog

Husmarn's Blog

Using Emmet Plugin/Extension To Write Codes Faster