Using VSCode on multiple monitors

Hello everybody,

usually, I use a 29" ultra-wide monitor for VSCode which can easily accomodate explorer (files panel) + file with code + file with test + integrated terminal. This all in one VSCode window.

Because of the Covid-19 situation, I am working from home with a 13" MacBook Pro + 14" portable USB-C display next to each other and I am not able to use the second display with VSCode.

Do you have some ideas, how to detach the integrated terminal from VSCode or how to use external terminal for mix test --color --trace ${file} task triggered by a keyboard shortcut for example?

I did a bit of research, and apparently, this is a known and very popoular issue. I’ve been just wondering if somebody has some workaround.

Thanks a lot. :slight_smile:

1 Like

You can move the integrated terminal to the side, but afaik not out of the main window. You can create tasks for vscode by creating .vscode/tasks.json, but assigning hotkeys to them is super unintuitive because you need to assign the hotkey the label of the task to trigger. The command for it is “workbench.action.tasks.runTask”.

{
	// See https://go.microsoft.com/fwlink/?LinkId=733558
	// for the documentation about the tasks.json format
	"version": "2.0.0",
  "tasks": [
    {
      "label": "Run build",
      "type": "shell",
      "command": "mix compile",
      "group": {
        "kind": "build",
        "isDefault": true
      },
      "presentation": {
        "reveal": "always",
        "panel": "dedicated",
        "focus": true
      },
      "problemMatcher": [
        "$mixCompileError",
        "$mixCompileWarning"
      ]
    },
    {
      "label": "Run tests",
      "type": "shell",
      "command": "mix test",
      "group": {
        "kind": "test",
        "isDefault": true
      },
      "presentation": {
        "reveal": "always",
        "panel": "shared",
        "focus": true
      },
      "problemMatcher": [
        "$mixCompileError",
        "$mixCompileWarning",
        "$mixTestFailure"
      ]
    },
    {
      "label": "Run stale tests",
      "type": "shell",
      "command": "mix test --stale",
      "group": "test",
      "presentation": {
        "reveal": "always",
        "panel": "shared",
        "focus": true
      },
      "problemMatcher": [
        "$mixCompileError",
        "$mixCompileWarning",
        "$mixTestFailure"
      ]
    },
    {
      "label": "Run tests (current file)",
      "type": "shell",
      "command": "mix test ${relativeFile}",
      "group": "test",
      "presentation": {
        "reveal": "always",
        "panel": "shared",
        "focus": true
      },
      "problemMatcher": [
        "$mixCompileError",
        "$mixCompileWarning",
        "$mixTestFailure"
      ]
    },
    {
      "label": "Run tests (current test)",
      "type": "shell",
      "command": "mix test ${relativeFile}:${lineNumber}",
      "group": "test",
      "presentation": {
        "reveal": "always",
        "panel": "shared",
        "focus": true
      },
      "problemMatcher": [
        "$mixCompileError",
        "$mixCompileWarning",
        "$mixTestFailure"
      ]
    },
    {
      "label": "Run coverage",
      "type": "shell",
      "command": "mix coveralls.html",
      "group": "test",
      "presentation": {
        "reveal": "always",
        "panel": "shared",
        "focus": true
      },
      "problemMatcher": [
        "$mixCompileError",
        "$mixCompileWarning",
        "$mixTestFailure"
      ]
    },
    {
      "label": "Run coverage (current file)",
      "type": "shell",
      "command": "mix coveralls.html ${relativeFile}",
      "group": "test",
      "presentation": {
        "reveal": "always",
        "panel": "shared",
        "focus": true
      },
      "problemMatcher": [
        "$mixCompileError",
        "$mixCompileWarning",
        "$mixTestFailure"
      ]
    },
    {
      "label": "Generate documentation",
      "type": "shell",
      "command": "mix docs",
      "group": "none",
      "presentation": {
        "reveal": "always",
        "panel": "dedicated",
        "focus": true
      },
      "problemMatcher": [
        "$mixCompileError",
        "$mixCompileWarning"
      ]
    },
    {
      "label": "Format project",
      "type": "shell",
      "command": "mix format",
      "group": "none",
      "presentation": {
        "reveal": "never",
        "panel": "dedicated"
      },
      "problemMatcher": [
        "$mixCompileError",
        "$mixCompileWarning"
      ]
    },
    {
      "label": "Format file",
      "type": "shell",
      "command": "mix format ${relativeFile}",
      "group": "none",
      "presentation": {
        "reveal": "never",
        "panel": "dedicated"
      },
      "problemMatcher": [
        "$mixCompileError",
        "$mixCompileWarning"
      ]
    }
  ]
}
2 Likes

Thanks a lot. I have this already working. On my 29" monitor, I am using the integrated terminal on the right side with all you mentioned. But doing that on 13" monitor is painful, because there’s not much space to see the actual code. So I wanted to use the external terminal (on the second monitor) for the output of tests or other tasks.

Because of similar issues (not as painful as yours though) my boss agreed to send me one of my offices screens, he refused though that I take it with me in the train :smiley: .

Should be here tomorrow.

Perhaps you can ask your boss for similar as well, or if they try to rent a bigger screen short-term, perhaps even split cost?

1 Like

I got a car pooling ride and drove to my office to take my 32’’ screen home (making sure to maintain social distancing in the process, let’s all do our part :slight_smile: ). I had never realized how huge this screen is until I placed it on my small desk at home :open_mouth:

2 Likes

Well, those are not the solutions I am looking for, although very pragmatic. :smiley: I can bring that 29" monitor home in 20 minutes. That’s not a problem. I would still like to detach that integrated terminal or use external one when travelling etc.
Well maybe I should finally switch to Vim or Emacs. I tried that multiple times already, but never persisted long enough to make it permanent. :man_shrugging:
We’ll see. Thanks anyway.

1 Like

Same problem here (well, similar).
I’m used to Visual Studio where I use one vertical screen as an editor and the other horizontal for everything else, including side-bar explorer, properties…
With vscode I have too little space to show a wide EXPLORER / other sidebar along with the text editor on my the vertical monitor and I’d like to move the EXPLORER sidebar to the secondary monitor.
So far, I have found no way to do so.
Perhaps someone would consider implementing this feature, of dragging any panel out of vscode’s main window into another monitor as part of the same project?