DEV Community

Ahmad Awais ⚡️ for VSCode.pro

Posted on • Edited 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 (20)

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

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.