DEV Community

Cover image for Most Useful Visual Studio Code Shortcuts To Improve Your Productivity
Yogesh Chavan
Yogesh Chavan

Posted on • Originally published at blog.yogeshchavan.dev

Most Useful Visual Studio Code Shortcuts To Improve Your Productivity

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 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 from scratch with stripe integration for accepting payments and deploy it to the production.

Want to stay up to date with regular content regarding JavaScript, React, Node.js? Follow me on LinkedIn.

Discussion (23)

Collapse
dimitarpramatarov profile image
Dimitar Pramatarov

Crtl + x delete the line , also same in copied.

Collapse
myogeshchavan97 profile image
Yogesh Chavan Author

Yes, it's actually performs the cut operation. Thanks for mentioning it.

Collapse
khorne07 profile image
Khorne07

I was about to mention that. Actually to delete a line the command is
Ctrl + Shift + K.
By the way, thanks for sharing 👌

Thread Thread
myogeshchavan97 profile image
Yogesh Chavan Author

You're right. But it requires extra key press but instead ctrl + x does the same work and is quicker.

Thread Thread
khorne07 profile image
Khorne07

Absolutely yes. In the end depends on if you need to keep previous copied staffs on the clipboard or not.

Collapse
ash_bergs profile image
Ash

As someone who just transitioned from a Windows machine to a Mac... this post couldn't have come at a better time. Thank you for the write up! 🤖

Collapse
myogeshchavan97 profile image
Yogesh Chavan Author

Glad to hear that this post was helpful to you. Thank you 🙂

Collapse
josefine profile image
Josefine Schfr

So helpful - Thanks for putting this together! :)

Collapse
myogeshchavan97 profile image
Yogesh Chavan Author

Glad you found it helpful 🙂

Collapse
robsonmuniz16 profile image
Robson Muniz

Hey DEV,
Most Useful Visual Studio Code Shortcuts To Improve Your Productivity?
🤩Wow, Great content!!
I just 💜loved it.
Thanks for sharing it!🙏

Collapse
myogeshchavan97 profile image
Yogesh Chavan Author

Glad you liked it. Thank you

Collapse
mentoraliu profile image
Mentori

you forgot "Ctrl+/" to comment a line instantly, also "alt+shift+f" to format your code

Collapse
myogeshchavan97 profile image
Yogesh Chavan Author • Edited

Hi @mentoraliu , thanks for reading. I have already included the comment shortcut. You might have missed it.

I don't use shortcut to format code but I use prettier VS Code extension which formats code automatically when the file is saved.

Check out my this article to understand how to do it.

Collapse
kaleemclarkson profile image
Kaleem Clarkson

Wow! The open and close tab on left is a game changer 👏🏾🙏🏾🙌🏾

Collapse
myogeshchavan97 profile image
Yogesh Chavan Author

Thank you @kaleemclarkson 🙂

Collapse
sachinchaurasiya profile image
Sachin Chaurasiya

Thank you @myogeshchavan97 for sharing this.

Collapse
myogeshchavan97 profile image
Yogesh Chavan Author

Thanks @sachinchaurasiya 🙂

Collapse
amircahyadi profile image
Amir-cahyadi

Useful great 👍

Collapse
myogeshchavan97 profile image
Yogesh Chavan Author

Thank you 🙂

Collapse
prabhukadode profile image
Prabhu

Nice

Collapse
myogeshchavan97 profile image
Yogesh Chavan Author

Thank you 🙂

Collapse
shriyastout profile image
ShriyaStout

how to determine tech career path? Dua To Put Love in Someone's Heart

Collapse
williamastatine profile image
William Astatine

I prefer vim key bindings!