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