A Deep Dive into VSCode Tasks: Improve Your Developer Workflow Today!

Developers are always on the hunt for tools and techniques that can help streamline their workflows. One such powerful tool integrated within Visual Studio Code (VSCode) is the tasks mechanism. In this article, we’ll delve into the concept of VSCode tasks and see how they can be incorporated into a developer’s routine.

What is VSCode Tasks?

VSCode tasks are automation processes that you can define within VSCode to help you build, test, package, and deploy your projects. These tasks can be as simple as running a shell command or as complex as triggering a multi-step build process. The real power of VSCode tasks lies in their ability to link directly with a project’s build system or other tools, such as NPM scripts.

Integrating VSCode Tasks into Your Workflow

Here’s a step-by-step guide on how you can use VSCode tasks:

1. Define Tasks: The heart of the tasks system is the tasks.json file. Here, you specify what tasks you want, how they should be executed, and under what conditions.
2. Link to External Tools: VSCode tasks can be linked to external tools like NPM. So, if you have a package.json with various scripts defined, your tasks.json can directly call these scripts.
3. Run & Debug: Once defined, tasks can be easily run through VSCode’s Command Palette or can even be bound to a key combination for quicker access. Better yet, you can also download an extension to make running each of these tasks a one click process.
4. Group & Organize: Tasks can be grouped, and default tasks can be defined, making the management of multiple tasks easier.

A Practical Example

Consider the following package.json and tasks.json files:

// sample package.json file
{
  "name": "appName",
  "scripts": {

    // serve the app locally
    "start": "webpack serve",

    // build the app for production
    "build": "webpack --mode=production",

    // run unit tests
    "unitTest": "jest",

    // run e2e test
    "e2e:": "npx playwright install && npx playwright test --config=playwright.config.ts --trace on",

    // run e2e test using playwright ui mode
    "e2e:uiMode": "yarn e2e --ui",

    // run playwright code generation to help with writing e2e tests
    "codegen": "npx playwright codegen appName.com"
  }
}

// sample tasks.json file. make sure to add it to your .vscode folder in your project
{
 "version": "2.0.0",
 "tasks": [
  // this object represents a single task used to serve the app locally
  {
   "type": "npm",
   // this references the "start" script in the sample package.json file above
   "script": "start",
   // this specifies the path of your package.json file which contains the script
   "path": "src",
   // just a simple label for this task
   "label": "Start app locally",
   // additional description for this task. It doesn't have to be the content of the script
   "detail": "webpack serve"
  },
  {
   // this task is for building the app bundle
   "type": "npm",
   "script": "build",
   "path": "src",
   "label": "Build the app",
   "detail": "webpack --mode=production"
  },
  {
   // this task is for running the unit test via Jest
   "type": "npm",
   "script": "test",
   "path": "src",
   // this attribute is used to group relevant tasks together
   "group": {
              "kind": "test",
              // make this task a default task within this "test" group
              "isDefault": true
            },
   "label": "Run unit test",
   "detail": "Run unit test using jest"
  },
  {
   // this task is for running playwright end to end test
   "type": "npm",
   "script": "e2e",
   "path": "src",
   "problemMatcher": [],
   "label": "Run e2e test",
   "detail": "npx playwright install && npx playwright test --config=playwright.config.ts --trace on",
   "group": {
    "kind": "test",
   },
   // use this to inject certain Node JS environment variables to be used by your test
   "options": {
    "env": {
     "TESTCLOUD": "prod"
    }
   }
  },
  {
   // this task is for running playwright end to end test in ui mode
   "type": "npm",
   "script": "e2e:uiMode",
   "path": "src",
   "label": "Run e2e test in UI mode",
   "detail": "yarn e2e --ui",
   "group": {
     "kind": "test",
   },
   "options": {
    "env": {
     "TESTCLOUD": "prod"
    }
   }
  },
  {
   // this task is for running playwright codegen
   "type": "npm",
   "script": "codegen",
   "path": "src",
   "label": "Open Playwright codegen",
   "detail": "npx playwright codegen appName.com",
  },
  {
    // Besides referencing npm script, you can also run any shell scripts
    // For example, this task can be used to open a hosts file for editing
    "label": "Update host file",
    "type": "shell",
    "command": "cd /c/Windows/System32/drivers/etc/ && pwd && vim hosts",
  },
  {
    // this task is used to flush dns using a command prompt
    "label": "Flush DNS",
    "type": "shell",
    "command": "ipconfig /flushdns",
    "presentation": {
        "reveal": "always"
    },
    "windows": {
        "options": {
            "shell": {
                "executable": "cmd.exe",
                "args": ["/d", "/c"]
            }
        }
    }
  }
 ]
}

Now, to run any of these tasks, first open VSCode Command Palette (command + p) on mac, and you should see this screen and then click on “Tasks: Run Task”

VSCode Command Palette

VSCode Command Palette showing list of tasks we defined in the tasks.json file

Now you can click on any of the task and it will get executed. To make it even easier, we can also install a new VSCode extension called “Tasks”. This will make running any of these tasks a one click step.

VSCode Tasks extension

Each of the tasks we defined now show up as a button

In conclusion, VSCode tasks offer a compelling and efficient way to automate repetitive or complex tasks within your development workflow. By integrating directly with tools like NPM, they bridge the gap between your IDE and build systems, leading to a smoother, more streamlined development experience.