Issue #14  (File Previews vs. No Previews)07/27/22

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

When you have a workspace or folder open in VS Code, it can be a little confusing at first understanding how VS Code opens files when you click on them in the sidebar.

By default, you'll notice with the Explorer sidebar open, if you click any file you'll see the file seems to open in the editor window. But technically this is not really the case. If you click another file without editing the previously opened file, the new file's tab will replace the previous one.

Navigating files with Preview mode on in VS Code

In reality, what's happening is you're looking at a 'preview' of each file being clicked, with each preview displaying under a single tab. You can tell if a file is in 'preview' mode if the file name is in italics, as the screenshot above indicates.

If you want to open multiple files that don't stay in preview mode until they're replaced, you can double click a file and it will open in regular open/edit mode. It will keep its own tab and you'll recognize its open status by the fact that the file name won't be in italics.

If you don't like this behaviour and would rather each file opens with single click with no preview mode, you can adjust this via your settings. Open the Settings UI and search for "enable preview". You'll see a few options appear.
 
Disabling preview mode in VS Code file navigation

The second one in the image above is the one you want to change. Uncheck that box to disable file previews when navigating files in the Explorer.

You might like the default behaviour. It does take some getting used to at first, but there's always the option to change it if you prefer a more familiar 'open whatever I click' mode that doesn't use the temporary previews.

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

VS Code Tools

Thunder Client — A lightweight Rest API client extension for VS Code to make API testing easy with a scriptless GUI.

Watermelon — An open-source integration between GitHub and VS Code to document code and view Git Blame.

Omni Theme — A dark VS Code theme from the team at Rocketseat.

HTML End Tag Labels — A useful VS Code extension that adds labels to the end tags of HTML elements, so you know which elements are closed without having to add HTML comments.

VS Code Articles

Easier Jupyter Notebook Setup for Python in VS Code Tooling — Some updates to Python-based tooling for Visual Studio Code.

Useful VS Code Extensions For Front-End Developers — A huge post from a little over a year ago on Smashing Magazine with lots of suggestions on extensions and tools.

When You Close VS Code Without Saving What You Were Working On — A meme shared on Twitter by Jack Forge. Is this a common problem on VS Code? I suppose it depends on your setup.

We Found the Best JavaScript Newsletter — Bytes is probably the funniest web dev newsletter you'll ever read. If you like this newsletter, I've got a feeling you'll love Bytes too. There's a reason 100k developers read it every week.   Sponsor 

The Alternatives

5 WebStorm Plugins To Boost Your Productivity — From an author who recently migrated from VS Code to WebStorm.

IntelliJ IDEA 2022.2 Is Out — An extensive overview of the latest version of JetBrains' IDE.

WeakVim — An opinionated, modular, and documented configuration for Vim that's easy to modify to your own needs.


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.