VSCode Boot Tasks
Published: 2020-04-03 01:43:00

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 project's root, and these tasks can be triggered from the command palette (`⌘⇧P` &rarr; `Tasks: Run Task`).

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

```json
{
  "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](https://dev-to-uploads.s3.amazonaws.com/i/c6pqjisg5s1wmmq1tich.png)

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.

[custom tasks]: https://code.visualstudio.com/docs/editor/tasks#_custom-tasks
[tmuxinator]: https://github.com/tmuxinator/tmuxinator
[webpack-dev-server]: https://www.github.com/webpack/webpack-dev-server
[sidekiq]: https://sidekiq.org
[guard]: https://github.com/guard/guard-livereload
[mailcatcher]: https://mailcatcher.me
[foreman]: https://github.com/ddollar/foreman