Hey folks, I am here to discuss with you the power of shortcuts and give you my personal top ten shortcuts for VS Code Editor that I believe every developer should know.
Do you hate it when you need to get your right hand off from your keyboard so that you can use the mouse for something? As a programmer I certainly do most of the time but even though we cannot fully remove the mouse from the equation at least we can make our life easier with shortcuts.
I know, I know, if you are anything like me, you hate learning shortcuts from scratch each time for each application and if you don't use them much you forget about them. BUT, getting through this stage will benefit you greatly in the long run. Plus, many shortcuts are the same in many editors.
I will also show you one way to migrate the shortcuts you knew and loved from other editors and use them here in VS Code.
WINDOW USERS - Replace command with the ctrl key
The Command Palette
On boy, this is the trove of possibility within an editor. As the name suggests, the command palette is the go to place for accessing all commands available within your editor. So instead of using your mouse to navigate at the top nav of your editor then search through the dropdowns to find the command you are looking for, the command palette uses fuzzy searching to match what you are writing and give you options. USE IT!
Many plugins also expose there commands in the command palette, so please folks use the command palette. Its your number one go to tool.
shift + command + p
Do you happen to want to know what the server is spitting in the terminal at certain times but do not want to have the window open all the time? Guess what, shortcut time!
command + `
Search all files and folders
So you are looking for very specific CSS rules but do not know in which file they are, or a function when you are trying to debug. Using the finder to search within all files will certainly save the day!
shift + command + F
Tired of going three levels deep to find a file? VS Code got you.
command + p # do not confuse with command palette
command + /
Toggle File Explorer
Do you have problem with screen real estate? Is your screen small and can't have the File Explorer open all the time. Or what about the huge file names you have which take half the screen? Hmm, think its time you closed off that file explorer when you don't need it.
command + b
Neat trick - Close the file explorer and just use the files fuzzy search
command + p to look for and open files. No need for screen-real-estate-whore explorer.
Move code up or down
Did you ever find yourself using the bad thing called mouse to cut some lines of code and paste them elsewhere? Wouldn't it be more awesome to just use a shortcut to do that?
alt + Arrow UP or DOWN
Don't tell me you use copy and paste :o
shift + alt + Arrow UP or DOWN
Don't be one of the right click guys. Or the Edit dropdown guys in top nav bar.
command + z # Undo
shift + command + z # Redo
Navigate between open tabs
Mouse go away!
shift + command + ] OR [
Ok now for the people that want to bring the shortcuts they knew and love from other code editors and IDEs.
Simply go to the plugins section and write the following and press ENTER
This will bring up the most used key bindings/maps. Install and boom for the (most part) you can use the same shortcuts you always used.
So what do you think of my top 10 favorite shortcuts? If you have any other cool ones in mind, go ahead and write them in the comments section below.