Automating Development With Tasks in VSCode

A great feature that ships with VSCode is the “tasks” capability. I’ve not seen many developers use it, so I thought I’d document how it’s made my life blogging with a statically-generated site simpler.

Often, when doing any development, developers find themselves performing certain loops: drop to shell, run some command, capture output, paste output back into the editor, etc. Eventually most developers wind up curating a per-project set of shell aliases and functions to accelerate that loop. Perhaps the high-water mark for this behavior is the Rails framework which came with a task runner, rake, by default.

I’m glad to say that VSCode has a built-in task runner facility that can be leveraged to make whole series of routine tasks much more pleasant.

Getting Set Up

We define tasks in a file called project_home/.vscode/tasks.json. Think of each task as a “function” or a “method” in a programming language. It should do one shell operation. Much like functional programming, these small tasks can be composed together to create macro-level tasks.

Here’s one of my tasks:

    {
      "label": "Publish to BLOG SITE",
      "type": "shell",
      "command": "rsync -azrP ${workspaceFolder}/public/ HOST:/web/server/directory",
      "dependsOrder": "sequence",
      "dependsOn":["Push Images to servers", "Hugo Build"],
      "problemMatcher": []
    }

Start with the dependsOn. When I run this task (which is available through VSCode’s Command-Shift-P menu), it first runs the tasks "Push Images to servers" and "Hugo Build". The first synchronizes local assets I used to the production host, the second runs the static site generator and emits the processed site to ${workspaceFolder}/public. Then this task’s "command" runs and uses rsync to send the completed web page content to the HOST. That’s it! The dependencies are run in order because of the "dependsOrder" attribute being set to "sequence".

If I later decide to update the piece, no problem, simply run the command again. By allowing me to stay in the editor I don’t have to do the context switch out to make the content go live.