When you're in a state of focus, you want to be able to translate the thoughts in your head into code as quickly as possible. Having to use the mouse and figure out where something is or needs to be resized can be enough of a distraction from your state of focus.
Personally, every time I see a co-worker reach for the mouse to move a line or switch tabs, I get a little gutted. Think of your poor shoulders!
So if you find yourself looking for files forever or using your mouse every 2 seconds, these shortcuts are for you!
In the previous article, I shared some commonly used shortcut keys. For those who haven’t read them, you can click the link below to review them quickly:
Share 11 commonly used VSCode shortcut keys to make your coding more efficient
1. Move row or select
Move the current selection up or down one row
Linux / Windows: Alt + Up / Down Arrow
Mac: Opt + Up / Down Arrow
Compresses 4 mouse operations into 1 keyboard shortcut for moving lines, like WinRAR.
2. Copy row or select
Copy selection up or down
Windows: Alt + Shift + Up / Down Arrow
Linux: Ctrl + Alt + Shift + Up / Down Arrow
Mac: Opt + Shift + Up / Down Arrow
Pay by line of code? I get you, man. Become the super copy-paste engineer you've always been destined to be.
3. Switch tabs
Switch to the next or previous open tab
Linux / Windows: Ctrl + PageUp / PageDown
Mac: Cmd + Opt + Left / Right Arrow
That next tab seems so close, yet so far away. Well, not anymore!
4. Find files
Use fuzzy search to find files anywhere in the current editor session
Linux / Windows: Ctrl + P
Mac: Cmd + P
You're writing that dream app that will make you millions, and you need to open a certain file. You have some vague idea of where that pesky utils.ts file is located.
Then, you start searching. Directory after directory, scrolling up and down, "Where is it?! I just knew it was here, man!" Hopeless. You ditched your dream app and turned into a cabbage farmer.
Or, save yourself the trouble and let your good buddy VS Code find it for you.
5. Find symbols
Use fuzzy search to find the location of a class, function, or property in the current editor session
Linux / Windows: Ctrl + T
Mac: Cmd + T
Best practices state that you shouldn't have 42,069 lines of code in a single file, but no one reads that, so at the end of the day, we need something special to find things. Find function, property and class declarations in your messy and scattered code base in a fraction of the time!
6. Expand/collapse the current code block
Expand or collapse a block of code, such as a function or class.
Linux / Windows: Ctrl + K -> Release -> Ctrl + L
Mac: Cmd + K -> Release -> Cmd + L
If you collapse that lengthy if-else chain now, you won't have to refactor again. Tips to Improve Efficiency
7. Switch terminal panel
Switch to the next or previous terminal in a split-pane configuration
Linux / Windows: Alt + Left / Right Arrow
Mac: Cmd + Opt + Left / Right Arrow
This shortcut is for those rich, sophisticated full-stack siblings with super widescreen monitors who can run 13 parallel services at the same time and see them all at once.
8. Change the terminal panel size
Resize the terminal area to see more or less
Linux: Ctrl + Shift + Left / Right Arrow
Mac: Ctrl + Cmd + Left / Right Arrow
This shortcut is very useful when you need to see that 3-page paper-like error message, but it's really just you calling console.log as console.log.
Summarize
Hopefully these shortcuts will help you stay focused for longer while also avoiding shoulder pain at the end of the day.
Do you have a favorite shortcut key? Maybe something not mentioned here? Don't keep it a secret! Share it in the comments!
Due to the limited space of the article, today’s content will be shared here. At the end of the article, I would like to remind you that the creation of the article is not easy. If you like my sharing, please don’t forget to like and forward it, so that more people in need can see it. At the same time, if you want to gain more knowledge of front-end technology, welcome to follow me, your support will be the biggest motivation for me to share. I will continue to output more content, so stay tuned.