🎄 Get 20% off from our JavaScript course for the holidays! 🎄
How to Create Custom Tasks in VSCode

How to Create Custom Tasks in VSCode

Using the tasks.json file
Ferenc AlmasiLast updated 2021 July 19 • Read time 3 min read
There are many ways to automate the workflow of your project. Learn how you can utilize the Task Runner extension to speed up starting commands.
  • twitter
  • facebook

There are many ways to automate the workflow of your project. Task runners such as Gulp, Grunt, or simple NPM scripts are a great way to define commands you want to run over and over again, removing the need to type out the same thing a million times.

Yet, you most probably type out npm run start or npm run build a couple of times throughout your day. With the use of the Task Runner extension, however, you can start these commands automatically with a click from your sidebar.

The task runner plugin in use, taken from the extension’s page

The extension automatically detects tasks created in Gulp and Grunt configuration files as well as any scripts that are available in your package.json. This means you don’t need to do anything else to speed up your workflow by a bit, apart from installing the extension.

Creating Custom Tasks

In some cases, however, you may want to specify and configure custom, workspace related tasks. This is where the tasks.json file comes into place.

Create a .vscode folder in your project’s root folder, and add the following file, called tasks.json:

Copied to clipboard!
    "version": "2.0.0",
    "tasks": []

Anything you define in your tasks array, will also be visible on your sidebar under the task runner. For example, to add the same npm run start command you have in your package.json file, you can define it in the following way:

Copied to clipboard!
    "label": "🏃‍♂️ Run demo",
    "command": "npm",
    "args": [

Each task needs at least two things. A label and a command. The label is what will be displayed in VSCode. The command holds the actual command to execute. In the example above, we also have an args array. This is where you can define arguments if you have any for your command, such as flags for example.

Using variables

If you need to work with environment variables or specify the current working directory, you can also add an options object to the command.

Copied to clipboard!
"options": {
    "cwd": "${workspaceFolder}",
    "env": {
        "NODE_ENV": "production"

This will set the current working directory — or cwd for short — to the root of the project’s folder, and the node environment to production. Also, note that you don’t need to specify the exact path for the project’s folder, you can use a special keyword: ${workspaceFolder}. This is called a variable reference.

These are predefined variables that you can use to easily execute tasks. For example, to run the currently opened unit test, you may want to pass ${file} or ${relativeFile} to your args array.

Custom tasks defined in VSCode


As you can see, I also like to include emojis in front of the commands to further help visualize what each command should do. Below them, you can find all the available commands automatically picked up by the Task Runner extension.

Although this doesn’t seem much, from typing out npm commands to only clicking to run a command does add up and can save you some time down the road. If you need more customization, You can find all the available options for custom tasks in the official documentation of VSCode. They also have separate documentation for the list of predefined variables.

Do you have a favorite extension in VSCode that you use all the time, and already saved you some precious minutes? Let us know in the comments below! Thank you for reading through, happy coding!

10 VSCode Extensions That Will Help You Boost Your Productivity
Did you find this page helpful?
📚 More Webtips
Frontend Course Dashboard
Master the Art of Frontend
  • check Access exclusive interactive lessons
  • check Unlimited access to hundreds of tutorials
  • check Remove ads to learn without distractions
Become a Pro