Vaidotas Piekus

Posted on May 26, 2020

Get Faster - VSCode navigation without a mouse

#vscode #keyboard #productivity

Motivation

Why should you care about mouseless experience when VSCode is a GUI editor tuned to a great mouse experience? The answer is speed.
If you can do make tasks that you do every day but faster it will save you time and keep you in the "flow" longer. It is worth just looking through common default keybindings for VSCode and get a great view of what is possible and what is already available: MAC / Windows

However, the real value proposition is not to try and memorize dozens of keyboard shortcuts but to optimize the "hottest path" for your daily workflow. You want the least friction possible for things you do constantly and that means avoiding mouse/trackpad for most navigation and code editing. Let's dive in.

VSCode Navigation between panels, files, and tooltips

(1) Activity Bar

Depending on the number of extensions and settings your activity bar can look different than mine. All menus in Activity Bar can be reached with keyboard, however, we do not need to work on remembering that obscure extension you maybe use once a month. Let's focus on the most important ones:

File Explorer CMD+SHIFT+E - we use this all the time, navigate between files and explore project file tree structure. One annoyance of default VSCode behavior in File Explorer is when you have file highlighted and hit ENTER it defaults to renaming a file. If you want to open it instead (which is what I want almost 100% of the time) you have to use CMD+Down_Arrow. This is funky but worth remembering.
Project Search CMD+SHIFT+F - extremely helpful to find anything within your project, open it up, enter search string hit ENTER and you are good to go. If you want to jump down to results without a mouse, hit CMD+Down_Arrow and now you can navigate through the files in results.
Source Control CTRL+SHIFT+G. I typically just launch this panel with the keyboard but switch to interacting with the mouse as I like to click through the files, take a look at the changes and commit them right in the panel I find mouse be a little more useful but you can do everything with the keyboard too if you so wish.

Okay, now that we got those down you should never need to break away from your keyboard to launch File Explorer or search within your project!

(2) Navigation between your code, activity bar and terminal

These 3 sections of VSCode are definitely the most used and important for anybody's workflow. I jump around Activity Bar, edit my code and go over to the terminal to restart the server or do any other action all the time. It is very frustrating to keep cycling between these panels with the mouse just to do a quick command.

Focus Left Panel (can be anything from Activity Bar selections) CMD+0
Focus Middle Panel (open files) CMD+1 This technically focuses the first file that you have open, if you have another file opened in the split, you can do CMD+2 and just jump the second file you've got opened.
Show terminal CMD+J or CTRL+`. Notice that this only shows terminal. If we have it already opened and want to focus it, it does not seem that VSCode provides default keybinding for such action. We can define it ourselves. Open Command Palette CMD+SHIFT+P and type "keyboard" and select the one with the JSON "Open Keyboard Shortcuts (JSON)", now we can add any keybinding for any action. Here is what I have: ```

{ "key": "ctrl+l", "command": "workbench.action.terminal.focus" },
{ "key": "ctrl+l", "command": "workbench.action.focusActiveEditorGroup", "when": "terminalFocus" },

You can change that "key" string to whatever feels good, but the objective here is with these two settings you can cycle through editor focus and terminal focus with one keybinding. That is super nice!

**(3) Navigating within a file super fast**
Once you have a file that is opened it is tempting to reach for a mouse and start scrolling up and down the file to find the relevant spot in code or just to gauge the shape of the file. Here are a few key techniques to get you around any file with more efficiency:
  * `CMD+Up_Arrow/Down_Arrow` Jump to the beginning/end of the file. This is very useful when you need to quickly jump to the import section of the file or the export section which is usually at the end.
  * `CMD+SHIFT+O` Navigate between **symbols** within a file. This is the most useful command that nobody uses! It gives you a quick panel to cycle through function definitions/methods defined within a file.
![navigation](https://dev-to-uploads.s3.amazonaws.com/i/e7k17pvybh9f814u90cb.gif)
  * `CMD+F` Find in File. Very powerful and useful command. We all know how to use it but you can actually use this one to quickly jump to a certain section in the file. Say you have function called `adder` you hit `CMD+F` type `add` and with a quick ESC your cursor is already there, ready to edit. Handy!

---
That is it folks! General advice learning these keybindings is to start small, start wherever your "hottest path" is and try and optimize that a little to be more comfortable and faster. Don't try and do too much, memorize all the things, you will struggle to remember it all.

In Part2 of this series, we will be talking about fast code editing!
Let me know below your favorite shortcut and other tips and tricks you discovered.

Top comments (18)

Zigmas Slušnys • May 26 '20

I got used to navigating methods with shift+cmd+.
It opens all the methods within classes in file and let's you search. Most valuable thing for me honestly.

Andrea Barghigiani • May 27 '20

This is nice too, thanks for sharing!

Mikk Mangus • Jun 1 '20

I have my previous and forward set up the same way as in the browser which is super convenient and I could not do without it.

{
  "key": "cmd+[",
  "command": "workbench.action.navigateBack"
},
{
  "key": "cmd+]",
  "command": "workbench.action.navigateForward"
}

Igor Melo • Feb 18 '22

Isn't ctrl tab easier?
Or they are different stuff

Mikk Mangus • Feb 18 '22

The actions navigateBack and navigateForward are not about navigating between tabs, but within the code. I.e, if you open a file/function by Ctrl+clicking on it, you can "navigate back" :)

Igor Melo • Mar 2 '22

Oh, I see!
Its kinda of a cursor position history...
Very useful!

Waylon Walker • Jul 2 '20 • Edited

In my first ever dev post I posted my tips on getting around vscode without the mouse.

My favorites that were a bit hard to find at the time were getting in and out of the embedded terminal, and cycleing through terminal tabs and code tabs with the same hotkey.

I use these several times per minute all day. I'm constantly going to the terminal and back to the code.

These were all custom maps. Let me know what you think.

Keyboard Driven VSCode

Waylon Walker ・ Nov 19 '19 ・ 4 min read

#vscode

Bjarne Magnussen • May 27 '20

Coding in Golang and clicking "go to definition" a lot, for me the best shortcut is simply the "navigate back": stackoverflow.com/questions/354243...

David De Wulf • May 26 '20

Good tips! Thanks for sharing.
Do you know you can just hit the space bar to open your file instead of use CMD+Down_Arrow.?

Olgun S. • Aug 4 '22 • Edited

Hi. I just look for how to create new file and new folder without mouse and without go to terminal. When we do ctrl+shift+N in Windows, we are ready to change the cursor file name in the new folder and press enter to create the folder. I want to create a file or folder in the same way. But there is no such thing in VSC for some reason. Don't you think this is a useful and important thing?