stefanluptak

stefanluptak

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:

Most Liked

LostKobrakai

LostKobrakai

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"
      ]
    }
  ]
}
lucaong

lucaong

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:

NobbZ

NobbZ

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?

Last Post!

pitus

pitus

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?

Where Next?

Popular in Questions Top

electic
Hi, I am new to Elixir. I am trying to use the DateTime component to insert a date into MySQL however the there seems to be no way to fo...
New
hariharasudhan94
Lets say I have map like this fetching from my database %{"_id" => #BSON.ObjectId<58eb1a7a9ad169198c3dXXXX>, "email" => ...
New
PeterCarter
There are pre-rolled solutions for other frameworks that do work. However, Phoenix does not seem to have these. Have people had good expe...
New
Lily
In templates/appointment/index.html.eex: <%= for appointment <- @appointments do %> <tr> <td><%= appoi...
New
freewebwithme
Using vs code and installed ElixirLS: support and debugger. And I got an error popped up on start up says Failed to run ‘elixir’ comma...
New
vrod
I am using the Starship cross-shell prompt – it seems pretty nice, but I get some errors: [WARN] - (starship::utils): Executing command ...
New
JorisKok
I have a server on AWS, and was running a load test using artillery. When looking at the Phoenix dashboard I see the Ports going to 100% ...
New

Other popular topics Top

JeremM34
Hello, how can I check the Phoenix version ? Thanks !
New
lanycrost
Hi everyone! I need implement if…else if…else condition from my elixir code, and anymore of this control flow structures not work proper...
New
axelson
This post is a wiki (feel free to hit the edit button near the bottom right of this post to add your own changes!) This post collects co...
239 49266 226
New
gausby
I asked this very same question on twitter and got some interesting feedback, but I thought it would be a good question to ask here as we...
1207 40165 209
New
sergio
Kind of like when jquery came out, it was super necessary. Existing drag and drop libraries have a bunch of baggage to support old browse...
New
senggen
Erlang/OTP 25 [erts-13.2.2] [source] [64-bit] [smp:8:8] [ds:8:8:10] [async-threads:1] 15:22:35.803 [error] gen_event {lager_file_backend...
New

We're in Beta

About us Mission Statement