VS Code Shortcuts to Boost Productivity
Published on
Efficiency is key for engineers, mastering keyboard shortcuts in Visual Studio Code can save valuable time and allow more time focusing on problem solving. Instead of navigating through menus, the right shortcuts let you code faster, refactor seamlessly, and stay focused. In this guide, we’ll cover essential shortcuts in a TypeScript setting that will streamline your workflow and boost your productivity.
IntelliSense Code Completions
Most the time you'll probably use code completions whilst typing but sometimes it can be quicker to manually trigger it to quickly get a property or parameter value. On both MacOS and Windows the shortcut is Ctrl+Space.
Code Snippets
This isn't necessarily a shortcut but I wanted to included it because it can save a lot of time when entering repeating code patterns. Code snippets are essentially templates that are created by you or the community to make entering repeating code patterns such as loops or conditional statements much faster. You may have noticed them before when the intellisense code completions popup menu shows, they can be identified with the square icon. I frequently write TypeScript so I commonly make use of the built in JavaScript snippets, an ES7 + React extension and some custom Jest snippets. I highly recommend the Snippets user guide on Visual Studio Codes documentation if you want to get started with this one!
Rename Symbol
This shorcut allows you to rename the function or variable your cursor is on. It will rename its definition and all of its references. On both MacOS and Windows the shortcut is F2.
Fast Imports with Quick Fix
Manually importing variables and functions can be time consuming, thankfully with the quick fix feature this becomes a lot quicker. When your cursor is on a line with an error or warning you can activate it with ⌘+. on MacOS or Ctrl+. on Windows. Be sure to fact check the import suggestions if you're dealing with a larger codebase that could have multiple definitions for the same variable or function. In these larger environments it may initially give you the wrong suggestion!
Refactoring
This feature allows you to move the highlighted code into a reusable variable or function. It can come in handy if you tend to just hack the code together initially then refactor and polish it before pushing it to your remote branch and getting peer reviews. On MacOS the shortcut is ⌘+⇧+R and for Windows they are Ctrl+Shift+R.
Move Line Up/Down
The move line up or down feature will do just that, move the line your cursor is on up or down. This also works if you highlight multiple lines too. I use this pretty often, because honestly I'm human and I don't always get the order of my code correct the first time. On MacOS the shortcuts are ⌥+↑/↓ and Windows they are Alt+↑/↓.
Go to Definition & Show References
If you're hovering a references to a variable or function the go to definition will do exactly that. Similarly, if you're hovering a variable or function declaration the show reference shortcut will show a menu of all the references if theirs multiple or go directly to the reference if theres just one. on MacOS the shortcuts are F12/⇧+F12 and Windows they are F12/Shift+F12.
These shortcuts are great but personally I find F12 to be a little far from my general hand placement on a keyboard so I opt to use ⌘/Ctrl+left clickwhich I use frequently and works for both features.
Organize Imports
This shortcut will remove any unused imports, sort existing imports by file paths, and sort named imports as well. On MacOS, the shortcut is ⌥+⇧+O and Windows Alt+Shift+O.
This is a wonderful shortcut to save time cleaning up your imports before performing a commit if you're in the habit of using it, but you might prefer to edit your settings.json with the follow configuration so the IDE does it for you on save. The settings.json can be found by opening the command palette(MacOS & Windows: F1) and searching for it.
These shortcuts are just the top ones I frequently use or plan to use more of, but theres a plethora of keyboard shortcuts for Visual Studio Code. If you're looking to boost your efficiency within Visual Studio Code even further, they provide a cheatsheet for MacOS and Windows which can be good to keep handy.