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 keyThe 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 + pThe terminal
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 + FQuick open
Tired of going three levels deep to find a file? VS Code got you.
command + p # do not confuse with command paletteComments
Ever forget the syntax for comments in a specific context? i.e HTML, CSS, Javascript, Bash, whatever. Your editor is your friend. That smart dude knows what type of comment syntax to use.
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 + bNeat 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 DOWNDuplicate code
Don't tell me you use copy and paste :o
shift + alt + Arrow UP or DOWNUndo/Redo
Don't be one of the right click guys. Or the Edit dropdown guys in top nav bar.
command + z # Undoshift + command + z # RedoNavigate between open tabs
Mouse go away!
shift + command + ] OR [Keymaps
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
@recommended:keymapsThis 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.
Conclusion
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.