VS Code boot tasks

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:

• Rails server
• webpack-dev-server
• sidekiq
• guard
• mailcatcher

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).

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.