If You Use Visual Studio Code . Know these Shortcuts

Knowing Visual Studio code shortcuts will save you more time than you can imagine when writing your codes . Checkout some of these shortcuts you can try in order to save on time.

1. ID and Class Attributes

• Adding an Id attribute in an HTML tag
(div#info)

<div id="info"></div>

• Adding a class attribute to a html tag
(div.header)

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

• Adding an Id and a class attribute
(Form#.info)

<form action="" id="" class="info"></form>

• Adding multiple Id and class attributes
(p.info1.info2.info3.info4#info)

<p class="info1 info2 info3 info4" id="info"></p>

2.Item Numbering

• Adding an ordered number of class names to the child elements.
(ul>li.items$*5)

<ul>
    <li class="items1"></li>
    <li class="items2"></li>
    <li class="items3"></li>
    <li class="items4"></li>
    <li class="items5"></li>
</ul>

3.Child elements in the same class (Implicit Tag names )

(ul>.item)

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

             OR

(table>.row>.col*3)

<table>
    <tr class="row">
        <td class="col"></td>
        <td class="col"></td>
        <td class="col"></td>
    </tr>
</table>

4.Putting Into Groups

(div> (header>ul>li*2>a) +footer>p)

<div>
    <header>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </header>
    <footer>
        <p></p>
    </footer>
</div>

5.HTML tag with a text

(a{Google})

`<a href="https://www.google.com/">Google</a>`

6.Adding a HTML tag to another HTML tag (Siblings)

(div+sec+p)

<div></div>
<sec></sec>
<p></p>

7.Adding Child and Parent Elements

•Adding multiple child elements

(ul>li*)

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

•Adding child elements to the parent elements

(ul>li)

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