DEV Community

Ahmad Awais ⚡️ for VSCode.pro

Posted on • Updated on

🔥VSCode Breadcrumbs Are Here, And I Love 'em!

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.

image

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.enabled setting.

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.

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:

🦄 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 →

Developers Using 🦄 Shades of Purple

Peace! ✌️

Discussion (21)

Collapse
rattanakchea profile image
Rattanak Chea

Great new feature from VS code. Thanks

Collapse
mrahmadawais profile image
Ahmad Awais ⚡️ Author

Ain't it?! I like it. 💜👊

Collapse
caubeen profile image
caubeen • Edited on

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!!

Collapse
mrahmadawais profile image
Ahmad Awais ⚡️ Author

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.

  • You just enable the breadcrumbs
  • Then you use them with the keyboard shortcuts I mentioned above
  • Three settings which are pretty self-explanatory

image

Collapse
mrahmadawais profile image
Ahmad Awais ⚡️ Author

oh That's very kind of you to say! 💯

Collapse
andy profile image
Andy Zhao (he/him)

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...

Collapse
andy profile image
Andy Zhao (he/him)

I love this new feature coz I will be using less and less of the explorer sidebar.

I moved my sidebar to the right side of the screen, and I love it. Maybe something you would like?

Collapse
thebouv profile image
Anthony Bouvier

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.

Collapse
mrahmadawais profile image
Ahmad Awais ⚡️ Author • Edited on

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.

But the gif is so tiny and so fast, I still don't know what the heck enabling breadcrumbs actually does.

I shared a video here so that you can stop and watch it on.ahmda.ws/3V1o103J3z2X

And then ends with review begging.

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.

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.

This article is not about Breadcrumbs Feature Explained it'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:

  • I like the feature
  • I spent my time on adding a bunch of new styles to my FREE theme related to this feature
  • Also, I'm excited to be the first theme author to provide styles for breadcrumbs
  • Last, if you click on the links I shared and read the article I have shared tips and tricks about using the breadcrumbs feature; I shared all of the following in the article
  1. How to enable the feature "breadcrumbs.enabled": true
  2. How to focus on breadcrumbs via keyboard shortcuts
  3. How to switch between different breadcrumbs via keyboard shortcuts

Also, 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! ✌️

Collapse
thebouv profile image
Anthony Bouvier

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.

Thread Thread
mrahmadawais profile image
Ahmad Awais ⚡️ Author

I'm glad you took the feedback. I'm sorry you took offense.

Thank you; for looking at your feedback from my view as I did it from yours.

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.

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.

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.

It's supposed to be a small tip and not a huge article. So, let's agree to disagree here.

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).

Oh, I am not mad and it was your comment review begging that 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.

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.

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.

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.

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! ✌️

Collapse
moopet profile image
Ben Sinclair

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.

Thread Thread
mrahmadawais profile image
Ahmad Awais ⚡️ Author

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 begging which 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! ✌️

Collapse
mrahmadawais profile image
Ahmad Awais ⚡️ Author

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.

image

Peace! ✌️

Thread Thread
thebouv profile image
Anthony Bouvier

I like the new gif. Definitely more followable. Thanks.

Thread Thread
mrahmadawais profile image
Ahmad Awais ⚡️ Author

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.

Thread Thread
moopet profile image
Ben Sinclair

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!

Thread Thread
mrahmadawais profile image
Ahmad Awais ⚡️ Author

I have added another section to the post.

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.enabled setting.

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…

Collapse
hashimwarren profile image
Hashim Warren

Promotion of your own stuff is not just ok, but welcome here.

Collapse
mrahmadawais profile image
Ahmad Awais ⚡️ Author

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. 👋✌👌