How to Always Open Files in a New Tab - VSCode

So one day while you're hacking away you realize that VS Code just doesn't want to let you keep your file tabs open. Every time you go to swap files, the one you were JUST working on disappears, and you have to find it again in the explorer panel.

Soon, you discover that a file will stay open once it's been edited. Your new workaround becomes always having to edit a file to get it to stay open - even if it doesn't need to be edited!

It's time to solve this.

Sometimes when you click on a file in the explorer panel, you want it to open in a NEW tab, instead of replacing the file that you're currently working on. This can get frustrating if you have no clue what's going on or you're coming from a different text editor that does not have this behavior by default.

Well, fear not.

This quick guide will show you how this behavior works, how to work around it, why it exists, and how to change the default behavior if you wish.

If you're looking for the quick-fix, here it is:

How do I make VS Code open files in a new tab?

There are a few ways to achieve this. The most immediate, simple way to keep files open in VS Code is by double-clicking files in the explorer panel. The next is to right-click the tab and select "Keep Open." The last is to execute the "Keep Open" shortcut (Ctrl + K Enter) while the tab is open and in focus.

1. Double-click your files instead of single-clicking.

Instead of single clicking on your files, (like I do in the previous GIF) double-click. This will tell VS Code that you want the file to stay open when you switch to a new file.

Here's my beautiful demonstration of this:

As you can see, when I double-click "sleep.js" and then navigate to "params.js" with a single-click, "sleep.js" remains open, and the title of the tab is in normal non-italicized text.

2. Right click your tab and select "Keep Open"

This one's self-explanatory. Simply right-click on the Preview Mode tab on the tab at the top of your screen (while it's italicized) and click on "Keep Open" once the context menu pops up.

3. Use the (Ctrl + K Enter) keyboard shortcut.

This should be done while you have the tab you want to close selected. If you want to do this on Mac, the command is very similar: (Command + K Enter). This will do the exact same thing as clicking the "Keep Open" option on the context menu.

4. Double-click the tab you want to keep open

This works if the tab you are working with is in "Preview Mode" (italicized) and you want it to stay open when you open another file.

See how the text goes from italicized to normal after I double-click? It's magic.

How do I know if my file is "sticky" or not?

By "sticky" I mean that the tab will remain open even after you switch files. The way to tell is to look at whether or not the file name text on the tab is italicized or not. If it's an "ephemeral" tab, VS Code will show the file name in an italicized text.

See how "params.js" is italicized in the screenshot below?

This tells me that as soon as I click on another file in the explorer panel, params.js is going to disappear and be replaced by the new file.

Why doesn't VS Code automatically open files in a new tab?

The team behind VS Code did not program this in by accident. There's probably a whole team solely dedicated to optimizing the user-experience of VS Code that decided this was a good thing to keep. In other words, it's a feature, not a bug. They actually call this "Preview Mode," and it works exactly as it sounds.

Very often while programming you will only need to open a file for a small window of time, to "preview" it's contents.

I'll give you an example. Let's say I'm working on a project that is throwing a weird error at me, and I suspect it is coming from an invalid value in one of my config files (let's call them "config.json" and "config2.json").

Instead of fully (double-click) opening each of them, I can quickly browse both within the same tab, and then move along to the next files if my suspicions were incorrect. Instead of opening up both files completely and then closing each tab one-by-one, all I have to do is close a single tab once. While it may not seem like a big deal when you're only swapping between a couple of files, this becomes very convenient when swapping between many files at a time.

There's another scenario where this feature can save you from having to clean up tons of file tabs. Sometimes while debugging, you want to quickly analyze the flow of data through your program. This means hopping from one file to another many times and following the trail.

If this feature did not exist, you would constantly have to open and close 10+ files each time you did this. That's not fun.

How do I make VS Code open a new tab by default?

So you're a creature of habit. You're not convinced that this Preview Mode "feature" is a good one. I get it. I thought the same thing when I started using VS Code. Here's how to force VS Code to open files in a new tab. Doing this will override the default behavior of VS Code.

There are two relevant settings you can edit to disable Preview Mode:

• "workbench.editor.enablePreview"
• "workbench.editor.enablePreviewFromQuickOpen"

The first setting will allow you to enable or disable Preview Mode altogether. Out of sight, out of mind.

The second one will allow you to enable or disable Preview Mode only from the Quick Open menu.

In order to update these settings, you must first find and open your settings file. The easiest way to get there is by using the Command Palette. Fortunately for you, I have mapped out exactly the steps for you to take below. It's a quick process.

1. Open the command palette

If you're a Windows user, you can open the Command Palette with the shortcut (Ctrl+Shift+P). On Mac, its the same but with Command instead of Ctrl.

2. Enter "Preferences: Open User Settings"

If you start typing it out, it should autocomplete the phrase for you.

3. Navigate to "workbench.editor.enablePreview"

The easiest way to find it is by entering "workbench.editor.enablePreview" into the search bar.

4. Turn the setting off.

Set it's value to "false" by un-checking the box next to the setting.

After turning the setting off, VSCode will always open your files in a new tab, and keep tabs open afterwords.

Is the Preview Mode feature useful?

Some may disagree, but I believe it is. Once you get the hang of it, it becomes second-nature. It just comes down to making snappy decisions:

• Do you plan to work on a file? Double-click.
• Do you just want to quickly browse the contents of a file? Single-click.

The decision is conscious at first, and kind of annoying, but after a while you'll find that you do this without thinking. As with most things, practice makes perfect.

Whenever you get annoyed with the quirks of VS Code, just imagine yourself having to learn Vim. :)

I hope this guide helped.