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

Top comments (21)

Collapse
 
rattanakchea profile image
Rattanak Chea

Great new feature from VS code. Thanks

Collapse
 
ahmadawais profile image
Ahmad Awais ⚑️

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
 
ahmadawais profile image
Ahmad Awais ⚑️

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
 
ahmadawais profile image
Ahmad Awais ⚑️

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?

Some comments may only be visible to logged-in visitors. Sign in to view all comments.

We are hiring! Do you want to be our Senior Platform Engineer? We're hiring for a Senior Platform Engineer and would love for you to apply.

Head here to learn more about who we're looking for.