Issue #123  (Symbol Search)08/28/24

Advertisement
The Best New App for Newsletter Reading

Meco is a distraction-free space for reading newsletters outside the inbox. The app is packed with features designed to supercharge your learnings from your favourite writers.

Meco

Meco connects to Gmail & Outlook, is available to try free on iOS and desktop on the web, and has features like grouping newsletters, setting smart filters, bookmarking your favorites, and reading in a scrollable feed.

Join over 30k readers enjoying their newsletters and decluttering their inbox.

Try Meco Today →


In programming, specific types of objects or identifiers are often referred to as "symbols". For example, if you have the Breadcrumb feature enabled in VS Code, usually the last portion of the breadcrumb will show the current symbol where the cursor is positioned.

If you want to show a list of all symbols in the current file in VS Code, use the keyboard shortcut CTRL/CMD-T. This will bring up the command palette with a hash symbol preceding the search and a populated list of symbols:
 
Showing Symbols in VS Code

Of course, the same thing can be accomplished by opening the command palette and prefixing your search with the hash symbol manually. If you're dealing with a large file, you'll notice it might take a few moments for the symbols list to populate.

If you happen to have a portion of text selected and you hit CTRL/CMD-T, the symbol list will show symbols with that specific piece of text:
 
Showing Selected Symbol in VS Code

You can also use the shortcut CTRL/CMD-SHIFT-O to "Go to Symbol" in the current file (accomplished also by manually typing an @ character in your search).
 
Go to symbol in VS Code
 
Notice this isn't just a static list of the current file's symbols, but it allows you to navigate with the keyboard through the list and the file will scroll to match the location of the symbol.

And one last tip: add a colon after the @ character and the symbols will be grouped by category rather than grouped in order of appearance.
 
Categorize Symbols in VS Code

Maybe you'll find one of those tips useful if you're dealing with a large file that has a lot of different symbols in use.

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

VS Code Tools

Picopilot — A VS Code extension that purports to offer GitHub Copilot in 70 lines of JavaScript.

debug-graph — A VS Code extension that visualizes the function calls (code paths) leading up to your breakpoints, so you can gain insights into the execution flow in your code and troubleshoot efficiently.

Meco — Free your newsletters from the inbox. Move your newsletters to a space built for reading and declutter your inbox in seconds.    Sponsor 

SVG Gallery — An older but popular VS Code extension that adds a command to "view as SVG gallery" for any folder in a project, so you can view SVGs in a thumbnail gallery view in your editor.

VS Code Theme of the Week

Catppuccin — I linked to this theme a while back, before I started the "Theme of the Week" feature, so I thought it would be good to include it again here. It's described as a 'soothing pastel theme' for VS Code, and it lives up to that billing. The extension includes four different themes, one light and the rest dark.

Catppuccin Theme for VS Code

The three dark themes are pretty similar to one another. The "Mocha" theme is the one shown above, which is my favourite. There's nothing too unusual or unique about these themes, but if you like straightforward easy-on-the-eyes pastel colors, this package is a good option.

VS Code Articles & Videos

Run Your Own AI Assistants Locally — This is a two-part series that's not primarily about VS Code but the second part goes into using VS Code with an extension called Continue, which I've feature in this newsletter in the past.

Boost Your Refactoring Efficiency with VS Code: Extract Method Shortcut — A refactoring tip where you move a block of code into a new method (or function) and then replace the original code with a call to the new method.

Mastering Visual Studio Code (2024) — A course with 8 hours of video content for programmers working with Python, C++, Java, JavaScript, React, Vue, Docker, Markdown, GitHub Copilot, and more.  Sponsor 

📺 Behind The Scenes: The Making of VS Code — From VS Code's YouTube channel, this is a raw conversation with two principal VS Code engineers offering a raw and uncut look at what it's like behind the scenes with the VS Code engineering team. Lengthy but there are handy chapter links in the description.

Best of the Rest

ImHex — A dark-mode-by-default hex editor for reverse engineers and programmers with customizable colors, import/export data, a data inspector, and lots more features.

An Experienced (Neo)Vimmer's Workflow — One developer's suggestions for improving Vim and Neovim to be more efficient and optimized for productivity.

Mastering Visual Studio Code (2024) — A course with 8 hours of video content for programmers working with Python, C++, Java, JavaScript, React, Vue, Docker, Markdown, GitHub Copilot, and more.   Sponsor 

Micro Agent — An AI agent that writes (actually useful) code for you. Just give it a prompt, and it will generate a test and iterate on code until all test cases pass.

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
Copyright © VSCode.Email. All rights reserved.

Not affiliated with Microsoft, Visual Studio Code, or any of its trademarks.