loading...
Cover image for Get Faster - VSCode navigation without a mouse

Get Faster - VSCode navigation without a mouse

vaidotas profile image Vaidotas Piekus ・4 min read

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

VSCode 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
  • 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.

Discussion

markdown guide
 

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.

 

This is nice too, thanks for sharing!

 

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"
}
 

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.?

 

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

 

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.

 

A video demonstrating this would be awesome. Thanks.

 

Nice article. In my case, I think the CMD+SHIFT+E and CMD+SHIFT+O shortcuts are so handy.

 

+1 for the CMD+SHIFT+O shortcut, I was using the outline in sidebar so find this really useful 🎉

 

Looking for ratpoison. Someone please write this VSCode ext.

 

Thanks for the tips getting in the activity bar and out, as well as getting to the file explorer. I did not know of those and usually use a clunky control pallets command to get there.

 
 

Nice article -- this is also a good thing for people who have RSI flare ups when using a mouse.