Skip to content

VS Code: Floating Window

VS Code Boosting Productivity with Floating Windows thumbnail

In this post, we’ll explore how to boost your productivity using floating windows in VS Code.

I’ll show you how to detach tabs into their own windows, customize your layout, and use a few handy commands to manage windows more efficiently.

Let’s dive in 🤿

Contents hide
1. Move an Editor Tab Into a New Window
2. Move Terminal & Copilot Chat Into a New Window
3. Customize the Floating Window
4. Keyboard Shortcuts
4.1. Comments

đź“ą I highly recommend you watch the video as well if you want to see a visual representation of this article

Move an Editor Tab Into a New Window

  1. Open a file in your main VS Code window.
  2. Right-click the tab of the file you want to open in a new window.
  3. Select Move Editor into New Window

Alternatively, you can drag the tab out of the main window. It will automatically open in a new floating window.

The new window works just like the main editor. You still get syntax highlighting, autocomplete, and everything else. You can even split files or open additional floating windows.

Move Terminal & Copilot Chat Into a New Window

Floating windows aren’t just for editor tabs.

You can also move the integrated terminal or Copilot chat to their own windows.

Let’s start with the terminal.

  1. Press CTRL + ` (or CMD + `) to open the terminal.
  2. Left-click the terminal profile icon
  3. Select Move Terminal into New Window

To move the terminal back to the main window, either drag and drop it or right-click its tab and choose Move Terminal into Panel.

Now, let’s do the same for Copilot chat.

In my case, Copilot chat is hidden by default. To show it, click on the Secondary Side Bar. Then click the ... menu and select Open Chat in New Window.

Customize the Floating Window

You can customize the floating window in a few ways:

  • To make it more compact, click Set Compact Mode
  • To pin it on top of all windows, click Set Always on Top

The latter is especially useful if you’re working with multiple monitors or juggling several windows. For example, when debugging or referencing a documentation.

Keyboard Shortcuts

As mentioned earlier, there are built-in commands to control floating window behavior. Here are the main ones:

  • workbench.action.toggleWindowAlwaysOnTop: to toggle always on top mode
  • workbench.action.enableWindowAlwaysOnTop: to set the floating window always on top
  • workbench.action.disableWindowAlwaysOnTop: to set the floating window to normal
  • workbench.action.toggleCompactAuxiliaryWindow: to toggle compact mode
  • workbench.action.enableCompactAuxiliaryWindow: to enable compact mode
  • workbench.action.disableCompactAuxiliaryWindow: to disable compact mode

To assign a keyboard shortcut:

  1. Press CTRL + K and CTRL + S (CMD + K and CMD + S on macOS) to open the Keyboard Shortcuts panel.
  2. Search for the desired command, for example, workbench.action.toggleWindowAlwaysOnTop.
  3. Assign your preferred shortcut.

Now, instead of clicking the Set Always on Top button, just press the shortcut to toggle it instantly.

That’s all! Happy coding 💜

Let me know what you think about this article in the comments section below.

If you find this article helpful, please share it with others and subscribe to the blog to support me, and receive a bi-monthly-ish e-mail notification on my latest articles.   
  

Comments