DEV Community

Bentil Shadrack
Bentil Shadrack

Posted on • Updated on

7️⃣ VSCODE Shortcuts for Developers you should know Thread🧵

  1. ID and CLASS Attributes
  • Add ID attr html tag
div#info 👇
<div id="info"></div>
Enter fullscreen mode Exit fullscreen mode
  • Add a CLASS attr to html tag
div.header 👇
<div class="header"></div>
```


 - Add ID and CLASS attr


```html
form#search.info 👇
<form id="search" class="info"></form>
```


 - Add multiple CLASS and ID attr


```html
p.info1.info2.info3#info
<p class="info1 info2 info3" id='info'></p>
```



2.  ELEMENT WITH CHILD and MULTIPLICATION

  - Add child element to a parent element


````html
ul>li 👇
<ul>
    <li></li>
</ul>
```



 - Add multiple child elements


```html
ul>li*5 👇
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
```



3.  ELEMENT with SIBLINGS
 - Add html element next to another


```html
div+section+p 👇
<div></div>
<section></section>
<p></p>
```



4. HTML tag with TEXT


```html
a{Google} 👇
<header> <a href="">Google</a> </header>
```



5.  GROUPING


```html
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>
```



6. IMPLICIT TAG NAMES
 - Adding multiple child element with same class


```html
ul>.item👇
<ul>
    <li class="item"></li>
</ul>
```




```html
table>.row>.col*3 👇
<table>
    <tr class="row">
        <td class="col"></td>
        <td class="col"></td>
        <td class="col"></td>
    </tr>
</table>
```



7. ITEM NUMBERING
- Adding numbered class names to child elements


```html
ul>li.item$*5
<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
</ul>
```



##Thank you for following✨
What other VSCODE shortcut can you suggest? 
comment below👇👇
Enter fullscreen mode Exit fullscreen mode

Top comments (3)

Collapse
 
posandu profile image
Posandu

These are not VSCode shortcuts, they are emmet snippets

Collapse
 
qbentil profile image
Bentil Shadrack

Thank you 👍

Collapse
 
jonrandy profile image
Jon Randy 🎖️ • Edited

Yup... Emmet has been around longer than VS Code - and is available in many IDEs