Vs Code Productivity tips and speed hacks - 1
TL;DR
Visual Studio Code is like a paint brush, it's only as good as the hands that wields it but unfortunately it has more knobs than a jet and requires the steady hand of a painter. To the untrained eye VS Code is just a simple text editor like Microsoft Word and a Google doc but in reality it contains a ton of productivity boosting features that you're probably not using yet, like...
- Terminal Tasks
- Mouse-Less Editing
- Multi-cursor
- Remote Repos
- and etc
But here's a thing, every VS Code Pro started as an amateur. In this blog we will compare amateur VS Code techniques to the ones used by pros allowing you to write and analyse your code faster because the most valuable thing you own in this world is your time.
We are focusing more on faster approaches, so will not be using the mouse much.
Let's jump right into the things, assuming you have VS Code installed in you machine. If not try installing it from here.
1. VS Code CLI
If you want to open a folder in VS Code you directly go into the file explorer right click on the folder and click in open with VS Code that works fine but it would have been much quicker and faster with the CLI
Faster way - if you're in your terminal and want to open a directory or edit a file you can do it quickly with the CLI using the Code command like
If you're in Mac or Linux you need to run this shell command from your VS Code refer this
2. Minimise the use of Mouse
When we have our VS Code window open it is tempting to go around and click on the beautiful buttons provide by VS Code. VS Code allows you to use mouse for each and everything to make things approachable, but that's not the most efficient way to get things done, here is a productivity tip ⚡️ 'The less you rely on the mouse the better.
You don't have to learn anything like Vim or nano but it's important to understand anything you can do with a mouse is likely to be done by the Keyboard quicker. Vs Code provide keyboard shortcuts for literally everything. All the keyboard shortcuts are customisable.
Hit Cmd + k Cmd + S or click on the settings icon in the left panel in VS Code window and boom all the shortcuts are in front of you.
3. Use of Command Palette
The first shortcut you should memorise is cmd + p or ctrl + p which brings up the command palette. The Command Palette gives you access to a bunch of the powers of the VS Code without actually learning the commands by default it will give you a list of recently opened files
In addition you can start typing a file name that you want to open and that obviously much quicker than trying to find a file from the directories in the file explorer.
4. Advanced use of Command Palette
If you type cmd + > + p or ctrl + > + p it will give you access to the bunch of command that you can run directly from the command palette with addition to the commands of you downloaded extensions.
5. Find by symbols
Another really awesome thing we can do here is find blocks of code throughout our projects, when working in a really big file it is easy to get lost and get confused, the worst thing you can do here is to scroll down the file looking for the functions or interface you need or want to use.
- In a file
You could use ctrl foxtrot i.e. ctrl + f to find the text on the page but let me tell you a little better approach for this, use the @ symbol from the command palette that will list down all the symbols, variables, functions from the code so you can quickly navigate through it.
Isn't is awesome?
I have another approach too, by using ctrl + shift + . you can directly bypass the command palette and navigate through all the functions, variables and etc directly from the file.
- In the whole project
Now you may need to find a function in the entire project,
you can use ctrl + shift + f to search something in the entire project, the approach is to use a # in the command palette. Use a # in the command palette followed by the name of the function you want to search and boom! all the functions containing the name of function you wrote appears out of no where.
Command palette is awesome when it comes to productivity boosting.
This is a series for VS Code productivity hacks and tips, stay tuned for the next blog of the series.
Let me know in the comments below the productivity hack you use to boost your productivity.
Want to connect?
twitter · blogs · portfolio · email · linkedin
Top comments (0)