Issue #56  (Customize Layout Button)05/17/23

Here's a really quick tip on fiddling with your layout in VS Code. An easy way to customize the layout in VS Code is using the Customize Layout button found in the top right area, as shown in the screenshot below.

When you click this button, it will open an overlay dialog with a list of options to customize your layout.
 
You can instantly show or hide just about any of the visible parts of VS Code layout including taskbar, primary sidebar, secondary sidebar, the activity bar (normally on the left), and more.

You can also quickly access settings for the position of the primary sidebar, panel alignment, and choose from one of the three modes (Full Screen, Zen, or Centered Layout).
 
Note that you can drag different panels into other areas. For example you can drag different parts of the Explorer pane into the secondary sidebar, if you want to separate these into a different area. In the image above, I've dragged my NPM Scripts and Timeline into the Secondary Sidebar (which I enabled using the Customize Layout dialog).

As you can see, it's pretty easy to customize your layout without having to go into your UI or JSON settings.

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

VS Code Tools

VS Code Themes — A gallery of VS Code themes, filterable by dark and light or you can search by keyword.

Pretty TypeScript Errors — A VS Code extension that makes TypeScript errors prettier and human-readable.

Ansible — An extension adds language support for Ansible to VS Code and OpenVSX-compatible editors by leveraging ansible-language-server.

Bytes: Your Favourite JavaScript Newsletter — I subscribe to a lot of newsletters, but this is definitely one I look forward to. Entertaining with lots of cool and useful JavaScript coding tidbits, news, and tools. Sponsor

Settings Sync — An older but popular VS Code extension that lets you synchronize settings, snippets, themes, file icons, keybindings, workspaces, and extensions across multiple machines using GitHub Gists.

VS Code Articles & Videos

How to Run React Locally on VS Code — Useful if you're just getting started with React and want to run your apps locally.

Announcing .NET Mobile Debugging in VS Code — Some updates and news on the Uno Platform extension for building C#/XAML projects for WebAssembly.

Tech Productivity — A short newsletter featuring tips, tools, and articles on productivity, work culture, remote work, brain science, and more. Sponsor

▶ Top 5 VS Code Productivity Tips — A short video from the VS Code team that covers: double shift, sidebar focus, copy paste, multiple cursors, and terminals.

Best of the Rest

JavaFiddle — An online playground for running Java code that includes an output console.

Vim Keybindings Everywhere — A repository that lists plugins and tool to implement Vim keybindings in other apps and IDEs.

RegExGPT — An online tool to generate regex patterns by inputting an example of the text to transform and another input for the expected result. Also includes an optional natural language input.

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