Save 1000 hours in development time. VSCode shortcuts & Window Management

Cover photo by SpaceX Starlink Mission

If you could save 2 minutes every hour of development for 20 years, you could save at least 1000 hours in your life-time.

Being familiar with your development environment also means less context-switching.

How often do you forget what you are doing in the middle of trying to find that one piece of code?

⌨️ VSCode shortcuts

⌘ = command, ⌥ = option, ⌃ = control, ⇧ = shift

VSCode Navigation

Search file
Mac ⌘ + P
Windows ctrl + P

Search text
Mac ⌘ + ⇧ + F
Windows ctrl + ⇧ + F

Show commands / Command Pallete
Mac ⌃ + ⇧ + P
Windows ctrl + ⇧ + P
This one is very useful for when we need to restart the Typescript or eslint server or go to your settings.

Switch recent files
Mac ⌃ + tab
Windows ctrl + tab
Quickly switch between the latest files you opened.

Go back
Mac ⌃ + - or PageBack
Windows alt + - or PageBack

This command switches to where your cursor was. Use this one to quickly go back to where you were.

Go forward
Mac ⌃ + ⇧ + - or PageBack
Windows ctrl + ⇧ + - or PageBack

Go to definition
Click on a function or variable to go to where it's defined.
Mac ⌘ + left-click or F12
Windows ctrl + left-click or F12

Go to start/end of file
Mac ⌘ + UpArrow/DownArrow
Windows ctrl + Home/End

Toggle terminal
Mac ⌃ + `
Windows ctrl + `

VSCode Editing

Code suggestions / Auto complete / Trigger Suggestions

Mac ⌥ + esc
Windows ctrl + space

Quick Fix

Mac command + .
Windows ctrl + .

This command shows you ways to quickly fix errors, auto-add imports, auto-refactor, or gpt copilot actions if applicable.

Comment lines of code
Mac ⌘ + K + C
Windows ctrl + K + C

Uncomment lines of code
Mac ⌘ + K + U
Windows ⌘ + K + U

Move line up or down
Mac ⎇ + UpArrow or ⎇ + DownArrow
Windows alt + UpArrow or alt + DownArrow

Delete line
Mac ⌘ + ⇧ + K
Windows ctrl + shift + K

Rename variable
Mac F2
Windows F2
This command renames all instances of the variable. (Although sometimes it fails to do so)

Select multiple same
Mac ⌘ + D
Windows ctrl + D
Most should know this one.

Select multiple lines
Mac ⌥ + ⌘ + UpArrow or ⌥ + ⌘ + DownArrow
Windows ctrl + alt + UpArrow or ctrl + alt + DownArrow

⭐️ Bonus: Clipboard history
Mac:

• Install Flycut
• ⌘ + ⇧ + V to access clipboard history

Windows:

• WindowsKey + V Windows has this feature natively.

⭐️ Bonus 2: Open VSCode in your terminal
Install:

1. Open command palette (Mac: ⌃ + ⇧ + P; Windows: ctrl + ⇧ + P)
2. Type install code

1. Run in terminal

code .

Or specify file path

code ./my-codebase

⭐️ Bonus 3: VSCode context
If you didn't know, VSCode actually shows what "context" you're currently in at the top left. This is useful for nested code.

⑆ Git in VSCode

Staging files

I always use the Git tab in VSCode to check & stage each file one by one before filing PR.

If you're a dev working on my team, I would expect the same.

Then just commit as you would normally do.

Git blame: GitLens extension

GitLens is a great extension to see who committed each line.

It uses git blame underneath to see which commit or who is responsible for each line of code.

This is very useful if you need to inspect what context this code was written in and why this code exists.

🪟 Window Management

Let's keep things simple. IMO using the desktop switching feature on both Mac & Windows is slow and cumbersome.

Use these instead.

Mac Window Management

⌘ + tab to switch between applications
⌘ + ` to switch between the instances of the same application
⌘ + Q to quit and application

Windows Window Management

alt + tab to switch windows