This changed Vscode for me
Vscode Breadcrumbs
Humans consider many inventions as life changing things like fire, Modern Medicine, or the Personal Computer, but none of them compare to what I’m about to tell you in this article.
Yes we all already now can tell what it is, it is Vscode breadcrumbs, obviously.
This life changing invention came out in the 2018 July release of vscode, and even though its been 2 year since it came out I still have not seen enough people using it and therefore in this article I’ll be telling you about them and how u never need to use your mouse or trackpad ever again, at least while your in vscode.
(I’m aware that vim exists, and this will not be as “never need to use mouse again” like it is in vim but this will be much much easier to use than vim and you wont have to use mouse at least for 90% of the times)
Getting started
To get started you will first off obviously need Visual Studio Code, and you don’t need to install extension to enable this feature, and if you have used vscode in the past 2 years you would have already noticed this in your editor.
This tiny bar between the file tabs and the editor is the life changing breadcrumbs I’m talking about, most of you must have already tried to use it by clicking on it to navigate through the symbols in your opened file or even navigate across files.
Basic use
I’m aware that there are a lot of people that already use have been using this for years in one way or the other, and this article is not for them, now that we have that cleared, Breadcrumbs are much more useful when used with Shortcuts and yes i just wrote an entire article just to tell you about few shortcuts that will get you to not need to switch to your mouse as often as you used to.
(command/crlt)+ shift + ( . )
When in a file you can use this shortcut to expand the breadcrumb and this will show you all the symbols you have in that entire file, and you can just navigate to any function or variable declaration in the entire file.
As we can see in the above image we can navigate directly to any part of the App component.
(option/alt)+left/right arrow keys
So now you have a quick way to switch between the different symbols in the closure that your cursor is inside of, but now if you want to switch to a different closure that your cursor is not in or basically go to the left of your breadcrumbs and up the file tree, you can use this shortcut while the breadcrumb is expanded.
You can go all the way up left of the breadcrumb and switch between nearby files.
Search
Now what if you are a psychopath and write all of your code all in a single file and going up and down using just arrow keys can take forever to navigate through the 47 functions that you made to display hello world.
So here’s where you can just use search, the breadcrumbs expanded does not make it obvious that you can do this but you can actually just start typing and it fill filter out the symbols based on what you type.
Conclusion
And thats it now you can navigate through your entire project without moving your hand away from your keyboard ever.
