How to Add a New Task in VS Code

A guide on how to add and configure custom tasks in VS Code for your projects.

When you’re building a VS Code extension, or really any project, you’ll often have commands you run repeatedly. VS Code tasks make it easier to run these commands directly from the editor. This is my personal note on how I set up tasks for my projects.

Here’s how to add a new task in VS Code:

1. Open the Command Palette: Press Cmd+Shift+P (macOS) or Ctrl+Shift+P (Windows/Linux).
2. Type “Tasks”: Start typing “Tasks” and select “Tasks: Configure Task”.
3. Choose a Task Type:
   • If you already have a tasks.json file, VS Code will ask you to select a task to configure.
   • If you don’t have one, it will prompt you to “Create tasks.json file from template”. Choose “Others” for a blank template, or select a language-specific template if it fits your project.
4. Edit tasks.json: VS Code will open (or create) your .vscode/tasks.json file. This is where you’ll define your custom tasks.

Here’s an example of a .vscode/tasks.json file I use for a VS Code extension project, with explanations for each field:

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "pnpm: watch",
            "type": "shell",
            "command": "pnpm",
            "args": ["run", "watch"],
            "isBackground": true,
            "problemMatcher": "$tsc-watch",
            "presentation": {
                "reveal": "never"
            },
            "group": {
                "kind": "build",
                "isDefault": true
            }
        },
        {
            "label": "pnpm: build",
            "type": "shell",
            "command": "pnpm",
            "args": ["run", "build"],
            "problemMatcher": "$tsc",
            "group": "build"
        }
    ]
}

Let’s break down what each of these fields means and why I use them:

• version: This is the version of the tasks.json schema. Always set it to “2.0.0”.
• tasks: This is an array of individual task definitions. Each object in this array is a single task.

Inside each task object:

• label: This is the name that shows up in the VS Code Command Palette when you run “Run Task”. I like to make it descriptive, like “pnpm: watch” so I know exactly what it does.
• type: This tells VS Code how to execute the command.
  • shell: This means the command will run in your default shell (like zsh on macOS). I use this for most of my tasks because it’s flexible.
  • process: This means the command will run directly as a process.
• command: This is the actual command that gets executed. In my example, it’s pnpm.
• args: These are the arguments passed to the command. For “pnpm: watch”, I pass ["run", "watch"] which tells pnpm to run the “watch” script defined in my package.json.
• isBackground: If this is true, the task runs in the background and doesn’t block the terminal. This is super useful for things like watch scripts or development servers that need to keep running. For “pnpm: watch”, I set it to true because I want it to keep watching for file changes.
• problemMatcher: This is a powerful feature that lets VS Code parse the output of your task for errors and warnings.
  • $tsc-watch: This is a built-in problem matcher for TypeScript in watch mode. It helps VS Code highlight TypeScript errors in the “Problems” panel as I code.
  • $tsc: This is for a single TypeScript build run.
• presentation: This controls how the task’s output is shown in the terminal.
  • reveal: "never": For “pnpm: watch”, I set this to “never” because I don’t want the terminal to pop up every time the watch task runs in the background. It keeps my workspace clean.
• group: This assigns the task to a logical group.
  • kind: "build": This puts the task in the “build” group.
  • isDefault: true: For “pnpm: watch”, I set this to true so it’s the default build task. This means I can just press Cmd+Shift+B (or Ctrl+Shift+B on Windows/Linux) to start it.

By setting up tasks like this, I can quickly build and watch my projects without leaving VS Code, making my workflow much smoother.