Issue #31  (Preview Mode for Open Files)11/23/22

Here's a quick tip that might improve the way you interact with open files in VS Code. If you're like me, then you prefer to have each file you click on open a new tab in your editor, rather than treating each open file as a "preview" of the file. (I discussed that in issue #14, but you can look up "enable preview" in your VS Code settings to change this behaviour).

With the "preview" mode off, this means you'll sometimes have many tabs open in VS Code. By default, each tab has its own little "close" button, the same as what you'd see in a browser with multiple tabs open.
 
If you prefer, you can disable the tab close button or even change the default position of it to the left instead of the right. In your VS Code settings, search for "Tab Close Button" and you'll see the following:


 

Turning it off has two main benefits:

• You won't accidentally close a tab
• Smaller tabs, thus more space for tabs on the screen

Of course, this means to close a tab, you have to use CTRL/CMD-W or right click the tab and choose "close".

The option to move the close button to the left side of the tab seems unusual to me. When I tried it out, it was confusing. The active tab's close button made sense, but it was hard to discern which tab a close button belongs to when you hover over the non-focused tabs, as shown in the image below.



Are there common use cases for left-side close buttons on tabs? Is it preferred for left-handed mouse users? What about users whose first language reads from right-to-left? I'm not sure, but those are possibilities.

Whatever the case, maybe the "off" setting is something to consider, to clean up the UI a bit and prevent accidental tab closures.

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

VS Code Tools

Template String Converter — A simple VS Code extension that automatically converts regular quotes to backticks when you type ${} inside a string.

Bookmarks — A popular VS Code extension that lets you mark, or add bookmarks, to lines of code, so you can quickly jump to them.

CodeSnap — A VS Code extension to easily take customizable and attractive screenshots of code snippets.

CodeStream — Now part of New Relic, an extension for VS Code, Visual Studio, and JetBrains that adds collaboration tools in your IDE with integrations from GitHub, BitBucket, GitLab, Jira, Trello, Asana, and more.

VS Code Articles

Creating Custom Snippets in VS Code — A quick review of how to use the Snippets feature that's now bundled in VS Code.

JetBrains Fleet and VS Code: Which One Is Better? — This is mostly an article about JetBrains Fleet, but from the viewpoint of someone considering switching from VS Code.

JavaScript Debugging with VS Code and Chrome — If you're new to debugging JavaScript, there's lots of good info here for using breakpoints and other features in DevTools and VS Code.

It's Time To Rethink Your Media Diet — There’s a reason our friends at The Daily Upside are the fastest growing finance newsletter in the country. See why 750k+ readers trust their expert team for crisp, easy-to-read market insights – free, always.  Sponsor 

Best of the Rest

 ▶ John Carmack: Best Programming Setup and IDE — This is a 15-minute clip from Lex Fridman's podcast where he talked with the programmer responsible for classics like Wolfenstein 3D, Doom, Quake, and more.

React Buddy — A JetBrains plugin that visual tools and coding assistance for developing React applications.

massCode — An open source code snippets manager for Mac, Windows, and Linux that helps you create and organize your own personal snippet collection and have quick access to it.

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