VSCode.pro
🔥VSCode Breadcrumbs Are Here, And I Love 'em!
Ahmad Awais ⚡️
Updated on
・2 min read
Visual Studio Code's latest release v1.26 dropped today and it's filled with great new features. And there's a nifty new feature of Breadcrumbs.
What Are Breadcrumbs in the Context of VSCode?!
A breadcrumb navigation lets you jump to symbols and files in your workspace from the top without having to mess around with the file explorer — most helpful for small screens.
The editor now has a navigation bar above its contents - we call it Breadcrumbs. It shows the current location and allows you to quickly navigate between symbols and files. To start using breadcrumbs, enable it with the View > Toggle Breadcrumbs command or via the
breadcrumbs.enabledsetting.When using editor tabs (default), breadcrumbs are displayed in a separate row below the editor title. If you are not using editor tabs, breadcrumbs show as an interactive file path next to the title. More…
I love this new feature coz I will be using less and less of the explorer sidebar. More screen space for good old code. Enable them by this setting "breadcrumbs.enabled": true.
🔥 TIP: VSCode.pro/TIP/15 — Latest release of 🆚@Code has a nifty new feature of Breadcrumbs. I like it. Press ⌘ + ⇧ + . to access it.
Details in the tips below:
✅ VSCode.pro/tip/15 (Enable breadcrumbs)
✅ VSCode.pro/tip/16 (Shortcuts)
🙌 RTs appreciated!05:37 AM - 14 Aug 2018
12
13
To interact with breadcrumbs, use the Focus Breadcrumbs command or press SHIFT (⇧) + COMMAND (⌘) + PERIOD (.) and use arrow keys ARROW KEYS (←/→) to move around.
🥖 VSCode Breadcrumbs Tips & Tricks
I have shared more details in the tips below:
- ✅ VSCode.pro/tip/15 → (Enable breadcrumbs in VSCode)
- ✅ VSCode.pro/tip/16 → (Shortcuts/Iteration tips & tricks)
🔥 TIP: VSCode.pro/TIP/16 — You can also interact with breadcrumbs without the picker for that press ⌘ + ⇧ + ; and to move around press ⌥ + arrow keys
Details in the tips below:
✅ VSCode.pro/tip/15 (Enable breadcrumbs)
✅ VSCode.pro/tip/16 (Shortcuts)05:37 AM - 14 Aug 2018
🦄 Shades of Purple v2.5 →
The new breadcrumbs feature is stylable and every good theme should have it styled or it would look weird. Shameless plug here, I am the author of a VSCode theme called 🦄 Shades of Purple → which is being used by ~15,000 developers.
I try to keep it updated with every single VSCode major release, which is why there are 50+ releases so far. In the Shades of Purple v2.5 update two major updates are:
- 🎨 Styles for VSCode Breadcrumbs
- 🗂 Styles for the upcoming VSCode Settings editor that's in preview at the moment, but it's styled in accordance with the 🦄 Shades of Purple theme →
Peace! ✌️
Ahmad Awais ⚡️
Edutianer VSCode.pro ❯ Google Dev Expert ❯ Award-winning Dev Advocate ❯ Node.js Community Committee Member ❯ WordPress Core Dev ❯ TEDx Speaker ❯ Hilarious tech comedian! ❯ Loves @MaedahBatool & 🍕
575
23
🔍 Find Your Outdated VSCode Extensions
Trending on 
What makes a great development environment?
TabNine: The last autocomplete AI assistant you will ever need.
Interview Q's Decoded -- [Issue #1]
Computer Science vs Software Engineering
Ultrawide VS multiple monitor set-up: Your thoughts?
SpaceX and Javascript🚀
How do you cover for domain name costs in FOSS projects?
Can you suggest me Free productivity tools?
Sign In With GitHub
Sign In With Twitter
Great new feature from VS code. Thanks
Ain't it?! I like it. 💜👊
I agree with the other commenter somewhat, the article is hard to follow and I still don't really know what breadcrumbs do... But it is all ok because that theme is awesome at the end!!
Glad you liked the theme! 💯
This article is just a tip — you can read more about breadcrumbs here → code.visualstudio.com/updates/v1_2... there isn't much more to it.
oh That's very kind of you to say! 💯
Thanks for the heads up, definitely using it! 🙌 Hope it plays well with Ruby though, I still have to figure out my Ruby + VSCode config...
I moved my sidebar to the right side of the screen, and I love it. Maybe something you would like?
I'd like to like your article.
But the gif is so tiny and so fast, I still don't know what the heck enabling breadcrumbs actually does.
And then in the middle it has links to your learning video.
And then ends with review begging.
So, then I realize by the end of this "article", it all is just here to point back to stuff you're selling? Doing for free? Honestly, I can't even tell now. Just seems way more self-servicing than trying to talk about the breadcrumbs feature and why it is useful.
Thanks for the honest feedback. I'm a human too, sometimes I get caught up in the moment and I see how this could look salesy. Though, as you noticed I am not selling anything here.
I shared a video here so that you can stop and watch it on.ahmda.ws/3V1o103J3z2X
Begging really? Everything in your comment was good honest feedback until you said this. Now you're being rude for no reason at all. I am not begging for anything. Removed the optional review request. I hope that should make you happy. You should know you have offended me.
This article is not about
Breadcrumbs Feature Explainedit's just a news piece where I am sharing the news of a new feature and what have I done about it, here's that:"breadcrumbs.enabled": truebreadcrumbsvia keyboard shortcutsAlso, I shared links to two tips (there are more tips and tricks in these two links):
✅ VSCode.pro/tip/15 → (Enable breadcrumbs in VSCode)
✅ VSCode.pro/tip/16 → (Shortcuts/Iteration tips & tricks)
Now about the small gif that's too fast to catchup. Thank you for that feedback, I'll try and improve upon that maybe now but definitely next time.
Peace! ✌️
I'm glad you took the feedback. I'm sorry you took offense.
All in all it read as mostly self-servicing to drive to your other work (OSS or not). And not really an article of actual content. For instance, you embed your tweet twice, taking up most of the "content" of the article.
So 2 embedded tweets linking to your vscode.pro website, and two links in the article itself. 8 total links to your site, then 4 more links to your theme (albeit free and appreciated for sure). I see that as very little actual content, and a whole lot of self-servicing. This reads more like an ad to me now that I re-review it.
Good on you for self-promotion. But don't be mad I don't like it and decided to give feedback as such. I'm not bashing you. I'm pointing out that I don't think this is really content (even though you're pointing to other content).
I appreciate you have made many OSS contributions and that so many devs like your theme. However, I didn't like this article by you and stand by that currently.
I'm not over here seething about your article; I just made the comments I made and stand by them for now. I won't hold onto my opinion for dear life nor refuse to change it. But as it is now, those are my feelings.
Thank you; for looking at your feedback from my view as I did it from yours.
I'd say that you ignored the content and quickly jumped to conclusions as you did right now even after I told you. The two tweets both of them are different. The Gif, however, is the same. I could have used another gif there but I think I was tired due to working on a public holiday — which in hindsight I shouldn't have done.
It's supposed to be a small tip and not a huge article. So, let's agree to disagree here.
Oh, I am not mad and it was your comment
review beggingthat didn't settle well with me. It shouldn't either. English has the most comprehensive dictionary when compared with other languages — one doesn't have to use the words that would offend others. People do it by choice. I am also at the same time glad that you apologized for that.Thank You! 😇
It's not an article it's just a small tip.
I write a lot and I very well know what an article looks like. Here's another post I wrote from about a month ago which has about 7k words and I think by reading/looking at it you'd know I know what I am talking about dev.to/mrahmadawais/building-a-cus...
I am sharing this all to let you know that I understand what you mean here and I do both the articles and tips. I also openly share my free work that I spend a lot of my time on — 80% of my time goes to open source and I am proud of it.
That's the reason why I am responding to your comment instead of ignoring it. I know you mean well. Thanks for caring enough to reach out and help me get better. Most of your feedback if not all (the offensive part) helped me learn.
Peace! ✌️
Ahmad, I know you relate your theme to the rest of the post by mentioning that you've updated it to cope with the new breadcrumbs, but I think it still comes across as an advert :)
On the other hand, I think there's no reason you shouldn't be proud of what you've made and make an informative post about it, telling us what motivated you, or what challenges it presented or what technical problems you had to overcome.
Thanks for sharing that. I didn't mean to advertise. I shared my open source work which is allowed here, I think even paid product promotion is allowed here as well as on Medium.
But I actually stopped everything I was doing when the release was launched, read it in entirety, created these gifs, shared what I liked about it, and then opened up my theme and started styling the new features right away. Spent two to three hours doing that and finally wrote this article.
After all that effort, for free, I didn't expect a comment about
review beggingwhich is clearly a bad choice of words and it's harmful to me and for other authors on Dev.to — I think behavior like this shouldn't be allowed.I did my best to explain the situation I am in :) I hope it's worth something. Also goes to show that I intentionally kept the post small and don't shy away from writing more.
Peace! ✌️
Also, I just added a new gif to the article which is slow and should be enough for anyone to get an idea about what the feature looks like.
Peace! ✌️
I like the new gif. Definitely more followable. Thanks.
Glad you liked it! 💯
It's good feedback. I am sure you can find more likable gifs here twitter.com/i/moments/100331933585... (where I intend to collect all these tips). Which will also explain that all my tips are not actually that fast. Today was an exception. But anything's better than nothing after two weeks of fever-down-time.
I've arrived a little later - I don't know exactly what changes you've made to the article, but I came to the comments because I was going to ask what was going on in that (new) gif. I don't understand what breadcrumbs represent in the context of VSCode. I mean, I know what breadcrumbs are in an app or a webpage, but I can't gather what they're showing from that gif. Are they files you've been in where something has led you to another file? Are they the route you took through nested function calls? A combination? What if there are multiple routes?
Is this just the jumplist I'm used to in Vim but presented as a series of tabs? I don't know!
I have added another section to the post.
What Are Breadcrumbs in the Context of VSCode?!
Promotion of your own stuff is not just ok, but welcome here.
Thanks for sharing that with all of us. I didn't just promote the theme out of the blue, I had released a relevant theme update to style the exact feature this post is about.
I cam try to write a longer post but I think a tio should be just that, small and to the point. 👋✌👌