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.

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.

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

 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