Visual Studio Code and its magic
Tags: tips, vscode
Published: 2019-03-03 21:52:18

---
title: Visual Studio Code and its magic
published: true
description: Some Shortcuts for you to use and a wonderful extension. 🙂
tags: tips,VS Code
cover_image: https://thepracticaldev.s3.amazonaws.com/i/vh62klblthw1dwpmopb5.jpg
---
Hello, I am Madhav Gupta(someone who's been using VS Code for a long time sufficient to fall in love with it) and I'd like to walk you through the amazing world of shortcuts in VS Code and a wonderful extension.

We all love studio code, don't we? (*talking about those who use it*)

At my starting point, I always wondered how the tutor was able to move a selection up without moving the mouse, copy a whole selection and move it down simultaneously. Turns out these were the key shortcuts who were the *culprits* all along.

So coming on to the point,
Being a developer, you sure know one thing that mouse is **wicked** for you. You should be familiar with most of the key shortcuts available in your editor. 

While there are so many shortcuts available in the editor, I will be listing some of the shortcuts I use the most. As a side note, you can find the full list of keyboard shortcuts [here][shortcuts].
These are for **windows users**, so please excuse me if you use any other OS.

Here's a table for the shortcuts and what they do.

<table>
<thead>
<tr>
<th align="left">Keyboard Shortcut</th>
<th align="left">Their effects</th>
</tr>
</thead>
<tbody>
<tr>
<td align="left">Alt+ ↑ / ↓</td>
<td align="left">Move your selection up or down</td>
</tr>
<tr>
<td align="left">Shift+Alt + ↓ / ↑</td>
<td align="left">Copy your selection and move it up or down</td>
</tr>
<tr>
<td align="left">Ctrl+ ] / [</td>
<td align="left">Indent/Outdent Line(move your selection left or right,in simple words)</td>
</tr>
<tr>
<td align="left">Ctrl+Shift+\</td>
<td align="left">Jump to matching bracket</td>
</tr>
<tr>
<td align="left">Ctrl+↑ / ↓</td>
<td align="left">Scroll your selection UP or Down</td>
</tr>
<tr>
<td align="left">Ctrl+/</td>
<td align="left"><strong>Toggle comment (uncomment a selection if commented &amp; vice versa)</strong></td>
</tr>
</tbody>
</table>

While these are shortcuts which I tend to use most of the times, Some of the honorable mentions are,
<table>
<thead>
<tr>
<th align="left">Keyboard Shortcut</th>
<th align="left">Their effects</th>
</tr>
</thead>
<tbody>
<tr>
<td align="left">Ctrl+Space</td>
<td align="left">Shows you all the recommendations when coding/Trigger suggestion</td>
</tr>
<tr>
<td align="left">Ctrl+. (Credits- Michael De Abreu)</td>
<td align="left">Quick fix</td>
</tr>
<tr>
<td align="left">Ctrl+P(Credits- Đào Tuấn)</td>
<td align="left">Open any file in your root folder</td>
</tr>
<tr>
<td align="left">Ctrl+F</td>
<td align="left">Find</td>
</tr>
<tr>
<td align="left">Ctrl + H</td>
<td align="left">Replace</td>
</tr>
<tr>
<td align="left">F11</td>
<td align="left">Toggle Full Screen</td>
</tr>
<tr>
<td align="left">F5</td>
<td align="left">Start debugging</td>
</tr>
<tr>
<td align="left">F9</td>
<td align="left">Toggle Breakpoint</td>
</tr>
<tr>
<td align="left">Ctrl+Shift+T</td>
<td align="left">Reopen closed editor</td>
</tr>
</tbody>
</table>

- So these were some of the most used keyboard shortcuts, besides Ctrl+C & Ctrl+V of course 😀😀
- If you knew them all and use them, Congratulations. Be sure to share some of the shortcuts which you use all the time in comments.

Now, let's talk about the extension.

The name of the extension is [JavaScript (ES6) code snippets][link to extension]

People who use it know the power of this extension. As the name depicts, this extension provides you code snippets with some shortcuts and you can use them by hitting TAB or ENTER.
<table>
<thead>
<tr>
<th align="left">Shortcut</th>
<th align="left">What it becomes into</th>
</tr>
</thead>
<tbody>
<tr>
<td align="left">clg</td>
<td align="left">console.log()</td>
</tr>
<tr>
<td align="left">thenc</td>
<td align="left">Then and catch chained <code>.then((res) =&gt; {}).catch((err) =&gt; {});</code></td>
</tr>
<tr>
<td align="left">imp</td>
<td align="left">imports entire module</td>
</tr>
<tr>
<td align="left">rqr</td>
<td align="left">Require</td>
</tr>
<tr>
<td align="left">mde</td>
<td align="left">module.exports()</td>
</tr>
<tr>
<td align="left">con</td>
<td align="left">adds default constructor in the class <code>constructor() {}</code></td>
</tr>
<tr>
<td align="left">fre</td>
<td align="left">forEach loop in ES6 syntax <code>array.forEach(currentItem =&gt; {})</code></td>
</tr>
</tbody>
</table>

So, that's it for today. *Pheww*, writing my first post was not that tough.
I'll be back with more posts( Thinking to write a guide on markdown) and one more thing, No hate on other editors, Just use what fits you.
Hope you like it. Have a great day. Thanks.
**Edit** : grammatical fix

![](https://media.giphy.com/media/1d7F9xyq6j7C1ojbC5/giphy.gif)

[shortcuts]: https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf
[link to extension]: https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets