6 VSCode Shortcuts to Boost your Productivity 2x

If you are like most people who use their mouse to get things done in VSCode, then you should make use of the VSCode shortcuts approach to speed up your development time.

If you make use of VSCode shortcuts, it will save 2x time for you. There’s certainly more, but here I am going to share with you the most powerful 6 VSCode shortcuts that will help you to improve your productivity.

List of VSCode shortcuts

1. Use @ Symbol VSCode Shortcut instead of CTRL + F
2. VSCode Shortcut for Collapse/Expand Block of Code
3. Set Multiple Cursors at Once in VSCode
4. Split Terminal in VSCode
5. Jump to Particular Line Number – VSCode Shortcut
6. File Creation in Nested Directory – VSCode Shortcut

1. Use @ Symbol VSCode Shortcuts instead of CTRL + F

Often when your code is too large on a file, you will use CTRL + F to search through the code. This is fine for the exact text matching in your file.

But what if you want to jump to variables, functions, classes, etc the better approach is to use CTRL+P and use @symbol to directly jump to its line number.

When you write just @ symbol, it will list out all the available symbols (variables, functions, classes, etc) you want

2. VSCode Shortcuts for Collapse/Expand Block of Code

Whenever you are writing a lengthy code, To prevent distraction, you might want to collapse some block of code. If you are using the arrow on the left to do this, then you are using your mouse which consumes several seconds of your productivity.

There is a handy shortcut that I always use CTRL + K + L will automatically collapse/expand the block which is very quick in comparison to clicking the arrow on the left side of the window.

3. Set Multiple Cursors at Once in VSCode

Often time what you want to do is write the same code snippet in multiple places of the same file. The usual approach is to write once, and copy-paste that to the part where you want to be repeated. That’s causing several seconds to minutes of our precious development time.

To fasten up the process of writing the same code in multiple places, we can use ALT(Option on Mac) and click on the places where we want to write the same code to set the cursors in multiple places and write the code all at once without having to copy paste.

4. Split Terminal in VSCode

Are you a power user like me that likes to use multiple splitter terminals at once in VSCode to run angular, react and test commands parallel? But you have to click that annoying small-sized plus button to open multiple terminals which consumes our precious development time.

To save our development time for splitting terminals superfast, you can use CTRL + SHIFT + 5 shortcut and split as many terminal windows as you want.

5. Jump to Particular Line Number – VSCode Shortcuts

Often times if we face any errors in run time, The console usually gives us a hint of where the error occurs by showing the line number.

To navigate to the line number, we use the scroll bar to scroll all the way by parallelly watching the line number on the left-hand side and you know sometimes we scroll downwards from the exact line then we have to scroll backwards to stick to the exact place such a waste of time in our productivity.

You can use CTRL + G VSCode shortcut and enter your line number to navigate to the exact line number in your file.

6. File Creation in Nested Directory – VSCode Shortcut

Let’s say you want to create an index.js file inside the directory src > shared > components > Button. What most developers do is to create a new folder under src first and then shared and then components and then Button and now create an index.js file.

To do the above process, we have to either click the new folder icon multiple times or create a folder shortcut multiple times and without mouse help, we can’t create the nested directory as well if we use the above approach. Causing a minute for this simple process.

To speed up the nested file creation process, you can just create a file with one command in VSCode. Create a file and name it src/shared/components/Button/index.js and VSCode will take care of the rest to create that file under the nested directories you mentioned in the file name.

Conclusion

1. How to upload files to s3 from the browser?
2. How to access a web camera from React and take a selfie with it?

In this post, I showed you 6 ways to improve your development productivity using VSCode shortcuts. Share this with your colleague who is still using the mouse to get things done. Let’s be productive and chill. If you know any productivity shortcuts on VSCode, please share in the comments below. I will add it to the list.