Most Useful Visual Studio Code Shortcuts To Improve Your Productivity
Tags: javascript, react, node, vscode
Published: 2021-09-25 07:06:22

Visual Studio Code is the most widely used and most loved code editor for application development.

So in this article, we will see some of the widely used shortcuts which make developers' life easy and coding faster. So let's get started.

## 1. Quickly Search File

### On Mac

`Cmd` + `P` : Search file by name

### On Windows

`Ctrl` + `P` : Search file by name

![find_file.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1632552240822/BK7fYMir2.gif)

## 2. Quickly Delete The Current Line

To delete the current line where the cursor is present, you can use the following shortcut.

### On Mac

`Cmd` + `X` : Delete current line

### On Windows

`Ctrl` + `X` : Delete current line

![delete_line.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1632552264989/tmLtoMXulg.gif)

## 3. Add Multiple Cursors for Text Selection

This is one of my favorite shortcuts. If you want to change the similar text at multiple places, then you can use the multiple cursors shortcut.

For that, first, manually select the text you want to replace or change and then press the following shortcuts depending on your operating system and then you can type anything that you want to add or replace with.

### On Mac

`Cmd` + `D` : Select next matching text

`Cmd` + `U` : Undo the last selected matching text

### On Windows

`Ctrl` + `D` : Select next matching text

`Ctrl` + `U` : Undo the last selected matching text

![multiple_cursors.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1632552282790/U1euOIuD3.gif)

## 4. Navigate Back and Forth Between the Files

To Goto any function or component, we do `Ctrl` + `Click` but later we can lose track of where we came from. Therefore, we can use the following shortcut to know where our cursor was last time.

This shortcut comes really handy when debugging code when jumping between the code.

### On Mac

`Ctrl` + `-` : navigate backward

`Ctrl` + `Shift` + `-` : navigate forward

### On Windows

`Alt` + `←`  :  navigate backward

`Alt` +  `→` : navigate forward

![move_back_forth.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1632552298738/rS4FvQsEZ.gif)

## 5. Toggle Sidebar

I like to code in full-screen mode in VS Code so there is less distraction.

You can easily toggle the sidebar using the following shortcut.

### On Mac

`Cmd` + `B` : Hide/Show Sidebar

### On Windows

`Ctrl` + `B` : Hide/Show Sidebar

![toggle_sidebar.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1632552320640/qM__PqsSk.gif)

This shortcut also comes in handy when comparing changes done in the file and cannot be seen clearly because of the small size window as shown below.

![toggle_compare.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1632552335373/zx3eyDID9.gif)

## 6. Open Integrated Terminal

Instead of opening a separate terminal/command prompt, using this shortcut, you can open a terminal that is integrated right into the VS Code.

This keyboard shortcut is the same for windows and Mac.

`Ctrl` + `: ( Ctrl + tilde character which is just before the digit 1 on the keyboard)

Once one terminal is opened, you can open another terminal by clicking the + sign.

![integrated_terminal.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1632552355227/jOjlV42Y-.gif)

The nice thing about opening an integrated terminal is that the terminal automatically opens in your project folder so you don't need to use the `cd` command to navigate to your project folder. 

## 7. Navigate to Specific Line Number In a File

If some error occurs in the application, you might see the filename along with the line number being displayed.

If the file is larger it's tedious to scroll up and down to go to a specific line. So instead you can use the following shortcut to directly go to that specific line.

This keyboard shortcut is the same for windows and Mac.

`Ctrl` + `G` - Go to specific line number

After pressing the above shortcut, a palette will open with `:` already added to it. Enter the line number you want to go to and hit enter to go directly to that line.

![goto_line.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1632552379336/Jgm5p-ueP.gif)

## 8. Search Text In All The Files

If you want to search for some text in all the files in the project, use the following shortcut.

### On Mac

`Cmd` + `Shift` + `F` : Search text in files

### On Windows

`Ctrl` + `Shift` + `F` : Search text in files

![find_all.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1632552397597/J4Fsbatd0.gif)

As you can see in the above Gif, we have clicked on the `Aa` icon, If we want to search for the exact match for the text.

## 9. Add or Remove Single Line Comment

Using this shortcut you can quickly add or remove the single-line comment.

### On Mac

`Cmd` + `/` :  Toggle the single-line comment

### On Windows

`Ctrl` + `/` : Toggle the single-line comment

![toggle_comment.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1632552418634/Fkw1o1U39.gif)

## 10. Quickly Move Lines Up And Down

Using this shortcut you can quickly move any line after or before any other line.

### On Mac

`Option` + `↓` :  Move line down

`Option` + `↑` :  Move line up

### On Windows

`Alt` + `↓` :  Move line down

`Alt` + `↑` :  Move line up

![move_line_up_down.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1632552451865/XI1VS5Y5G.gif)

## 11. Duplicate Lines

Using this shortcut you can quickly duplicate lines of code to avoid writing repetitive code.

### On Mac

`Option` + `Shift` + `↓` :  Duplicate line down

`Option` + `Shift` + `↑` :  Duplicate line up

### On Windows

`Shift` + `Alt` + `↓` :  Duplicate line down

`Shift` + `Alt` + `↑` :  Duplicate line up

![duplicate_lines.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1632552468313/FUzI1iA_0.gif)

## 12. Reopen Closed File/Tab

Sometimes by mistake, we close any open file or tab which so in that case, you can use this shortcut to re-open that closed tabs. You can keep pressing this shortcut until your desired file is not opened.

### On Mac

`Cmd` + `Shift` + `T` :  Re-open closed tab

### On Windows

`Ctrl` + `Shift` + `T` :  Re-open closed tab

![reopen_tab.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1632552490586/sgvlsfOiG.gif)

## 13. Quickly Get A List of Declarations And Functions In a File

This shortcut is the same for Windows and Mac and is really useful to find any function or declaration when the file contents are larger.

Just press `Ctrl` + `G` and remove the `:` and type @ and you will see the list of declarations and functions.

Then you can either type for quickly find the thing you want to navigate through the list using arrow keys.

![find_declarations.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1632552510708/JETFAuVT4.gif)

## 14. Find All Keyboard Shortcuts

In addition to the above shortcuts, VS Code has a lot of other shortcuts which you can see by following the below steps:

- Press `Ctrl` + `Shift` + `P` (Windows) or `Cmd` + `Shift` + `P` (Mac)
- Search for the `shortcut` text
- Select the menu `Preferences: Open Keyboard Shortcuts`

![shortcuts.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1632552531770/q_oVpVT0p.gif)

Here, you can see a list of all the available shortcuts and also edit the key binding for any of the shortcuts.

### Thanks for reading!

Check out my recently published [Mastering Redux](https://master-redux.yogeshchavan.dev/) course.

In this course, you will build 3 apps along with a food ordering app and you'll learn:

* Basic and advanced Redux
* How to manage the complex state of array and objects
* How to use multiple reducers to manage complex redux state
* How to debug Redux application
* How to use Redux in React using react-redux library to make your app reactive.
* How to use redux-thunk library to handle async API calls and much more

and then finally we'll build a complete [food ordering app](https://www.youtube.com/watch?v=2zaPDfCKAvM) from scratch with stripe integration for accepting payments and deploy it to the production.

[<img src="https://gist.github.com/myogeshchavan97/98ae4f4ead57fde8d47fcf7641220b72/raw/c3e4265df4396d639a7938a83bffd570130483b1/banner.jpg">](https://bit.ly/3w0DGum)

**Want to stay up to date with regular content regarding JavaScript, React, Node.js? [Follow me on LinkedIn](https://www.linkedin.com/in/yogesh-chavan97/).**

[<img src="https://cdn.buymeacoffee.com/buttons/default-yellow.png" >](https://www.buymeacoffee.com/myogeshchavan97)