DEV Community

loading...
Cover image for VS Code Keyboard Shortcuts

VS Code Keyboard Shortcuts

Jack Fisher
Hi, I'm a developer from Edinburgh, Scotland. Currently I am focusing on React and front-end development, but I also enjoy NodeJS on the back-end. Find me on Twitter @jckfshr ✌️
Originally published at blog.jackfisher.tech ・4 min read

If you’re anything like me then you might find yourself reaching for the mouse at every opportunity. But maybe you’ve been watching your favourite developers on YouTube and seeing how they navigate through their code using nothing but the keyboard. This was the situation I found myself in and I realised that I wanted to master the keyboard – so I took some time to learn the shortcuts. Apart from the obvious benefit of looking cool, relying less on the mouse and more on the keyboard is likely to increase your coding speed. As you know time is money, so let’s jump in and learn some of the best keyboard shortcuts for VS Code.

I’m only going to cover the shortcuts that I use the most, I’ve provided a cheat sheet at the bottom of this article that summarises the shortcuts I discuss in this article. If you’d like to see a full list of VS Code shortcuts, you can press CTRL + K followed by CTRL + S whilst in VS Code to bring up a list of all the shortcuts. If you just want to see my favourites then keep reading.

Comment out code block
WINDOWS: Highlight text + CTRL + /
MAC: Highlight text + ⌘ + /
The shortcut I love the most is to comment out large blocks of code quickly. This was one of the first shortcuts I learned because it really is the most useful. Commenting out code is an essential part of my debugging process, so I really couldn’t live without this one.


Indent code from right-to-left
WINDOWS: CTRL + [
MAC: ⌘ + [
Good code needs proper indentation, personally I like to use TAB to indent my code, but what happens when you indent too far and you want to move the code block in the other direction (from right to left). This is where CTRL [ comes in. I use this one less now that I have the Prettier extension which automatically formats my code but it’s still a useful one to know.


Highlight all code in the file
WINDOWS: CTRL + A
MAC: ⌘ + A
This is a nice and easy one to remember which is also extremely useful to know. Selecting all the text in a file at once can save you a lot of time if the file is quite large.


Highlight all code in that line
WINDOWS: CTRL + L
MAC: ⌘ + L
This is a quick way to highlight the line of code that your cursor currently sits on.


Move a line of code up or down
WINDOWS: Alt + UP/DOWN key
MAC: ⌥ + UP/DOWN key
I use this one a lot to rearrange the order of my lines of code. I mostly use it to move one line at a time but it can also move entire blocks of code if you highlight the text first.


Search all files in VS Code
WINDOWS: CTRL + SHIFT + F
MAC: ⇧ + ⌘ + F
This is a great one that I just recently learned. If you have a load of files and folders in VS Code and you are looking for something specific you can use this shortcut to quickly find it. I wish I had known about this one earlier.


Multi cursor on matching code
WINDOWS: Highlight text + CTRL + D
MAC: Highlight text + ⌘ + D
This one is great for updating the same variable name or class name throughout the entire code block or file. The command will place multiple cursors on code that matches the code you have highlighted, you can then edit them all at once.

Multi cursor
WINDOWS: Alt + Click
MAC: ⌥ + click
This one is cheating a little because it involves the mouse but it’s a useful shortcut so I’m including it anyway. It allows you to create multiple cursors wherever you want in the file.


Go to new file
WINDOWS: CTRL + P
MAC: ⌘+ P
This shortcut will bring up the dropdown menu with all your files so that you can quickly navigate to a new one. Definitely a good one to know


Navigate through your open files
WINDOWS: CTRL + Tab
MAC: ⌃ + Tab
This is an essential one to know if you are going to rely less on your mouse. Keep holding CTRL and hit Tab to navigate through each open file. Hitting SHFIT + Tab will go in the opposite direction.


Cheat Sheet

  • Highlight text + CTRL + / || Highlight text + ⌘ + / - comment out code block
  • CTRL + { || ⌘ + [ - indent code from right-to-left
  • CTRL + A || ⌘ + A – highlight all code in the file
  • CTRL + L || ⌘ + L – highlight all code in that line
  • Alt + UP/DOWN key || ⌥ + UP/DOWN key – move a line of code up or down
  • CTRL + SHIFT + F – || ⇧ + ⌘ + F - search all files in VS Code
  • Highlight text + CTRL + D || Highlight text + ⌘ + D – multi cursor on matching code
  • Alt + Click || ⌥ + click – multi cursor
  • CTRL + P || ⌘+ P – go to new file
  • CTRL + Tab || ⌃ + Tab – navigate through your open files

That covers all of the shortcuts I use on a regular basis. I’ve only scratched the surface of the shortcuts available and would love to hear more. What useful ones do you use that I haven't listed?

Discussion (10)

Collapse
emnudge profile image
EmNudge

Shift + TAB actually does the same thing as Ctrl + [
The actual useful shortcut is Ctrl + ], strangely enough

You see, if you're in the middle of a line and press TAB, you will break up the line, adding a TAB inside of it. Using Ctrl + ] will indent the entire line, no matter where your cursor is.

Ctrl + [ and Shift + TAB are functionally the same as far as I have seen, though.

Collapse
fishj123 profile image
Jack Fisher Author

Awesome I didn't know that and I'll definitely be using it in future so thanks for the heads up

Collapse
nickhuanca profile image
Nick Huanca

One more fun one is CTRL + SHIFT + P which provides a way to search all commands in VScode. Helpful for things like Discover Tests or in the go extension, Run Test At Cursor. It's nice for me since some of the commands/extension tooling can be challenging to find via the file-menu dropdowns.

Collapse
petersimnz profile image
Peter Sim

A shortcut that I frequently use is Ctrl-Shift-D to duplicate a line of code. I'm not sure whether this is in VS Code by default, or whether it's something that has made its way into my setup via Atom's key map. Anyhow, good article, thanks.

Collapse
sandeepbalachandran profile image
Sandeep Balachandran

It would be so much readable and wonderful if you'd use specifiers for shortcuts. You know TL:DR may occur. Just a suggestion . and ofcourse an informative article.

Collapse
fishj123 profile image
Jack Fisher Author

Could you give me an example so I know what you mean? I'm not sure I understand. Maybe then I can edit the article!

Collapse
loq24 profile image
Lougie

I think he meant syntax highlighter for the readers to easily identify the shortcut codes.

Collapse
dhatguy profile image
Joseph Odunsi

Thank you for this 👏

Collapse
fishj123 profile image
Jack Fisher Author

You're welcome 😊

Collapse
shayd16 profile image
Shayne Darren

After highlighting a world, use Ctrl + D to find the next occurrence, repeat to highlight all occurrences and then make the changes you want.