programming

11 VSCode Shortcuts You Should be Using

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><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.

Recent Posts

The DRY Concept (Don’t Repeat Yourself)

You know that thing you do? Where you copy a chunk of code, paste it…

5 hours ago

What Truly Makes a Great Software Developer

We've all seen them. The developers who seem to effortlessly untangle complex problems, whose code…

3 days ago

How to Filter Vulgar Words in React Native

If you're building a social, chat, or comment-based mobile app using React Native, protecting your…

1 week ago

How to Build Faster Mobile Apps With Native Wind Library

The Cross-Platform ImperativeLet's face it: building separate iOS and Android apps wastes resources. React Native…

2 weeks ago

The Surprisingly Simple Secret to Getting Things Done

We live in an age of infinite distraction and overwhelming ambition. Grand goals shimmer on…

2 weeks ago

How to Create Reusable Components in React JS

Reusable components are modular UI building blocks designed for versatility. Instead of writing duplicate code…

2 weeks ago