Issue #124  (Minimap Section Headers)09/04/24

Advertisement
The #1 AI Podcast Digest

Tired of missing out on key insights from your favorite podcasts? Enter PodSnacks – The Blinkist for podcasts.

PodSnacks

PodSnacks delivers AI-generated summaries directly to your inbox. Streamline your podcast experience while saving dozens of hours of listening time. Get started today and never miss an important episode of the top AI, tech, and startup shows again!

Try it Free →


I normally keep the minimap feature in VS Code turned off by default because I don't use it much. But if you do use the minimap, it's useful to know that earlier this year a new feature was added called "Minimap Section Headers".

The purpose of the minimap, of course, is to help you quickly navigate to a certain part of a long file. But if it's just a wall of text, it can be harder to find stuff. With Section Headers, you can set visible text headers throughout your code.
 
Defining Minimap Section Headers in VS Code

As shown in the screenshot above, section headers can be defined and are visible throughout your minimap. You can define minimap section headers using one of two kinds of syntax, commonly known as "folding markers":
  • // #region Example Header
  • // MARK: Another Example
The syntax is case sensitive and, as implied, these sections, or regions, also become code folding points in your file.

As with many VS Code features, you can customize the look of the minimap section headers. Look for "Section Headers" in your settings and you'll get four different options. Two of the settings allow you to change the font size and letter spacing of the section headers:
 
Customizing Minimap Section Headers in VS Code

And the other two allow you to enable/disable the two kinds of syntax that produce the section headers.
 
Enabling/Disabling Types of Comments for Minimap Section Headers in VS Code
 
In the screenshot below, the minimap section headers have been customized with a larger font and slightly bigger letter spacing.
 
Customized Minimap Section Headers in VS Code

You can fiddle around with a number of different minimap settings that might improve how the section headers appear. Search for "minimap" in your settings to pull up all the possible options.

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

VS Code Tools

Arccode — A platform and related VS Code extension that lets you take part in a role-playing game while you write code.

Edge — An official VS Code extension by the creators of Edge.js (a Node.js template engine) that adds support for syntax highlighting for HTML and Edge, code folding for Edge tags, auto-completion, and more.

The #1 AI Podcast Digest — Streamline your podcast experience with PodSnacks: Receive bite-sized, AI-generated summaries of your favorite podcasts delivered directly to your inbox and save dozens of hours of listening time! Utilize PodSnacks for free!    Sponsor 

Devv.AI — A VS Code extension that adds an AI-powered chat and coding assistant, supercharged by state-of-the-art AI models including GPT-4, Claude 3.5, and Gemini.


VS Code Theme of the Week

Kary Pro Colors — This is a unique pair of VS Code themes that was created "to fully recolor Visual Studio Code to a new level and make it an entirely new experience."

Kary Pro Colors Theme for VS Code

Includes a light theme and dark theme (shown above) and the color choices for the UI and the syntax highlighting are quite different from other themes you might be accustomed to.

VS Code Articles & Videos

📺 Getting Started with Jupyter Notebooks in VS Code — From the VS Code YouTube channel, learn how to create your first Jupyter Notebook in VS Code, including setting up your environment, running and debugging code, and visualizing data.

Visual Studio vs Visual Studio Code: Which is Better For Cross Platform Development? — An extensive look at both tools, in case you were interesting in learning more about the differences. Or maybe you didn't even know these were different products! 🤔

The Morning Paper for Tech — Want a byte-sized version of Hacker News that takes just a few minutes to read? Try TLDR's free daily newsletter. It covers the most interesting tech, startup, and programming stories in just 5 minutes. No sports and no politics.  Sponsor 

What Was Your First IDE? — This is an X thread where a user asks this question. It's always interesting to see the responses, depending on people's age, level of experience, etc.
 

Best of the Rest

Blamer.el — A git blame plugin for Emacs inspired by VS Code's GitLens plugin and a similarly named plugin for Vim.

Sliderland — A very minimalist creative coding playground to make animations using only 64 HTML sliders.

The Morning Paper for Tech — Want a byte-sized version of Hacker News that takes just a few minutes to read? Try TLDR's free daily newsletter. It covers the most interesting tech, startup, and programming stories in just 5 minutes. No sports and no politics.   Sponsor 

Project IDX — An AI-assisted workspace for full-stack, multiplatform app development in the cloud, with support for a broad range of frameworks, languages, and services.

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.