30 Keyboard Shortcuts to Turbocharge Your Team’s Engineering Velocity
By: Mitch Posk
Tags: Shortcuts, Shortcut Keys, Web Development, Software Development

Visual Studio Code

Navigation

cmd + b is a shortcut to open or close the workbench sidebar. We do this about a million times a day, so the time it saves can add up quickly. But not only can we do it faster, we can do it better, too! By moving the sidebar to the right, you can keep your code from jumping all over the screen when it opens, and therefore maintain better flow and focus.

Text remains in place with the Side Bar positioned on the right

For the uninitiated, use cmd + shift + p to open the command palette, and type “toggle sidebar position” to switch sides.

If you already know what you need from the sidebar, why bother opening it at all?

command + shift + e opens the file explorer

opens the file explorer command + shift + f opens the search tab

opens the search tab ctrl + shift + g opens the source control tab

opens the source control tab command + shift + d opens the debugger

opens the debugger command + shift + x opens the extensions tab

To open and close the terminal panel, you can control + ` , and command + \ opens a new panel in either the terminal panel or the text editor.

command + shift + f searches text in the entire project, while command + p searches for filenames within the project.

Text Editing

Many developers are familiar with multiple cursors, and that command + d can select multiple instances of the same string of text. However, less well known is the fact that you can skip the next matching instance with command + k , or that you can cut to the chase and select all instances of a particular string with command + shift + l .

highlight/skip the same word to edit desired instances at the same time

f2 renames all ‘symbols’ across files, but only affects linked symbols. For example, if I want to rename a component that is referenced in several parent components, I can highlight the component, press f2 and type the new name I want, and it will update everywhere that component is imported as well (you just have to save those files since they are changed). If there is another element with the same name in another file, it will not be updated.

option + up/down will move the selected line of code (or highlighted block) up and down.

highlight block + { will wrap the highlighted block in {}. You can also use this for [] and for ().

Wrapping text in {}

Chrome Dev Tools

f12 opens dev tools (remember, if you have a touch bar, you will need to hold down the fn key to see those function keys).

cmd + shift + p switches between tabs (network, sources, etc). There are also a number of commands that you can run with this shortcut (eg dock to bottom/left/etc ) — and you can see if there is an existing shortcut for that command on the righthand side of the results.

Dev Tools shortcut to navigate tabs/run other commands

cmd + option + → lets you use the left and right arrow keys to navigate between tabs. This also works for switching tabs within VSCode.

cmd + l to focus on the browser URL.

cmd + shift + t open the last closed tab (press again to open the next one, etc..).

Slack

cmd + k quickly jump to DM or channel.

cmd + shift + k search DMs.

cmd + shift + t search threads.

cmd + shift + m search mentions and reactions.

cmd [ to go back in history ( cmd ] to go forward in history).