Introduction
The first step to becoming a good developer is to understand your text editor. Like many, I use VSCode and over the years I have discovered features that I failed to realize even existed. These features have improved my productivity and my confidence as a developer. As such, I am obliged to share, in this post, the hotkeys that have improved my editing experience the most.
The first two categories of hotkeys I will introduce are Command and Navigation. The command palette is an important tool because it allows you to explore the full range of possibilities that exist in the editor. Likewise, navigation is important because it helps you dig into a codebase and follow links between dependencies easily. However, the deeper you go, the more important it is to know how to navigate back to where you came from. The Editing category is all about maximizing keyboard usage efficiency and avoiding unnecessary usage of the mouse. Getting your cursor in the right position or selecting blocks of text are examples of keyboard usage efficiency.
Command Palette
Keyboard Shortcut: Ctrl+Shift+P
The command palette is like Google in your browser; it lets you discover what is possible in your editor. When you open the command palette, you will notice the search bar is prefixed with >. This is how VSCode knows you are inputting a command. If you remove the >, it becomes a search engine for any files in your current working directory.
Reload Window
The first command I will introduce is Reload Window. This handy when your terminal freezes or when an extension that requires a reload is updated; Its less work than manually closing VSCode and reopening it. Another reason is the interoperability between Linux machines and NVIDIA graphics cards. From my experience, whenever my computer wakes up from sleep, the integrated terminal becomes corrupted with visual artifacts. There are two ways of fixing this: kill all your terminals or reload the window; I choose the latter option.
The second command is Format Document. I rarely use this command when I'm programming because I have Format on Save turned on. When trying to debug, it comes in handy. The most common use-case is when I want to read the minified JSON printed in terminal. To do this, I create a new file, paste the minified JSON, set the language to JSON, and run the Format Document.
Similarly, the third command is Save without Formatting. This command is useful when you are working on a team with a repository that is riddled with linter and formatting errors. Assuming you have Format on Save turned on, saving any file in this repository would create a large Git diff; its courtesy for small changes to have small diffs. Leave the formatting for a separate, isolated PR.
Navigation
Go to Definition
Keyboard Shortcut: F12
Go to Definition is your bread and butter for navigation. Use this when you are integrating with third party libraries. Being able to inspect the function definition and type declaration is essential because it gives you a better understanding about how the library was designed to be used. My biggest qualm with Go To Defintion is getting stuck in a ditch because I'm using the command recursively. Its easy to get lost because its so hard to retrace through all the new files that were opened. The key discovery to overcome this is the Go Back operation.
Go Back/Forward
Keyboard Shortcut: CTRL+ALT+➖/CTRL+ALT+➕
Go Back is self explanatory, it lets you go back after a navigation command. What I despise about Go Back is when you have the same file opened in two split panes, the Go Back operation refocuses the window on the wrong pane. What I expect is for it to go back to the pane I called Go To Definition in. Go Forward is the same story but in reverse.
Control Arrow Keys / Home / End
Keyboard Shortcuts:
CTRL+ALT+LEFT_ARROW,CTRL+ALT+RIGHT_ARROW, HOME, END
I'm sure you've seen somebody who just holds down the arrow key on their keyboard and waits for the cursor to move to the right spot. That is extremely inefficient and wasteful. Jump between words and delimiters using Control Arrow Keys. If the distance is too far, use the Home and End buttons to your advantage.
Editing
Cut
Keyboard Shortcut: Ctrl+X
I use the cut hotkey to delete lines more often than to actually cut and paste text. This is because you can cut a line if you have nothing selected under your cursor. I find this to be more effective than the delete line hotkey because there are less bindings I need to remember, CTRL+X is simple to build into muscle memory, and you always have the option of repasting the line.
Column Select
Keyboard Shortcut: ALT+DOWN_ARROW/ALT+UP_ARROW
Column select is necessary when you are trying to select lines that have the same column delimiter or prefix. This video shows how I column selected in front of import, used Control Arrow Keys to select it all and replaced it with a require statement.
Add Current Word To Selection
Keyboard Shortcut: Ctrl+W
Add Current Word To Selection is useful when you want to select the word thats under your cursor quickly. Often times I use this to delete the word or use it to pre-fill a Find (CTRL+F) command.
Conclusion
These are all the hotkeys you need to be an effective and quick developer. Checkout the video below for a combination of most of them. 😉
