VS Code: задачи (Tasks)

Tasks в VS Code — настраиваемые команды, запускаемые через интерфейс редактора без набора в терминале, с поддержкой сборки, тестов и произвольных скриптов.

Зачем нужно

Tasks позволяют запускать npm run build, тесты или линтер одним нажатием клавиши или горячей кнопкой, без запоминания длинных команд. Результат выводится в панели Output, а ошибки компилятора — в Problems с переходом к нужной строке. Командные задачи в .vscode/tasks.json стандартизируют рабочий процесс.

Где используется

  • Сборка TypeScript/webpack без ручного npm run build
  • Запуск тестов через UI с Ctrl+Shift+B
  • Задача-зависимость: сначала build, потом deploy
  • Автозапуск сервера при открытии проекта

.vscode/tasks.json()

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Build TypeScript",
      "type": "npm",
      "script": "build",
      "group": {
        "kind": "build",
        "isDefault": true    // ← запускается по Ctrl+Shift+B
      },
      "presentation": {
        "reveal": "always",
        "panel": "shared"
      },
      "problemMatcher": "$tsc"  // парсим ошибки TypeScript → Problems
    },
    {
      "label": "Run Tests",
      "type": "npm",
      "script": "test",
      "group": {
        "kind": "test",
        "isDefault": true
      },
      "problemMatcher": "$jest"
    },
    {
      "label": "Dev Server",
      "type": "shell",
      "command": "npm run dev",
      "isBackground": true,       // фоновый процесс
      "presentation": {
        "reveal": "always",
        "panel": "dedicated"      // отдельная вкладка
      },
      "problemMatcher": {
        "owner": "custom",
        "pattern": {"regexp": "^$"},
        "background": {
          "activeOnStart": true,
          "beginsPattern": "Starting",
          "endsPattern": "ready"
        }
      }
    },
    {
      "label": "Lint and Fix",
      "type": "shell",
      "command": "npx eslint . --ext .ts,.tsx --fix",
      "presentation": { "reveal": "silent" },
      "problemMatcher": "$eslint-stylish"
    },
    {
      "label": "Docker: Up",
      "type": "shell",
      "command": "docker compose up -d",
      "presentation": { "reveal": "always" }
    }
  ]
}

Горячие клавиши

Ctrl+Shift+B     — запустить default build задачу
Terminal → Run Task → выбрать задачу из списка
Ctrl+Shift+P → Tasks: Run Task

Зависимости между задачами

{
  "label": "Build and Test",
  "dependsOn": ["Build TypeScript", "Run Tests"],
  "dependsOrder": "sequence",  // или "parallel"
  "group": "build"
}

Problem Matchers

// Встроенные matchers для популярных инструментов
"problemMatcher": "$tsc"          // TypeScript
"problemMatcher": "$tsc-watch"    // TypeScript в watch-режиме
"problemMatcher": "$eslint-stylish" // ESLint
"problemMatcher": "$jest"         // Jest

// Без парсинга ошибок
"problemMatcher":

Частые ошибки

  • Нет "group": { "kind": "build", "isDefault": true } — Ctrl+Shift+B не работает
  • Интерактивные команды (npm create, prompts) в задачах — зависают без ввода
  • Не указан "isBackground": true для серверных процессов — задача считается завершённой сразу
  • Задачи с фоновыми процессами без problemMatcher.background — VS Code не знает, когда сервер готов

Связанные темы

Ресурсы