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>
Enter fullscreen mode Exit fullscreen mode
  • Add ID and CLASS attr
form#search.info πŸ‘‡
<form id="search" class="info"></form>
Enter fullscreen mode Exit fullscreen mode
  • Add multiple CLASS and ID attr
p.info1.info2.info3#info
<p class="info1 info2 info3" id='info'></p>
Enter fullscreen mode Exit fullscreen mode
  1. ELEMENT WITH CHILD and MULTIPLICATION
  • Add child element to a parent element
ul>li πŸ‘‡
<ul>
    <li></li>
</ul>
Enter fullscreen mode Exit fullscreen mode
  • Add multiple child elements
ul>li*5 πŸ‘‡
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
Enter fullscreen mode Exit fullscreen mode
  1. ELEMENT with SIBLINGS
    • Add html element next to another
div+section+p πŸ‘‡
<div></div>
<section></section>
<p></p>
Enter fullscreen mode Exit fullscreen mode
  1. HTML tag with TEXT
a{Google} πŸ‘‡
<header> <a href="">Google</a> </header>
Enter fullscreen mode Exit fullscreen mode
  1. GROUPING
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>
Enter fullscreen mode Exit fullscreen mode
  1. IMPLICIT TAG NAMES
    • Adding multiple child element with same class
ul>.itemπŸ‘‡
<ul>
    <li class="item"></li>
</ul>
Enter fullscreen mode Exit fullscreen mode
table>.row>.col*3 πŸ‘‡
<table>
    <tr class="row">
        <td class="col"></td>
        <td class="col"></td>
        <td class="col"></td>
    </tr>
</table>
Enter fullscreen mode Exit fullscreen mode
  1. ITEM NUMBERING
  2. Adding numbered class names to child elements
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>
Enter fullscreen mode Exit fullscreen mode

Thank you for following✨

What other VSCODE shortcut can you suggest?
comment belowπŸ‘‡πŸ‘‡

Top comments (3)

Collapse
posandu profile image
Posandu |πŸ”₯|

These are not VSCode shortcuts, they are emmet snippets

Collapse
qbentil profile image
Bentil Shadrack Author

Thank you πŸ‘

Collapse
jonrandy profile image
Jon Randy • Edited on

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

🌚 Life is too short to browse without dark mode