Each and every one of us uses keyboard shortcuts to some extent like Cut (Ctrl\Cmd + X
), Copy (Ctrl\Cmd + C
) and Paste (Ctrl\Cmd + V
). Please don't stop reading because I mentioned those three.
I promise you this blog will only discuss shortcuts a cut above the basics and only those which are beneficial to the devs.
Why Keyboard Shortcuts ?
Firstly, Keyboard Shortcuts are just efficient. Especially when it comes to coding IDE like VS Code and IntelliJ, keyboard shortcuts are a boon to coders. While it is not that easy to get used to these shortcuts, you will definitely thank yourself for putting the effort once you get used to them.
The Shortcuts
1. Multi-cursor
This is the first keyboard shortcut I mastered. And also the most helpful one especially when on HTML (adding classes used to be such a pain 😭 ).
-
How to use it : Just
Ctrl
click at all the places where you want to start writing. You will see multiple cursors popping up. And when you type, all of them start writing. -
Keyboard Shortcut :
Ctrl/Cmd + Mouse Left Click
2. Global Search
Some of you might already be familiar with how to do this by using mouse as it is a very very important feature when working on big projects with loads of interconnected code. But did you know that you could do that with keyboard shortcut in a snap.
-
How to use it : Now most of us are already familiar with
Ctrl/Cmd + F
for searching inside a file. Now taking it to the next level by pressingCtrl/Cmd + Shift + F
, you can do a global search on your entire project. -
Keyboard Shortcut :
Ctrl/Cmd + Shift + F
3. Moving By Words Not Letters
While we can move around the extremes of the line using Home
and End
, what if we want to quickly change attributes in HTML / edit arguments in function calls ? 🤔🤔
-
How to use it : We know that we can move the cursor by letter with
Arrow Keys
but if you want to move the cursor by words, you have toCtrl/Cmd + [Left/Right Arrow Keys]
-
Keyboard Shortcut :
Ctrl/Cmd + [Left/Right Arrow Keys]
4. Delete Words
Following the footsteps of previous shortcut, would it not make stuff easier if you could quick delete words as well 🤩🤩
-
How to use it : Now, this is a two step thing. Firstly, select the word where your cursor is with
Ctrl/Cmd + D
. Next, clickDelete
or start writing what you need in place of word selected. -
Keyboard Shortcut : Select Word (
Ctrl/Cmd + D
) and then start typing away
5. Moving Between Open Files
Most of us know how to move between different applications on our machine (i.e. Alt + Tab
). In a similar fashion when it comes to big projects, we have to move between some files very often. And using mouse to do this is not very productive.
-
How to use it : You can switch between open files this using using
Ctrl/Cmd + Tab
(right) andCtrl/Cmd + Shift + Tab
(left) to make this movement quick. -
Keyboard Shortcut :
- Right Open File :
Ctrl/Cmd + Tab
- Left Open File :
Ctrl/Cmd + Shift + Tab
- Right Open File :
6. Quick Comment / Uncomment
This is the most often used keyboard shortcut while I code. The best part of it is that it is language agnostic i.e. automatically comments code in the proper syntax. Also commenting and uncommenting is also used as a quick debug technique. Commenting is a good coder's duty and to do it productively, here is a shortcut.
-
How to use it : Make a selection and
Ctrl/Cmd + /
for a multi-line comment. Or just pressCtrl/Cmd + /
to comment the current line the cursor is on. To uncomment, repeat the process again. -
Keyboard Shortcut :
Ctrl/Cmd + /
7. Jump To Function
When you have a code project, it is very likely that you are using code from other files a lot. And ability to quickly move to different pieces of code is a major help.
-
How to use it : Just take the cursor to the function call and press
F12
orFn + F12
based on the keyboard. The file with the function is opened with your cursor at the definition. -
Keyboard Shortcut :
F12
orFn + F12
8. Open Project Files (Not Ctrl/Cmd + O
)
I am not going to discuss the normal Open File and you chose the file from the File Explorer. This is a shortcut to quickly open files from the project without using mouse.
-
How to use it : Press
Ctrl/Cmd + P
and start typing the file name. A dropdown with all possible files you might be referring to in the project shows up. -
Keyboard Shortcut :
Ctrl/Cmd + P
9. Code Completion / Auto Complete / Quick Import
Having a quick suggestion related to what you might be typing is always a big help. Let it be the variable name (or) function definition. You can also quick import from different files using these shortcuts
-
How to use it : Press
Ctrl/Cmd + Space
to see possible suggestions and useCtrl/Cmd + Shift + Space
to view the function definition where you are typing to get an understanding of its parameters. -
Keyboard Shortcut :
Ctrl/Cmd + Space
orCtrl/Cmd + Shift + Space
10. Expand / Collapse Functions
Even though we understand that we should break our code into files for ease of re-use and easy understanding. Sometimes we can not help but see that our files are growing in size. Traversing through large files is a very time-consuming task. Would it not be easier if you could collapse all the functions and only expand those that you need ? And that's what this shortcut has to offer.
-
How to use it : Press
Ctrl/Cmd + K
and thenCtrl/Cmd + 0
to collapse all sub regions. AndCtrl/Cmd + K
and thenCtrl/Cmd + J
to expand all sub regions. To collapse the current (where the cursor is) sub region, pressCtrl/Cmd + Shift + [
and to expand the current sub region, pressCtrl/Cmd + Shift + ]
. Here sub region means a block of code. -
Keyboard Shortcut :
- Expand All :
Ctrl/Cmd + K
and thenCtrl/Cmd + J
- Collapse All :
Ctrl/Cmd + K
and thenCtrl/Cmd + 0
- Collapse Current :
Ctrl/Cmd + Shift + [
- Expand Current :
Ctrl/Cmd + Shift + ]
- Expand All :
Also VS Code Official Cheat Sheet : https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf
https://code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.pdf
Or just use another keyboard shortcut, press Ctrl/Cmd + Shift + P
to search other keyboard shortcuts
[Featured Image taken from https://code.visualstudio.com/]
Top comments (0)