Ora

How to Remove Code Preview in VS Code?

Published in VS Code Editor Settings 4 mins read

To remove code preview in VS Code, you need to disable the "preview editor" functionality through its settings. This prevents files from opening in a temporary tab and ensures they open as permanent tabs immediately.

Understanding VS Code Preview Editors

When you single-click a file in the Explorer, open a file from Quick Open (Ctrl/Cmd+P), or click a search result, VS Code often opens it in a "preview editor." This is a temporary tab that gets replaced when you open another file in preview mode or when you double-click the current file to make it permanent. While useful for quickly browsing code, it can be disruptive if you prefer every file to open permanently.

Disabling Preview Editors Globally

You can disable preview editors for all scenarios by modifying a core VS Code setting.

Method 1: Using the Settings Editor (GUI)

  1. Open Settings: In VS Code, go to File > Preferences > Settings (or press Ctrl+, on Windows/Linux, Cmd+, on macOS).

  2. Search for Preview: In the search bar at the top of the Settings tab, type enablePreview.

  3. Disable Global Preview: Locate the setting named Workbench > Editor: Enable Preview. Uncheck the box next to this setting.

    • Setting name in settings.json: workbench.editor.enablePreview
    • Effect: When unchecked (false), files opened from the Explorer (single-click), search results, or other common actions will open as permanent tabs directly.

Method 2: Editing settings.json

For users who prefer direct JSON editing:

  1. Open settings.json: In VS Code, open the Command Palette (Ctrl+Shift+P or Cmd+Shift+P) and type Preferences: Open User Settings (JSON).

  2. Add/Modify Setting: Add or modify the following line in your settings.json file:

    {
        "workbench.editor.enablePreview": false
    }
  3. Save File: Save the settings.json file. The changes will apply immediately.

Disabling Preview Editors from Quick Open

There's a separate setting to control preview behavior specifically when opening files via Quick Open (the file picker you get when pressing Ctrl+P or Cmd+P).

Method 1: Using the Settings Editor (GUI)

  1. Open Settings: Go to File > Preferences > Settings (or Ctrl+, / Cmd+,).

  2. Search for Quick Open Preview: In the search bar, type enablePreviewFromQuickOpen.

  3. Disable Quick Open Preview: Locate the setting named Workbench > Editor: Enable Preview From Quick Open. Uncheck the box next to this setting.

    • Setting name in settings.json: workbench.editor.enablePreviewFromQuickOpen
    • Effect: When unchecked (false), files selected from the Quick Open (Ctrl+P / Cmd+P) list will open as permanent tabs instead of preview tabs.

Method 2: Editing settings.json

  1. Open settings.json: Open the Command Palette (Ctrl+Shift+P / Cmd+Shift+P) and type Preferences: Open User Settings (JSON).

  2. Add/Modify Setting: Add or modify the following line in your settings.json file:

    {
        "workbench.editor.enablePreviewFromQuickOpen": false
    }
  3. Save File: Save the settings.json file.

Summary of Preview Settings

To fully disable all preview editor behaviors, it's recommended to set both options to false.

Setting Name (GUI) settings.json Key Description Recommended Value to Disable Preview
Workbench > Editor: Enable Preview workbench.editor.enablePreview Controls preview editors globally for single-clicks in Explorer, search results, etc. false
Workbench > Editor: Enable Preview From Quick Open workbench.editor.enablePreviewFromQuickOpen Controls preview editors specifically when opening files via Quick Open (Ctrl+P / Cmd+P). false

Alternative: Making a Preview Editor Permanent

Even with preview enabled, you can always make a preview tab permanent by:

  • Double-clicking the file name in the Explorer.
  • Double-clicking the tab itself.
  • Editing the file (typing or pasting content often makes it permanent, depending on settings).

By adjusting these settings, you gain complete control over how files open in your VS Code workspace, ensuring a workflow that suits your preferences. For more details on VS Code settings, refer to the official documentation.