iwantcoding.com
🔥 Daily 👥 Rooms 🏆 Top Log in Sign up

Tasks & Launch

By · Reviewed & last updated · Part of VS Code Tutorial

VS Code tasks (tasks.json) let you run build commands, scripts, and external tools without leaving the editor. Wire your project’s common commands — build, test, lint, format, deploy — into the palette and keyboard shortcuts and the editor turns into a project console.

tasks.json, problem matchers, run

EXAMPLE
// 1) File location
// .vscode/tasks.json
//
// Commit it with the project. Every contributor gets the same tasks instantly.

// 2) Minimal example — npm build
{
    "version": "2.0.0",
    "tasks": [
        {
            "label":   "Build",
            "type":    "npm",
            "script":  "build",
            "group":   { "kind": "build", "isDefault": true },
            "problemMatcher": ["$tsc"],
            "presentation": { "reveal": "silent", "clear": true }
        }
    ]
}

// Run: Ctrl+Shift+B (the default build task)
// Or:  Cmd/Ctrl+Shift+P → 'Tasks: Run Task' → pick from the list

// 3) Shell task — any command
{
    "label":   "Format + lint",
    "type":    "shell",
    "command": "npm run format && npm run lint -- --fix",
    "presentation": { "panel": "shared", "clear": true }
}

// 4) Background task (dev server) — keeps running, problem matcher watches output
{
    "label":      "npm: dev",
    "type":       "npm",
    "script":     "dev",
    "isBackground": true,
    "problemMatcher": [
        {
            "base":   "$tsc-watch",
            "background": {
                "activeOnStart": true,
                "beginsPattern": "^\\\\[INFO\\\\] (re)?building",
                "endsPattern":   "^\\\\[INFO\\\\] ready in "
            }
        }
    ],
    "presentation": { "reveal": "never" }
}

// 5) Compound tasks — run several with one command
{
    "label":     "Start full dev",
    "dependsOn": ["npm: dev", "npm: api:dev", "docker: db:up"],
    "dependsOrder": "parallel"
}

// 6) Inputs — prompt the user when running
{
    "tasks": [
        {
            "label":   "Deploy",
            "type":    "shell",
            "command": "npm run deploy -- --env=${input:env}",
            "problemMatcher": []
        }
    ],
    "inputs": [
        {
            "id":      "env",
            "type":    "pickString",
            "description": "Environment",
            "options": ["staging", "production"],
            "default": "staging"
        }
    ]
}

// Other input types: 'promptString', 'command' (runs a command and uses output).

// 7) Group + isDefault — quick build / test
{
    "label":   "Test",
    "type":    "npm",
    "script":  "test",
    "group":   { "kind": "test", "isDefault": true }
}
// Default test task: Cmd/Ctrl+Shift+P → 'Tasks: Run Test Task'

// 8) Problem matchers — clickable errors in the Problems panel
// Built-in matchers ship with VS Code:
//   $tsc           — TypeScript compiler
//   $tsc-watch     — watch mode
//   $eslint-stylish, $eslint-compact
//   $gcc, $gulp-tsc, $jshint, $lessCompile, $msCompile, $nodeSass
//   $ts-checking-build, $python-trace
//
// Custom matcher:
{
    "problemMatcher": {
        "owner":    "custom-linter",
        "fileLocation": ["relative", "${workspaceFolder}"],
        "pattern": {
            "regexp":  "^(.+):(\\d+):(\\d+): (warning|error): (.+)$",
            "file":    1,
            "line":    2,
            "column":  3,
            "severity":4,
            "message": 5
        }
    }
}

// 9) Environment variables
{
    "label":   "Run with env",
    "type":    "shell",
    "command": "node script.js",
    "options": {
        "env": {
            "NODE_ENV":     "development",
            "DEBUG":        "app:*",
            "DATABASE_URL": "${env:DATABASE_URL}"
        }
    }
}

// 10) Working directory + selection variables
// VS Code substitutes these:
//   ${workspaceFolder}              — repo root
//   ${workspaceFolderBasename}      — folder name
//   ${file}                          — currently open file
//   ${fileBasename}                  — file.txt
//   ${fileBasenameNoExtension}      — file
//   ${fileDirname}                   — directory of current file
//   ${fileExtname}                   — .txt
//   ${relativeFile}                  — workspace-relative path
//   ${selectedText}                  — current selection
//   ${lineNumber}                    — cursor line
//   ${pathSeparator}                 — / or \\

{
    "label":   "Run current file",
    "type":    "shell",
    "command": "node ${file}"
}

// 11) Keybindings for tasks
// keybindings.json
[
    {
        "key":     "ctrl+alt+t",
        "command": "workbench.action.tasks.runTask",
        "args":    "Test"
    },
    {
        "key":     "ctrl+alt+d",
        "command": "workbench.action.tasks.runTask",
        "args":    "Start full dev"
    }
]

// 12) Multi-root workspaces
// In a multi-root workspace, EACH folder can have its own .vscode/tasks.json.
// The picker shows tasks from all roots, prefixed by folder name.

// 13) Common task patterns
{
    "version": "2.0.0",
    "tasks": [
        { "label": "Build",        "type": "npm", "script": "build",  "group": { "kind": "build", "isDefault": true } },
        { "label": "Test",         "type": "npm", "script": "test",   "group": { "kind": "test", "isDefault": true } },
        { "label": "Lint",         "type": "npm", "script": "lint" },
        { "label": "Format",       "type": "npm", "script": "format" },
        { "label": "Dev",          "type": "npm", "script": "dev", "isBackground": true },
        { "label": "DB up",         "type": "shell", "command": "docker compose up -d db" },
        { "label": "DB migrate",    "type": "shell", "command": "npm run db:migrate" },
        { "label": "Storybook",     "type": "npm", "script": "storybook", "isBackground": true }
    ]
}

// 14) Tips
// • Group related tasks ('frontend', 'backend', 'docker') with 'detail' field for description
// • Use 'presentation.reveal: silent' for noisy tasks that you don't need to see
// • Use 'presentation.clear: true' to clear the terminal before re-running
// • Pin frequently-run tasks via 'Tasks: Open User Tasks' for user-wide tasks (not workspace)
// • Run Build Task hotkey makes 'Build' a one-keystroke action

// 15) Common bugs
// • Task runs in the WRONG folder — set 'options.cwd' explicitly
// • Background task never marked 'started' — problemMatcher.background patterns don't match output
// • Command not found — 'shell' type, not 'process'; ensure PATH inherited (use 'type: shell' for npm-installed bins)
// • Tasks panel empty — JSON syntax error; fix and reload window
// • Compound task fails silently — set 'dependsOrder: sequence' if order matters
// • Long output cuts off — set 'presentation.echo: true', use a file logger for big runs
// • Run on save — VS Code doesn't run tasks on save out of the box; use 'Run on Save' extension or a watch-mode task
// • Tasks across machines — pin tool versions; tasks reference whatever's in PATH

Why it matters

Wire tasks.json with your project’s common commands — build, test, lint, format, dev server — group them with default build/test, add inputs for environment choices, and bind frequent ones to keys. Problem matchers turn linter and compiler output into clickable Problems-panel entries, which is the difference between “runs a command” and “integrates into the editor.”

Tip: Tweak the snippet with Try it Yourself », then sit the quiz at the bottom of the page.

Example

Example
// .vscode/tasks.json
{
    "version": "2.0.0",
    "tasks": [
        { "label": "build", "type": "shell", "command": "npm run build", "group": "build" }
    ]
}
Try it Yourself »

Exercise

Tasks live in…

.vscode/ .json

Discussion

Loading…