Finding an alternative and, at the same time, accelerated way of performing both simple and complex actions as a software developer can be rewarding. And with VSCode shortcuts, we are not disappointed.
With an invocation of just a few keystrokes, you can increase your productivity and significantly reduce the time taken for your project development.
Here are 11 VSCode shortcuts you can start using right away:
1. ID And Class Attributes
div#header
<div id="header"></div>div.header
<div class="header"></div>form#search.size
<form id="search" class="size"></form>p.class1.class2.class3
<p class="class1 class2 class3"></p>2. Text
a{Submit}
<a href="">Submit</a>3. Sibling
div+p+a
<div></div>
<p></p>
<a></a>4. Child
nav>ul>li
<nav>
<ul>
<li></li>
</ul>
</nav>5. Multiplication
ul>li*2
<ul>
<li></li>
<li></li>
</ul>6. Numbering Items
ul>li.item$*6
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
<li class="item6"></li>
</ul>7. Grouping Tags
main>(header>ul>li*3>a)+footer>img
<main>
<header>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</header>
<footer>
<img src="" />
</footer>
</main>8. Implicit Tag Names
ul>.class
<ul>
<li class="class"></li>
</ul>table>.row>.col
<table>
<tr class="row">
<td class="col"></td>
</tr>
</table>9. Comments
For Windows: CTRL + ?
For Mac: COMMAND + ?
10. Duplicate Code Line
Windows: SHIFT + CTRL + DownArrrow
For Mac: SHIFT + COMMAND + DownArrow
11. Create New Terminal Instance
Windows: CTRL+SHIFT+`
Mac: COMMAND+SHIFT+`
Conclusion
It is true that shortcuts may not always be the best way to do things, but these VSCode shortcuts will help improve both the speed and accuracy of your work. Don’t worry if you don’t remember all of them once. With constant use, you will get used them.
Kene Samuel