Issue #11  (Open Editors Settings)07/06/22

Advertisement
Get a weekly dose of tools, articles, and other resources covering remote work, productivity, career well-being, and lots more.

There are a few customizations you can make on VS Code's "open editors" pane when your Explorer pane is opened. The Explorer sidebar is opened by clicking on the Explorer button or hitting CTRL/CMD-E. If you have multiple files you're working on, you'll see something like this:

VS Code's Open Editors Pane

Notice under "Open Editors", all the files I'm currently working on are displayed. To tweak how the Open Editors functions, open your UI Settings and type "openeditors" in the search box. You'll see three different settings you can change.
 
VS Code's Open Editor Settings

The first setting is probably best to keep at "0". This way the Open Editors pane doesn't have any extra slots, only enough slots for how many files are open. I'm not sure if anyone would find a value higher than zero useful. Maybe for keeping a consistent UI look?

The other two settings are, in my opinion, more useful. First, you can sort the files in the Open Editors panel by one of three options: Choosing "editorOrder" sorts the files in the same order they appear as tabs in the editor window. This means if you drag a tab to a new location, the order in the Open Editors Pane will change to reflect the new tab order. You can also choose to sort the files alphabetically or by full path name.

The final Open Editors pane setting allows you to change the maximum number of editors shown in the list. Setting this to "0" removes the "Open Editors" pane altogether. A setting of "1" would seem like the other practical choice, which might work for those who just want the one file they're currently editing to be listed, regardless of how many tabs are actually open.
 
Single editor in VS Code's Open Editors

I think in most cases you'll set this to a higher number (for example the default of "9") to ensure all current files being worked on are visible. But I suppose there could be a use case where some developers prefer to only see a maximum of 5 editors shown in the list.

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

VS Code Tools

VSLook — VS Code extension that lets you customize the look of VS Code and comes with Tailwind and Material color palettes.

Code Runner — A popular VS Code extension that allows you to run a code snippet or file for just about any programming language – JavaScript, TypeScript, Python, C/C++, PHP, Swift, Go, Ruby, Rust, and more.

es7-react-js-snippets — VS Code extensions for React, React-Native, and Redux in JavaScript/TypeScript with ES7+ syntax. Customizable and has built-in integration with Prettier.

VS Code Articles

Contextual Information on Hover while Debugging — A quick tip based on a Tweet by Josh Goldberg on getting extra info using the ALT key when hovering over code that you're debugging.

▶ VS Code Livestreams — In case you weren't aware, every month the VS Code team hosts a live stream 'release party' where they cover what's new in the latest version of VS Code. The next one is this week (Thursday) featuring what's new in VS Code 1.69.

TypeScript & VS Code Tricks for Beginners: 10 Things I Wish I Knew When Starting Out — A good article for those just getting started with TypeScript or possibly considering it soon, with a brief tip near the end on using JSDoc in VS Code.

Bytes — A JavaScript newsletter that's entertaining and informative with lots of coding tidbits, news, and tools.   Sponsor 

The Alternatives

LetsMarkdown.com — An open-source Markdown editor that allows you to quickly share a URL for collaborating on a Markdown document with others.

Glamorous Toolkit — Open-source 'moldable development environment' that's a native Mac, Windows, or Linux app that lets you transform it into a multi-language notebook, code editor, software analysis platform, knowledge management system, and more.

CodeToImg — Online tool to convert code snippets to shareable images, with lots of customization and language options.

Vim Reference Guide — In case you're just getting started using Vim, this might be a good one to bookmark and reference from time to time.


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.