Visual Studio Code (VS Code) is a popular open-source code editor used by developers for writing and debugging code. One of its standout features is the ability to open multiple files in tabs within the editor.
However, VS Code has a “Preview Mode” enabled by default which causes some confusion when opening files. When you single-click on a file, it opens that file in preview mode rather than a persistent tab. If you then open another file, the new file replaces the existing preview tab instead of opening in a separate tab.
In this guide, you’ll learn:
- What is Preview Mode and why it’s enabled by default
- How to always open files in new tabs instead of preview mode
- Tips for opening files in new tabs even when Preview Mode is enabled
- How to customize VS Code tab behavior to suit your preferences
Table of Contents
What is Preview Mode
Preview Mode is a feature in VS Code that allows you to quickly preview files by opening them in a special disposable tab. The tab name appears italicized to indicate it’s in Preview Mode.
Preview Mode prevents you from unintentionally opening too many tabbed editors. It’s meant for quickly checking a file’s contents without cluttering up your workspace.
However, Preview Mode behavior may not suit some workflows where you want files to persist in separate tabs once opened.
Disable Preview Mode
You can fully disable Preview Mode through VS Code’s settings:
- Go to Code > Preferences > Settings
- Search for
workbench.editor.enablePreview - Uncheck the setting to disable Preview Mode
Now when you single-click files, they will open in persistent editor tabs rather than a temporary preview tab.
Open Files in New Tabs from Quick Open
The Quick Open menu accessed via Ctrl/Cmd + P also opens files in preview mode by default.
To disable preview and always open an editor tab from Quick Open:
- Go to Code > Preferences > Settings
- Search for
workbench.editor.enablePreviewFromQuickOpen - Uncheck the setting
Tips for Opening Tabs from Preview Mode
Even with Preview Mode enabled, there are easy ways to open a real tab for a file you’re previewing:
- Double-click the file in the Explorer instead of single-clicking
- Double-click the preview tab itself
- Right-click the tab and select Keep Open
This moves the file from preview into a persistent tab without having to disable Preview Mode.
Customizing Tab Behavior
You can customize VS Code’s editor tab behavior in several ways:
- Retain tabs from your previous session by enabling
workbench.editor.restoreViewState - Allow preview tabs to be reused by files you open later with
workbench.editor.enablePreviewFromQuickOpen - Restrict tabs to one group or allow splitting tabs into multiple groups
Experiment with settings to find your optimal tab workflow.
Conclusion
Preview Mode can cause confusion when first getting started with VS Code, but is easy to disable or work around once you understand its purpose.
With the settings and tips covered in this guide, you can configure VS Code’s tabs to best suit your development workflow. Customize tab persistence, preview behavior, tab limits, and more.
Let us know if you have any other questions on configuring VS Code’s tabs and editors!
