How to Configure Custom Tasks in VS Code

Visual Studio Code allows developers to automate repetitive workflows—such as building, testing, or deploying applications—by creating custom tasks. This article provides a straightforward guide on how to configure these custom tasks using the tasks.json file in VS Code. You will learn how to create the configuration file, define custom execution parameters, and run your automated tasks directly within the editor.

Creating the tasks.json File

VS Code stores task configurations inside a tasks.json file located in the .vscode folder of your project workspace.

1. Open your project workspace in VS Code.
2. Open the Command Palette using Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (macOS).
3. Type Tasks: Configure Task and select it.
4. Select Create tasks.json file from template.
5. Choose Others to generate a generic template.

If you already have a .vscode folder, you can also create a file named tasks.json manually inside it.

Understanding the tasks.json Structure

Here is a basic template of a custom task that runs a simple terminal command:

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "Run Hello World",
            "type": "shell",
            "command": "echo 'Hello, World!'",
            "group": {
                "kind": "build",
                "isDefault": true
            },
            "presentation": {
                "reveal": "always",
                "panel": "shared"
            }
        }
    ]
}

Key Properties Explained

• label: The user-friendly name of the task that will appear in the VS Code interface.
• type: Defines how the command is executed. Use "shell" to run the command in a system shell (like Bash, PowerShell, or zsh), or "process" to execute an external executable directly.
• command: The actual command, script, or program you want to execute.
• args: An optional array of arguments passed to the command.
• group: Defines if the task belongs to a specific category. Setting "kind": "build" and "isDefault": true allows you to run this task using the default build shortcut (Ctrl+Shift+B or Cmd+Shift+B).
• presentation: Controls how the output terminal behaves, such as whether to reveal the terminal panel when the task runs.

Customizing Arguments and Environment Variables

You can pass arguments to your commands and define environment variables to make your tasks more dynamic. Here is an example of a task running a Node.js build script:

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "Build Production App",
            "type": "shell",
            "command": "npm",
            "args": ["run", "build"],
            "options": {
                "env": {
                    "NODE_ENV": "production"
                }
            },
            "problemMatcher": []
        }
    ]
}

Running Your Custom Task

Once you have configured and saved your tasks.json file, you can run your custom task using these steps:

1. Open the Command Palette (Ctrl+Shift+P or Cmd+Shift+P).
2. Type and select Tasks: Run Task.
3. Select your custom task from the list (e.g., “Build Production App”).
4. The task will run, and the output will display in the integrated terminal at the bottom of the editor.