Shortcuts can make or break a developer’s productivity. It also turns out that Visual Studio Code comes with a pre-baked shorthand that lets you print out HTML code templates. This feature is mostly unknown to many beginner (and even veteran) users of VS Code. This is partly because we become complacent to just typing everything out manually.

If you’re a frontend developer, these shorthand syntaxes should save you a ton of time and make your code tighter from the get-go. All you have to do is boot up your VS Code editor and type out the shorthand you want.

ID and Class Attributes

You can create an id by using the # symbol with the attribute you want to create. For example:

div#header

Will generate:

<div id="header"></div>

If you want a class, use the . instead. For example:

div.header

Will generate:

<div class="header"></div>

What if you want both an id and a class together? You can mix and match using both the # and . symbols. For example:

div#nav.dark

This will generate:

<div id="nav" class="dark"></div>

If you want multiple classes, just chain them together like this:

p.highlight.green

This will generate:

<p class="highlight green"></p>

Multiplication

What if you want multiple elements printed? This is where the * sign comes in. The simplest way to remember it is that you are multiplying the element you want to print.

For example:

li*2

Will print:

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

If you want it to nest under another element, use the > symbol. The > will turn whatever follows into a child. For example:

ul>li*2

This will print:

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

Making siblings

What if you want to make multiple elements at once? This is where siblings come in. All you have to do is use the + sign. For example:

div+h1+p

This will create:

<div></div>
<h1></h1>
<p></p>

Adding text

Let’s say you want to add some text whilst using this shorthand in Visual Studio Code. All you have to do is use the curly braces {} to surround the text you want.

For example:

p{trallalalala}

Will create:

<p>trallalalala</p>

Grouping

What if you want to create a bunch of elements in one go and include everything mentioned above in some form? This is where () comes in.

Whatever () pair surrounds is counted as a group and gets nested accordingly. For example:

div>(nav>ul>li*3>a.blue)+div.body+footer.dark

Will create the following:

<div>  
    <nav>     
        <ul>      
            <li><a href="" class="blue"></a></li>      
            <li><a href="" class="blue"></a></li>      
            <li><a href="" class="blue"></a></li>      
        </ul>   
    </nav>
    <div class="body"></div>
    <footer class="dark"></footer>
</div>

Implicit tag names

When it comes to construction HTML documents, there are certain patterns that are simply expected. For example, a ul will always have li as a child. You can shorthand implicit tags in Visual Studio like this:

ul>.someclass

This will print the following:

<ul>   
    <li class="someclass"></li>
</ul>

Item numbering

When it comes to shorthand in VS Code, you can do simple numeric logic. For example, if you want a class to be named and incremented automatically, you can use the $* combination to achieve this. For example:

ul>li.list-item-$*3

The above will print:

<ul>   
    <li class="list-item-1"></li>   
    <li class="list-item-2"></li>   
    <li class="list-item-3"></li>
</ul>

Wrap up

That’s basically it. It doesn’t matter if you’re working with React, Angular, Vue, or any kind of frontend library or framework, you’re going to encounter HTML in some form or another.

Typing everything out by hand is a tedious process and can be prone to errors, especially when it comes to siblings and nesting. These shorthand tricks don’t require any additional installations or add-ons to work — they just do.