Issue #40  (Breadcrumbs in VS Code)01/25/23

The breadcrumbs feature, enabled by default in VS Code, is pretty neat if you learn how to use it and learn some keyboard shortcuts associated with it.

The breadcrumb is visible at the top of your editor window, showing you where you're currently located. You can use your settings to change this to only show the file name with no path, and even disable it altogether. But I think it's a nice feature that most people find useful.
   
If your cursor isn't located inside your current file, you'll notice three dots next to the file name. If your cursor is located inside the file, you'll notice the current "symbol" is indicated.

For example, in my CSS file, if I'm currently editing the selector rule for ".main", I'll see that at the end of the breadcrumb. I can then jump to any part of the CSS file by clicking on the symbol name (in this case, it's a selector but in other languages it might be a function or something else). This shows a list of all the places in my code I can jump to.
 
In fact, you can click on any section of the breadcrumb to view files or folders available at the same hierarchy level as the section of the breadcrumb you click on. From there you can navigate much like you would in any folder view in VS Code or elsewhere.
 
In the screenshot above, I'm clicking on the "css" folder, which shows me a list of other files and folders at the same level as "css". So basically, the breadcrumb is a great navigation item you can use, that can especially come in handy in large complex projects.

And a few useful keyboard shortcuts in relation to breadcrumbs:

• CTRL/CMD-SHIFT-SEMICOLON, while inside your editor, will focus the last item in the breadcrumb, after which you can use the arrow keys to navigate
• CTRL/CMD-SHIFT-PERIOD will immediately focus the symbols or files/folders list in the current file (i.e. the same as clicking on the last breadcrumb item)
• If you start typing with one of the symbol/file dropdowns open, it will "search" for the item you're looking for
• To quickly enable/disable breadcrumbs (maybe you want a simpler UI for some tasks), just search for "breadcrumbs" in the command palette and choose the "View: Toggle Breadcrumbs" option.

That's VS Code's breadcrumbs feature in a nutshell, so I hope you are able to find some use for some of those features.
 

Now on to this week's hand-picked links!
 

VS Code Tools

Bito — AI-based extension for VS Code, JetBrains, and Chrome that uses ChatGPT to generate code, provide command syntax, write test cases, get code explanations, and more.

Laravel Pint Formatter — A VS Code extension for Laravel Pint (an opinionated PHP code style fixer) with zero config and an optional format on save option.

Multiple Cursor Case Preserve — VS Code extension that preserves case when editing with multiple cursors, to ensure came case or all uppercase, etc., doesn't get changed when using multi-cursor mode.

Azure Tools — VS Code extension from Microsoft that enables you to get web site hosting, SQL/MongoDB data, Docker Containers, Serverless Functions and more.
 

VS Code Articles & Videos

▶ VS Code Tips: Folding Notebook Sections — A quick video tip demonstrating how VS Code makes it easy to hide sections of notebooks in Jupyter notebooks, defined by Markdown headers, with folding.

VS Code - Amateur to Pro 2 — Follow-up to a link I shared last week, with another series of tips for being more productive in VS Code.

Join Noom, the Psychology-based Program for Lasting Healthy Outcomes — Getting healthier means changing your lifestyle. Noom Weight helps users lose weight in a sustainable way through behavioral change psychology. It's a no-brainer.  Sponsor 

How to Write and Run C and C++ Code in Visual Studio Code — The first half is about installing VS Code in general, but the second half of the article mentions some extensions and settings to get you up and running.
 

Best of the Rest

D2 Playground — An online runner to play, learn, and create with D2, the modern diagram scripting language that turns text to diagrams.

Znote — A native JavaScript playground app that includes Markdown features to allow you to run and organize your code snippets.

Vim Users, `:x` is like `:wq` But Writes Only When Changes Are Made — This is a "Tell Hacker News" topic that elicited some extensive discussion on some of Vim's lesser-known features.

Suggestions?

If you have any link suggestions, including a tool, article, or other resources related to VS Code or another IDE, send it via DM on X: @LouisLazaris or just hit reply on this email.

That's it for this issue.

Happy VS Coding!
Louis
VSCode.Email
@LouisLazaris