How To Always Open Files in New Tab in VSCode

What is VSCode preview mode and how to enable/disable this mode.

The VSCode has rocketed its way to one of the top development IDEs due to its fresh look, usability, tons of feature sets, and customization options besides being very lightweight. But such extensive customization options at times do overwhelm the user and sometimes make it a tedious task to find the precise customization option to tweak to meet your goals.

Though the VSCode team has done an excellent job by introducing the ‘command palette’ (Ctrl+Shift+P), which indeed makes it very easy to find almost anything that VSCode has to offer, however, in order to make use of ‘command palette’ you still need to know the precise ‘keyword’ to search. I recently encountered one such problem and despite the ‘command palette’, I had to scan through several settings, eventually locating the solution.

1. Problem Description

I noticed whenever I opened any file in VSCode, it used to open the file in the already opened tab of the editor. Every time I clicked on any file to open it would replace the previously opened file with the new file in the same tab rather than opening the new file in a new tab. Because of this, I not only used to lose the previously opened file but was also stuck with a single tab.

My investigation revealed that this was happening due to the VSCode editor’s feature called ‘Preview Mode’. This mode is enabled by default and you can easily identify that you are opening the editor tab in ‘Preview Mode’ by noticing that the tab name is written in ‘italicized’ letters, as shown below.

blank

Hence if you see your editor tab name is ‘italicized’ that means you are viewing in ‘Preview Mode’. This is the reason you are not able to open new

2. What is Preview Mode and Why?

I guess the problem description in the above section duly explains what is ‘Preview Mode’, so the next question arises, why? At the onset, it may seem an annoying feature and one may even assume that reason behind having this enabled by default must be a bug or design issue in VSCode release. However this is not the case and In fact, most likely this is a deliberately designed feature introduced for optimizing the user experience or even performance.

Consider the example, where a developer might click on a number of files to view/read the code or maybe during debugging but eventually ends up working on just a single file. This is a very usual scenario and may happen repeatedly and frequently. But this also means that the developer would have opened a lot of files (and hence tabs) during the course of work. Obviously, this would clutter the view of the editor gradually decreasing the usability or even efficiency. Hence the ‘Preview Mode’!

3. Open Files in New Tab While in Preview Mode

While in ‘Preview Mode’, you can still open files in a new tab. Given below are a couple of ways you can do this:

3.1. Open Files Using Double-Click

You can use the double click to open each successive file. Using double click the successive files would open in a new tab while retaining the existing tabs.

3.2. Right-Click Tab Options (Keep Open)

Another way to keep the existing ‘Preview Mode’ tab open is by right-clicking on the ‘Preview Mode’ tab and selecting the option called ‘Keep Open’ from right-click context menu.

blank

3.3. Double-Click the Tab

If the tab you are working on is already open in ‘Preview Mode’ and you want this tab to remain open then you can do so by simply double-clicking on the tab. Doing so would make the tab to lose ‘Preview Mode’ and next time when you click on another file, that file would open in a new tab.

4. Set VSCode To Always Open Files in New Tab

If you are not a big fan of ‘Preview Mode’ and you want to permanently get rid of this feature, you can turn this feature off. Once the ‘Preview Mode’ is turned off, every file you open would open in a new tab. Here are couple of ways you can achieve this.

4.1 VSCode Settings UI

You can turn off ‘Preview Mode’ via the VSCode settings UI. To do so, open VSCode settings and search for ‘enable preview’. Locate the two settings named the following:

Workbench › Editor: Enable Preview
Workbench › Editor: Enable Preview from Quick Open
blank

 Uncheck both the settings and this would disable the ‘Preview Mode’.

4.2 VSCode Settings Json

Finally, if you prefer to turn off ‘Preview Mode’ via modifying the settings.json for the user. Open the settings.json and look for the following two keys and set their value to ‘false’ as shown below:

"workbench.editor.enablePreview": false,
"workbench.editor.enablePreviewFromQuickOpen": false

Tushar Sharma
Tushar Sharmahttps://www.automationdojos.com
Hi! This is Tushar, the author of 'Automation Dojos'. A passionate IT professional with a big appetite for learning, I enjoy technical content creation and curation. Hope you are having a good time! Don't forget to subscribe and stay in touch. Wishing you happy learning!

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Recent Posts

RELATED POSTS

How To Change Font for Eclipse Package Explorer

This article shows how to change the Package Explorer text size and style. The font used for tree and table views can now be customized...

Shortcut To Auto-Insert ‘main’ Method in IntelliJ

IntelliJ Live Templates Live templates let you insert frequently-used or custom code constructs into your source code file quickly and efficiently IntelliJ IDEA comes with a...

How To Add SSH Private Keys to Eclipse

One of the common use cases for accessing Git repositories on Github is authentication via SSH keys. This offers a secure way of working...

How To Change Font for Eclipse Editor Pane

This article shows how to change the text size and style for the Eclipse editor pane. The font used for Eclipse editor pane can be...

Â

RECENT 'HOW-TO'

How To Install Oh-My-Posh On Windows PowerShell

Oh-My-Posh is a powerful custom prompt engine for any shell that has the ability to adjust the prompt string with a function or variable. It does not...

MORE ON CODEX

MORE IN THIS CATEGORY

How To Change Font for Eclipse Package Explorer

This article shows how to change the Package Explorer text size and style. The font used for tree and table views can now be customized...

How To Add SSH Private Keys to Eclipse

One of the common use cases for accessing Git repositories on Github is authentication via SSH keys. This offers a secure way of working...

How to View Java API Doc Hints within IntelliJ

IntelliJ Quick Documentation So how do you generally refer your Java API Doc? If you use Google or online Java API Doc or even a...

How To Change Font for Eclipse Editor Pane

This article shows how to change the text size and style for the Eclipse editor pane. The font used for Eclipse editor pane can be...

CHECKOUT TUTORIALS

Working with Selenium WebElements

Table of Contents 1. Selenium WebElements 2. WebElement Locators 3. Working With Text Box 4. Working With Buttons 5. Checkboxes and Radio Buttons 6....
- Advertisement -spot_img