Useful Shortcuts For Web Developer Using VS Code

Hello! 👋 folks, today i want to share some useful shortcuts for web developers using VS code. Using this built in smart features we can minimize time for development and increase productivity. By using this no need to type same code snippets manually again & again. Let's dive into!

ID and Class Attributes

To generate code snippets just type the syntax you want for example div#header and press Tab it automatically generate <div id='header'></div> for you.

div#header
    <div id='header'></div>

div.header
    <div class='header'></div>

form#search.wide
    <form id='search' class='wide'></form>

p.class1.class2.class3
    <p class='class1 class2 class 3'></p>

Multiplication

ul>li*2
<ul>
   <li></li>
   <li></li>
</ul>

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>

Child

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

Siblings

div+p+a
<div></div>
<p></p>
<a href=""></a>

Text

a{Click me}
<a href="">Click me</a>

Implicit Tag Names

ul>.class

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

table>.row>.col

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

Item numbering

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>

Did you find it helpful, let me know in comments below or follow me on Twitter