Michael Anhari

VS Code boot tasks

March 30, 2020
  • productivity
  • vscode

Shortly after switching from vim and tmux to VS Code, I realized that I needed something similar to tmuxinator for easily booting up all of an application's processes.

For example, in a Rails app I might need to run the following:

I used to use foreman for this, but after a while I really wanted each process in its own space to make them easier to parse.

Recently I discovered the power and flexibility of VS Code custom tasks.

VS Code custom tasks

VS Code allows setting up custom tasks within .vscode/tasks.json at a project's root, and these tasks can be triggered from the command palette (⌘⇧P →Tasks: Run Task).

Here's an example task file on a project for a current client:

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Boot",
      "dependsOn": ["Server", "Sidekiq", "Guard", "Webpack", "Mailcatcher"],
      "problemMatcher": [],
      "runOptions": {
        "runOn": "folderOpen"
      }
    },
    {
      "label": "Server",
      "type": "shell",
      "command": "pkill -f puma || bundle && yarn install && bin/rails server -p 3001",
      "group": "build",
      "presentation": {
        "clear": true,
        "echo": true,
        "focus": false,
        "reveal": "always"
      },
      "problemMatcher": []
    },
    {
      "label": "Sidekiq",
      "type": "shell",
      "command": "bundle exec sidekiq -t 25",
      "group": "build",
      "presentation": {
        "clear": true,
        "echo": true,
        "focus": false,
        "reveal": "always"
      },
      "problemMatcher": []
    },
    {
      "label": "Guard",
      "type": "shell",
      "command": "bundle exec guard",
      "group": "build",
      "presentation": {
        "clear": true,
        "echo": true,
        "focus": false,
        "reveal": "always"
      }
    },
    {
      "label": "Webpack",
      "type": "shell",
      "command": "./bin/webpack-dev-server",
      "group": "build",
      "presentation": {
        "clear": true,
        "echo": true,
        "focus": false,
        "reveal": "always"
      }
    },
    {
      "label": "Mailcatcher",
      "type": "shell",
      "command": "mailcatcher",
      "presentation": {
        "reveal": "always",
        "focus": true
      },
      "problemMatcher": []
    },
    {
      "label": "Open Rails console",
      "type": "shell",
      "command": "bin/rails console",
      "presentation": {
        "reveal": "always",
        "focus": true
      },
      "problemMatcher": []
    }
  ]
}

The Boot task automatically kicks off each of the tasks in the dependsOn key in a separate terminal process when opening the project in VS Code (see the runOptions setting).

Screenshot of tasks loaded into the VS Code terminal switcher
Screenshot of tasks loaded into the VS Code terminal switcher

And voila! To start hacking on a project, all you have to do is open it in VS Code. You can also use ⌘R to reboot your application.