What are your first steps after opening a project in VSCode? I think you are clicking or typing something in the terminal to start a debug server. So you are doing the same things always when you open a project. Don't be a monkey! Just follow me!

In a project folder create a file:

.vscode/tasks.json

Put an array of your commands there:

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Run SPA startup",
      "type": "shell",
      "command": "cd spa && npm run serve",
      "presentation": {
        "reveal": "always",
        "panel": "new",
        "group": "develop",
      },
      "runOptions": { "runOn": "folderOpen" }
    },
    {
      "label": "Run Django",
      "type": "shell",
      "command": "cd src && pipenv run python manage.py runserver",
      "presentation": {
        "reveal": "always",
        "panel": "new",
        "group": "develop",
      },
      "runOptions": { "runOn": "folderOpen" }
    }
  ]
}

Press Ctrl+P in Visual Studio Code and type:

>Tasks: Manage Automatic Tasks in Folder

Press enter twice to allow:

Autostart multiple commands in VSCode terminal

Restart Visual Studio code and after some time terminals with commands will appear:

Two commands in vscode terminal

Explanations:

  • Here we use 2 commands: the first starts SPA dev server with npm run serve and the second starts Django dev server
  • "label" defines the name of the task
  • before running the command we change dir with cd because our commands in our project need to be executed in dedicated folders
  • The terminals are executed in "Split window mode" so we can monitor the output of both commands at the same time and if needed maximize them.

Tips:

  • If you don't want to split terminals window and have dedicated switchable terminals remove "presentation" > "group" setting
  • Remove .vscode folder from .gitignore if it is there to share this with your team. The folder is completely compatible with VCS.
  • You can add other rare tasks e.g. for npm ci See "Running rare tasks manually" below.
  • For Windows, we recommend using WSL 2

Running rare tasks manually

Probably you have some other rare tasks e.g. npm ci . Most likely you don't need to do npm ci every time on startup but need it sometime during development when VSCode already open.

What we need to define tasks and without "runOptions" > "runOn" so it will not be autostarted.

Couple examples for npm ci and Django migrations:

    {
      "label": "Run NPM CI",
      "type": "shell",
      "command": "cd spa && npm ci",
      "presentation": {
        "reveal": "always",
        "panel": "new",
        "group": "develop",
      },
    },
    {
      "label": "Run makemigrations and migrate",
      "type": "shell",
      "command": "cd src && pipenv run python manage.py makemigrations && pipenv run python manage.py migrate",
      "presentation": {
        "reveal": "always",
        "panel": "new",
        "group": "develop",
      },
    }

Then to run the task press Ctrl+P, type: task<SPACE> and select the task to run.

Image for a hint

Read more options on the VSCode website: Integrate with External Tools via Tasks.

And stay efficient to improve your life 🚀

Autostart multiple commands in VSCode preview

#vscode