7

I need to run several scripts to start my dev environment. I prefer doing in VSCode.

While using concurrently etc. is good, I'd very much like them to run in separate terminal windows to make it easier to track output for any process.

So let's say I need to run

npm start and npm run serve-backend, and starting both but in separate terminal windows (and preferrably opening a third terminal window for future work).

Is there any way to do this in vscode?

Lars Holdaas
  • 691
  • 1
  • 4
  • 24
  • You can always open more terminal windows with the shortcut Ctrl+Shift+` (US-Standard keyboard, might be different on your layout) or click on the `+` sign in the terminal window. Is this what you're looking for? – jps Aug 08 '18 at 13:09
  • Thanks but it's not what I'm looking for. I want to do it with a script, so that I automatically get two terminal windows opened, one running my back-end and the other serving my front-end, without having to manually open both windows and running the two scripts. – Lars Holdaas Aug 09 '18 at 14:03
  • @LarsHoldaas You can define a macro to do this. E.g. via this extension: https://marketplace.visualstudio.com/items?itemName=geddski.macros I've tried to create the macro for your use case, but I somehow couldn't make it work in a reasonable time, so forgive me for not posting a complete answer. – Tin Aug 10 '18 at 06:42
  • 1
    I tried this approach too but I couldn't figure it out, and I couldn't find any examples similar to what I wanted :( Oh well thanks anyway ;) – Lars Holdaas Aug 27 '18 at 12:55
  • Duplicate question? [How can I open a new terminal tab in VSCode's integrated terminal using a shell script?](/q/63641266) – starball Feb 13 '23 at 02:57

1 Answers1

0

Oh. I might have figured it out. You can do something like this via tasks API (.vscode/tasks.json):

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "Dev-env",
            "type": "shell",
            "command": "echo Starting",
            "problemMatcher": [],
            "dependsOn": [
                "Backend",
                "Frontend"
            ],
        }
        {
            "type": "npm",
            "path": "backend"     
            "script": "start",
            "problemMatcher": [],
            "label": "Backend"
        },
        {
            "type": "npm",
            "script": "start",
            "path": "frontend",
            "problemMatcher": [],
            "label": "Frontend",
        },
        
    ]
}

Then running task Dev-env will spin up two tasks in parallel, each with its own output. (Ctrl + Shift + P => Run Task => Dev-env)

Pavel Schoffer
  • 492
  • 1
  • 3
  • 11