17 Of The Best VS Code Shortcuts You Didn’t Know You Needed
Introducing a curated list (with gifs) of the best VS Code shortcuts I use every single day!
Keyboard shortcuts, or hotkeys, are the best. The absolute best. Not only do they save you time, but they keep you from context switching.
Context switching–or interrupting one task to switch to another, then back again–is a chief killer of productivity for anyone that works on long, focused tasks; like devs!
When you need to, for example, change the name of a variable and you’re able to complete that speedbump in 2 seconds, your brain can still remain in the original task at hand. But if changing the name of a variable takes much longer, then that speedbump turns into a full-fledged task on its own and your brain will have to switch into the “change the name of this variable everywhere” context, and then it has to switch back.
Hotkeys help to prevent speedbumps from turning into efficiency killing context switches, so make sure you know and use these keyboard shortcuts when using VS Code!
Note: If you want to see all standard VS Code hotkeys for windows and mac, the links are here:
– https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf
– https://code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.pdf
1 – See all hotkeys:
Windows: CTRL+SHIFT+P
Mac: ⇧⌘P
Why this is useful?
Starting with the most useful hotkey of all, [CTRL+SHIFT+P] gives you the master list of not just every hotkey available, but every command available, even hotkeys supplied by external libraries like Typescript. Try CTRL+SHIFT+P and typing in “Screencast” to toggle screencast mode on and off.
2 – Intellisense:
Windows: CTRL+[SPACE]
Mac: ^Space
Why this is useful?
Activate intellisense instantly based on the location of your cursor. Never type out a full variable name again!
3 – Comment selection:
Windows: CTRL+/
Mac: ⌘/
Why this is useful?
The nice thing about adding comments this way is it automatically selects the correct comment format depending on if you’ve selected javascript (//) or JSX (/**/) as you can see in the gif above.
4 – Cursor forward and back:
Windows: ALT+←, ALT+→
Mac: ⌃- / ⌃⇧-
Why this is useful?
Go back or forward based on cursor. Useful for when you have a component with many lines and you want to alternate between lines (or files!).
5 – Alternate Tabs:
Windows: CTRL+[TAB]
Mac: ^Tab
Why this is useful?
Alternate between the last two tabs you visted. This is useful when you have a type in its own file and the component using it in another.
6 – See the type:
[hover over variable]
Why this is useful?
With strongly typed languages (like Typescript) this is great for complex objects that might contain multiple subtypes. No more guessing!
7 – Go to File:
Windows: CTRL+P
Mac: ⌘P
Why this is useful?
The bigger your codebase gets the more cumbersome it can be to navigate a file tree. Once you get used to this you might find yourself never clicking on an caret in the navigation tree again.
8 – Show File In Explorer:
Windows: CTRL+SHIFT+E
Mac: ⇧⌘E
Why this is useful?
Combine with the hotkey for Go To File (see #7 above) to avoid navigating through your overly huge file tree.
9 – Save All:
Windows:CTRL+K, S
Mac: ⌥⌘S
Why this is useful?
Do you want to click a tab, click file, click save, then repeat that for each open tab? I don’t. This is the turbocharged form of CTRL+S that saves all open files instead of just the current one.
10 – Close All Tabs:
Windows: CTRL+K, CTRL+W
Mac: ⌘K ⌘W
Why this is useful?
The longer you have VS Code open the more tabs you’ll probably accumulate. This is the handy reset button to start with a clean slate.
11 – Quick Fix:
Windows: Ctrl+.
Mac: ⌘.
Why this is useful?
This hotkey might be in my top 3 for “Hotkeys I use most often”. I could hardly be productive without it. When I see a squiggle, I put my cursor there and I hit [CTRL+.].
12 – Place Cursor at the end of selection:
Windows: SHIFT+ALT+I
Mac: ⇧⌥I
Why this is useful?
This is especially great for classes or JSON objects that contain properties that all need the same value ending.
13 – Format file:
Windows: Shift+Alt+F
Mac: ⇧⌥F
Why this is useful?
Instantly format the document you’re working on.
Ensuring everyone on the team uses the same formatter, like Prettier, and assigning “auto-format on save” will you save valuable time when merging because your spacing and newlines will all be consistent.
14 – Go to definition:
Windows: CTRL+[click]
Mac: ⌘+[click]
Why this is useful?
Instantly go to the source of the symbol you’re clicking on. You can also do this by placing your cursor in the symbol and pressing F12
15 – Show All References:
Windows: SHIFT+F12
Mac: ⇧F12
Why this is useful?
Instantly see everywhere a particular symbol is used. Can also do with CTRL+SHIFT+[click]
16 – Rename all instances:
F2
Why this is useful?
This makes refactors a cinch. It renames the symbol in every one of its used instances.
17 – Organize Typescript Imports:
Windows: SHIFT+ALT+O
Mac: ⇧⌥O
Why this is useful?
Remove components you’re not using! This is especially useful when you have a larger component that uses tons of imports and you want to break it out into smaller components. When making the smaller component, instead of trying to figure out which imports to copy over from the larger component, simply copy all the imports then SHIFT+ALT+O and the ones that aren’t used will be removed.
Conclusion
Hopefully you find this helpful!
About Intertech
Intertech is a Software Development Consulting Firm that provides single and multiple turnkey software development teams, available on your schedule and configured to achieve success as defined by your requirements independently or in co-development with your team. Intertech teams combine proven full-stack, DevOps, Agile-experienced lead consultants with Delivery Management, User Experience, Software Development, and QA experts in Business Process Automation (BPA), Microservices, Client- and Server-Side Web Frameworks of multiple technologies, Custom Portal and Dashboard development, Cloud Integration and Migration (Azure and AWS), and so much more. Each Intertech employee leads with the soft skills necessary to explain complex concepts to stakeholders and team members alike and makes your business more efficient, your data more valuable, and your team better. In addition, Intertech is a trusted partner of more than 4000 satisfied customers and has a 99.70% “would recommend” rating.
