DEV Community

Cover image for Boost Your Productivity in VSCode with 16 shortcuts
oshell
oshell

Posted on • Edited on

Boost Your Productivity in VSCode with 16 shortcuts

When you code on a regular basis or even code for a living, it makes a lot of sense to get familiar with your IDE, and its shortcuts. Even better: customise your IDE to your needs.

Essential Shortcuts

To work effectively with any IDE, there are a few things you want to be able to do, without leaving the keyboard. In this article we will go over the most essential shortcuts for search, navigation and editing files.

Since default shortcuts are different on Windows and Mac, I will give you the Command name and my recommended shortcut in a nice formatted table, which you can use as cheat sheet. modifier in this context just means you could use anything like alt, ctrl, opt. You can search the commands under Settings > Keyboard Shortcuts and assign new Keybinding by double clicking. Furthermore I made some sample gifs, showing how it looks in action linked under each table.

You can also watch this short video and use the tables for later reference.

Search

Command Recommended Shortcut How to remember
Go to File... modifier+p search project file
Search: Find in Files modifier+shift+f search files in project
Find modifier+ f search in file
Go to Symbol in File... modifier+ s Go to symbol

The commands above help you quickly find a certain function in your code. If you know which file it is in, use modifier + p and jump to the file, then use symbol search modifier+s to jump to the function. If you do not know the file, search the whole project with modifier+shift+f.

See VSCode Search in Action

Navigation

Command Recommended Shortcut How to remember
View: Quick Open View modifier+1 Open View in 1st Panel
View: Open Previous Editor modifier+q sidestepping left with WASD controls
View: Open Next Editor modifier+e sidestepping right with WASD controls
View: Close Editor modifier+r remove current editor
View: Move Editor into directon Group modifier+m arrow key move current editor
View: Focus Editor into directon Group modifier+f arrow key focus editor
View: Toggle Integrated Terminal modifier+t focus terminal
Go to Line... modifier+L Go to Line
cursorWordEndRight/cursorWordStartLeft modifier+Arrow Key -

See VSCode Navigation in Action

With the above commands you can quickly focus any of the side bars with modifier+1 and jump back to editing by opening a file or using modifier+f Arrow Key to focus one of the Editor Groups again. You split the editor view by using modifier+m Arrow Key and move focus between editors using modifier+f Arrow Key. Within each editor you can jump between open files using modifier+q and modifier+e. You can then use previously mentioned symbol search or modifier+L to jump to a certain line. Within any line you move the cursor using cursorWordEndRight/cursorWordStartLeft. Using modifier+t you can focus the terminal to run your application or run any test commands.

Editing

Command Recommended Shortcut How to remember
Add Selection To Next Find Match modifier+n select next occurrence
Move Line Down/Up modifier+Arrow Key -
Expand/Shrink Selection modifier+ shift Arrow Key -

See VSCode Editing in Action

The modifier+n helps you with refactoring and multi-cursor editing. With Move Line Down/Up you can move certain lines or complete code blocks. The Expand/Shrink Selection is quite smart and helps you selecting complete codes of block, before moving/replacing them.

Top comments (0)