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:
- Open command palette (Mac:
⌃ + ⇧ + P
; Windows:ctrl + ⇧ + P
) - Type
install code
- 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
Top comments (2)
This is why Im a big dev fan. The resources are unending!
alt+shift+o to remove unused imports is my favorite, particularly :
Didn't know that one, Sweet!