Issue #101  (Centered Layout)03/27/24

Here's a quick and easy tip that will likely be more interesting to newer VS Code users. A while back VS Code added a featured called "Centered Layout" mode that centers you editor in VS Code's UI and allows you to ensure you have full control over how much space your editor is taking up.

You can enable Centered Layout mode via View > Appearance > Centered Layout. Maybe you've seen that option before when accessing Zen mode or Full Screen mode but didn't think much of it.
 
You can also access it via the command palette by searching for "View: Toggle Centered Layout".
 
You'll notice by default this toggle doesn't have a keyboard shortcut. If you find yourself switching to and from Centered Layout mode, you can easily go into your keyboard shortcut settings and add a custom shortcut.

Centered Layout mode only works when you're viewing a single editor. So even if it's on, it's essentially disabled when you're in split editor view.

In Centered Layout mode, when you resize the editor window using the left or right "sashes", both sides are resized at the same time, as demonstrated in the GIF below. This helps preserve the centered layout.
 
If you want to temporarily disable this resizing feature to only resize a single side while in Centered Layout mode, just hold the ALT key (OPT on Mac) while resizing. You can also look up "Centered Layout" in your UI settings. You'll see two options for customizing how it behaves, depending on editor groups and whether you're resizing the whole window as opposed to just the editor.

And one final point: if you use Zen mode then you probably already noticed that Zen mode uses a centered layout by default, even if you don't have it enabled for the editor in general. Zen mode also includes a setting that lets you disable it in Zen mode if you wish.

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

VS Code Tools

Svisualize — A VS Code Extension that visualizes your Svelte components as you code and allows you to open files from the visual tree, see your props, and more.

AIConfig Editor — VS Code extension that turns your editor into a generative AI prompt IDE, allowing you to run models from any provider (OpenAI, Google, Hugging Face, local computer, etc.) or any modality (text, image, audio) in a single universal playground.

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

LogTail — An older VS Code extension that allows you to view and monitor log files remotely via SSH. See articles below for a tutorial on using it.

VS Code Articles & Videos

Using RegEx Groups for Search & Replace in VS Code — A more powerful way to do find and replace, which is generally available in most editors, but this is specific for use in VS Code.

How to View Server Logs in Real-Time in VS Code — A quick tutorial on using the LogTail extension mentioned above, for quickly viewing log files on a remote server.

Giving Your App a Temporary Public URL With VS Code Port Forwarding — Quick tip and a short video demonstration on a (new?) VS Code feature called port forwarding.

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 

Best of the Rest

RunJS JavaScript Playground — An easy-to-use JavaScript playground that displays results in real time in a panel on the right.

SQL Workbench — An online playground for writing SQL queries that keeps a query history, persisted tables, and the ability to share queries via deep links.

Top Gold IRAs — Safeguarding your retirement with a Gold IRA can help you shield your wealth from market shifts, economic uncertainty, and inflation. And with gold’s value projected to increase in 2024, now is a good time to invest. See our list of Best Gold IRA companies to start planning a better retirement.  Sponsor 

Announcing StackBlitz Self-hosted — The latest from StackBlitz is a fully self-hosted version of the tool, now generally available to any team interested in adding it to their toolset.

Suggestions?

If you have any link suggestions, including a tool, article, or other resource related to VS Code or another IDE, you can hit reply, send it via DM on X, or via chat on Bluesky.

That's it for this issue.

Happy VS Coding!
Louis
VSCode.Email
@LouisLazaris