Issue #22  (Zen Mode Options)09/21/22

Likely most VS Code users are familiar with VS Code's useful Zen Mode feature. If not, I'll go over it here with some options you might not have known about.

This editor mode allows you to remove the full UI of the editor and go into a full-screen mode for pure focused coding. You can enter Zen Mode by hitting the keyboard shortcut CTRL/CMD+K followed by Z, or by searching for Zen Mode in the command palette. This gives you something like the following:
 
By default the code is centered on your monitor, with no UI visible.

You can exit Zen Mode by hitting the ESC key twice. Within Zen Mode, you have the option to adjust the size of the code editor. Hover your mouse over the left or right border of the centered area and you'll see handles appear that allow you to resize the coding area.
 
Note that Zen Mode is not the same as "Full Screen Mode". When you go to View > Appearance in the menu bar, you'll see three options: Full Screen, Zen Mode, and Centered Layout.
 
Full Screen Mode still provides some UI and is similar to a web browser's full-screen mode, which similarly can be toggled with F11.

Zen Mode's default appearance is usually what most people want. But if you want to customize it, you can do so by opening your Settings UI and typing "Zen Mode" in the search box.
 
There you'll find a number of ways to customize it to your liking, including adding back certain UI elements, toggling how to handle notifications, and whether or not to restore Zen Mode when a window is closed and then opened again.

 

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

VS Code Tools

vscode-twoslash-queries — A tiny extension for VS Code for TypeScript that lets you use // ^? inside your editor to inline highlight types, useful for keyboard warriors or folks working on complex types.

YAML ❤️ JSON — VS Code extension to easily convert YAML to JSON or vice versa. Conversion can be done by each individual file or by all files in a folder.

Mocha Sidebar — A VS Code extension that provides tools for Mocha-based testing in VS Code.

markdownlint — Popular VS Code extension that provides Markdown linting and style checking. It includes a library of rules to encourage standards and consistency for Markdown files.

VS Code Articles

How to Debug React Apps with VS Code — Shows you how to set up VS Code as a debugger and includes an accompanying YouTube video.

VSCheatsheet — Exactly what the name suggestions, a single quick reference that contains a modest set of keyboard shortcuts for VS Code.

Visual Studio Code's New Editor Sticky Scroll Feature - Never Get Lost In The Code Again! — A new feature in VS Code and evidently I included an incorrect link in a previous issue for this article. I promise it's correct this time!

Get Smarter Every Day — Every day Refind picks 7 links from around the web that make you smarter, tailored to your interests. Loved by 50k+ curious minds. Subscribe for free today.   Sponsor 

Best of the Rest

Monocraft — A programming font based on the typeface used in Minecraft.

Walkthrough — Build step-by-step code walkthroughs to share knowledge and bring developers up to speed.

Phoenix — A modern, open-source IDE for the web and built to run in the browser.

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