VSCode タスク設定完全ガイド - tasks.jsonでビルド・テストを自動化

VSCode タスク設定でビルド・テストを自動化する

Visual Studio Code（VSCode）のタスク機能を使えば、ビルド、テスト、リントなどの定型作業をエディタから直接実行できます。tasks.jsonファイルに設定を記述することで、コマンドラインを開かずに複雑なワークフローを自動化できます。

本記事では、VSCode タスク設定の基本から、problemMatcherによるエラー検出、複合タスクによる並列・順次実行、npm/gulp/make連携、カスタムタスク作成まで、実務で即活用できる設定手法を網羅します。

この記事で得られること

tasks.jsonの基本構造とタスク定義方法
problemMatcherによるビルドエラーの自動検出と問題パネル連携
複合タスク（dependsOn）による並列・順次実行の制御
npm、gulp、makeなど外部ツールとの連携方法
カスタムタスクの作成とキーボードショートカットへのバインド

前提条件と実行環境

VSCode タスク機能を利用するための環境を確認します。

項目	要件
VSCode	バージョン1.85以上を推奨
Node.js	18.x以上（npm/gulpタスク用）
作業環境	ワークスペースフォルダを開いた状態

タスク機能はワークスペースフォルダを開いている場合のみ利用可能です。単一ファイルの編集時は利用できません。

tasks.jsonの保存場所

tasks.jsonはプロジェクトルートの.vscodeフォルダ内に配置します。

プロジェクトルート/
├── .vscode/
│   └── tasks.json    ← ここに配置
├── src/
└── package.json

VSCode タスクの基本構造

VSCode タスクの基本的なtasks.jsonの構造を理解しましょう。

最小構成のtasks.json

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Hello World",
      "type": "shell",
      "command": "echo Hello World"
    }
  ]
}

プロパティ	説明
`version`	tasks.jsonのスキーマバージョン（現在は`2.0.0`）
`tasks`	タスク定義の配列
`label`	タスクの表示名（一意である必要がある）
`type`	タスクの種類（`shell`または`process`）
`command`	実行するコマンド

タスクの実行方法

VSCode タスクを実行する方法は複数あります。

方法	操作
コマンドパレット	`Ctrl+Shift+P` → “Run Task”
ビルドタスク実行	`Ctrl+Shift+B`
クイックオープン	`Ctrl+P` → “task " + タスク名
ターミナルメニュー	メニューバー「ターミナル」→「タスクの実行」

タスクの主要プロパティ

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Run tests",
      "type": "shell",
      "command": "./scripts/test.sh",
      "windows": {
        "command": ".\\scripts\\test.cmd"
      },
      "group": "test",
      "presentation": {
        "reveal": "always",
        "panel": "new"
      },
      "problemMatcher": [],
      "options": {
        "cwd": "${workspaceFolder}"
      }
    }
  ]
}

プロパティ	説明
`group`	タスクのグループ（`build`、`test`、`none`）
`presentation`	ターミナル出力の表示方法
`problemMatcher`	エラー検出パターン
`options`	作業ディレクトリや環境変数の設定
`windows`	Windows固有の設定

タスクグループの設定

タスクをbuildやtestグループに割り当てると、ショートカットキーで直接実行できます。

デフォルトビルドタスクの設定

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "TypeScript Build",
      "type": "typescript",
      "tsconfig": "tsconfig.json",
      "problemMatcher": ["$tsc"],
      "group": {
        "kind": "build",
        "isDefault": true
      }
    }
  ]
}

"isDefault": trueを設定すると、Ctrl+Shift+Bで直接このタスクが実行されます。

デフォルトテストタスクの設定

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Run Jest Tests",
      "type": "shell",
      "command": "npm",
      "args": ["test"],
      "group": {
        "kind": "test",
        "isDefault": true
      },
      "problemMatcher": []
    }
  ]
}

コマンドパレットから「Run Test Task」を実行すると、このタスクが実行されます。

problemMatcherによるエラー検出

problemMatcherは、タスク出力からエラーや警告を検出し、問題パネルに表示する機能です。VSCode タスクの中核機能の一つです。

組み込みproblemMatcherの一覧

VSCodeには、主要なツール用のproblemMatcherが組み込まれています。

名前	対象ツール	備考
`$tsc`	TypeScriptコンパイラ	相対パス
`$tsc-watch`	tsc –watch	ウォッチモード用
`$eslint-stylish`	ESLint Stylish形式	相対パス
`$eslint-compact`	ESLint Compact形式	相対パス
`$jshint`	JSHint	絶対パス
`$go`	Goコンパイラ	相対パス
`$mscompile`	MSBuild/C#/VB	絶対パス
`$lessc`	Lessコンパイラ	絶対パス
`$node-sass`	Node Sass	絶対パス

組み込みproblemMatcherの使用例

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "npm lint",
      "type": "npm",
      "script": "lint",
      "problemMatcher": ["$eslint-stylish"]
    }
  ]
}

カスタムproblemMatcherの定義

独自のエラー形式を持つツールには、カスタムproblemMatcherを定義します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24


{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "GCC Build",
      "type": "shell",
      "command": "gcc",
      "args": ["-Wall", "main.c", "-o", "main"],
      "problemMatcher": {
        "owner": "cpp",
        "fileLocation": ["relative", "${workspaceFolder}"],
        "source": "gcc",
        "pattern": {
          "regexp": "^(.*):(\\d+):(\\d+):\\s+(warning|error):\\s+(.*)$",
          "file": 1,
          "line": 2,
          "column": 3,
          "severity": 4,
          "message": 5
        }
      }
    }
  ]
}

プロパティ	説明
`owner`	問題の所有者（言語サービス識別子）
`fileLocation`	ファイルパスの解釈方法（`relative`/`absolute`/`autoDetect`）
`source`	問題パネルに表示されるソース名
`pattern`	正規表現によるマッチングパターン

マルチラインproblemMatcherの定義

ESLint Stylish形式のように、複数行にまたがるエラー出力には、配列でパターンを定義します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29


{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "ESLint Check",
      "type": "shell",
      "command": "npx eslint src --format stylish",
      "problemMatcher": {
        "owner": "javascript",
        "fileLocation": ["relative", "${workspaceFolder}"],
        "pattern": [
          {
            "regexp": "^([^\\s].*)$",
            "file": 1
          },
          {
            "regexp": "^\\s+(\\d+):(\\d+)\\s+(error|warning|info)\\s+(.*)\\s\\s+(.*)$",
            "line": 1,
            "column": 2,
            "severity": 3,
            "message": 4,
            "code": 5,
            "loop": true
          }
        ]
      }
    }
  ]
}

"loop": trueを設定すると、同じファイルに対して複数のエラーをマッチングできます。

複合タスク（dependsOn）による並列・順次実行

複数のタスクを組み合わせて実行するには、dependsOnプロパティを使用します。

並列実行（デフォルト）

dependsOnに複数のタスクを指定すると、デフォルトで並列実行されます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26


{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Client Build",
      "type": "shell",
      "command": "npm run build",
      "options": {
        "cwd": "${workspaceFolder}/client"
      }
    },
    {
      "label": "Server Build",
      "type": "shell",
      "command": "npm run build",
      "options": {
        "cwd": "${workspaceFolder}/server"
      }
    },
    {
      "label": "Build All",
      "dependsOn": ["Client Build", "Server Build"],
      "problemMatcher": []
    }
  ]
}

graph LR
    A[Build All] --> B[Client Build]
    A --> C[Server Build]
    B --> D[完了]
    C --> D

順次実行

dependsOrderをsequenceに設定すると、指定した順序で順次実行されます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26


{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Clean",
      "type": "shell",
      "command": "rm -rf dist"
    },
    {
      "label": "Compile",
      "type": "shell",
      "command": "tsc"
    },
    {
      "label": "Test",
      "type": "shell",
      "command": "npm test"
    },
    {
      "label": "Build Pipeline",
      "dependsOn": ["Clean", "Compile", "Test"],
      "dependsOrder": "sequence",
      "problemMatcher": []
    }
  ]
}

graph LR
    A[Build Pipeline] --> B[Clean]
    B --> C[Compile]
    C --> D[Test]
    D --> E[完了]

npm連携タスク

VSCodeはnpmスクリプトを自動検出し、タスクとして実行できます。

npmスクリプトの自動検出

package.jsonに定義されたスクリプトは、自動的にタスクとして認識されます。

1
2
3
4
5
6
7
8


// package.json
{
  "scripts": {
    "build": "tsc",
    "test": "jest",
    "lint": "eslint src"
  }
}

「Run Task」を実行すると、npm: build、npm: test、npm: lintとして表示されます。

npmタスクのカスタマイズ

自動検出されたnpmタスクをカスタマイズできます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26


{
  "version": "2.0.0",
  "tasks": [
    {
      "type": "npm",
      "script": "build",
      "group": {
        "kind": "build",
        "isDefault": true
      },
      "problemMatcher": ["$tsc"],
      "presentation": {
        "reveal": "silent",
        "panel": "shared"
      }
    },
    {
      "type": "npm",
      "script": "lint",
      "problemMatcher": ["$eslint-stylish"],
      "presentation": {
        "reveal": "never"
      }
    }
  ]
}

npmタスクの自動検出の無効化

自動検出が不要な場合は、設定で無効化できます。

1
2
3
4


// settings.json
{
  "npm.autoDetect": "off"
}

gulp連携タスク

gulpタスクもnpmと同様に自動検出されます。

gulpfile.jsの例

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


const gulp = require('gulp');
const eslint = require('gulp-eslint');
const sass = require('gulp-sass')(require('sass'));

gulp.task('lint', () => {
  return gulp.src(['src/**/*.js'])
    .pipe(eslint())
    .pipe(eslint.format())
    .pipe(eslint.failAfterError());
});

gulp.task('sass', () => {
  return gulp.src('src/styles/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('dist/css'));
});

gulp.task('default', gulp.series('lint', 'sass'));

gulpタスクのカスタマイズ

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


{
  "version": "2.0.0",
  "tasks": [
    {
      "type": "gulp",
      "task": "default",
      "problemMatcher": ["$eslint-stylish"],
      "group": {
        "kind": "build",
        "isDefault": true
      }
    }
  ]
}

make連携タスク

Makefileを使用するプロジェクトでは、シェルタスクとしてmakeを実行します。

Makefileの例

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


CC = gcc
CFLAGS = -Wall -g

all: main

main: main.o utils.o
	$(CC) $(CFLAGS) -o main main.o utils.o

main.o: main.c
	$(CC) $(CFLAGS) -c main.c

utils.o: utils.c utils.h
	$(CC) $(CFLAGS) -c utils.c

clean:
	rm -f *.o main

.PHONY: all clean

makeタスクの定義

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34


{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Make Build",
      "type": "shell",
      "command": "make",
      "args": ["all"],
      "group": {
        "kind": "build",
        "isDefault": true
      },
      "problemMatcher": {
        "owner": "cpp",
        "fileLocation": ["relative", "${workspaceFolder}"],
        "pattern": {
          "regexp": "^(.*):(\\d+):(\\d+):\\s+(warning|error):\\s+(.*)$",
          "file": 1,
          "line": 2,
          "column": 3,
          "severity": 4,
          "message": 5
        }
      }
    },
    {
      "label": "Make Clean",
      "type": "shell",
      "command": "make",
      "args": ["clean"],
      "problemMatcher": []
    }
  ]
}

カスタムタスクの作成

特定のワークフローに合わせたカスタムタスクを作成できます。

シェルタスクとプロセスタスク

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Shell Task Example",
      "type": "shell",
      "command": "echo ${file} | grep -o '[^/]*$'"
    },
    {
      "label": "Process Task Example",
      "type": "process",
      "command": "node",
      "args": ["--version"]
    }
  ]
}

type	説明
`shell`	シェル経由でコマンドを実行（パイプやリダイレクトが使用可能）
`process`	プロセスを直接実行（より高速）

引数の指定方法

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Run Script with Args",
      "type": "shell",
      "command": "node",
      "args": [
        "script.js",
        "--config",
        "config.json",
        {
          "value": "folder with spaces",
          "quoting": "strong"
        }
      ]
    }
  ]
}

quoting	説明
`escape`	エスケープ文字を使用
`strong`	シングルクォートで囲む（変数展開なし）
`weak`	ダブルクォートで囲む（変数展開あり）

変数置換の活用

tasks.jsonでは、様々な変数を使用できます。

主要な変数一覧

変数	説明
`${workspaceFolder}`	ワークスペースのルートパス
`${workspaceFolderBasename}`	ワークスペースフォルダ名
`${file}`	現在開いているファイルのフルパス
`${fileBasename}`	現在のファイル名（拡張子含む）
`${fileBasenameNoExtension}`	現在のファイル名（拡張子なし）
`${fileDirname}`	現在のファイルのディレクトリパス
`${fileExtname}`	現在のファイルの拡張子
`${relativeFile}`	ワークスペースからの相対パス
`${lineNumber}`	カーソル行番号
`${selectedText}`	選択中のテキスト

変数を使用したタスク例

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Compile Current File",
      "type": "shell",
      "command": "tsc",
      "args": ["${file}"],
      "problemMatcher": ["$tsc"]
    },
    {
      "label": "Run Current File",
      "type": "shell",
      "command": "node",
      "args": ["${fileDirname}/${fileBasenameNoExtension}.js"]
    }
  ]
}

入力変数の使用

実行時にユーザー入力を受け付けることができます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Run with Environment",
      "type": "shell",
      "command": "npm run ${input:scriptName}",
      "problemMatcher": []
    }
  ],
  "inputs": [
    {
      "id": "scriptName",
      "type": "pickString",
      "description": "Select npm script",
      "options": ["start", "dev", "build", "test"],
      "default": "start"
    }
  ]
}

OS別設定の定義

Windows、macOS、Linuxで異なるコマンドを実行する場合の設定方法です。

OS固有のコマンド設定

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Run Node",
      "type": "process",
      "command": "/usr/local/bin/node",
      "windows": {
        "command": "C:\\Program Files\\nodejs\\node.exe"
      },
      "linux": {
        "command": "/usr/bin/node"
      },
      "osx": {
        "command": "/usr/local/bin/node"
      },
      "args": ["app.js"]
    }
  ]
}

グローバルオプションとOS固有オプション

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26


{
  "version": "2.0.0",
  "windows": {
    "options": {
      "shell": {
        "executable": "cmd.exe",
        "args": ["/d", "/c"]
      }
    }
  },
  "linux": {
    "options": {
      "shell": {
        "executable": "/bin/bash",
        "args": ["-c"]
      }
    }
  },
  "tasks": [
    {
      "label": "Cross-Platform Build",
      "type": "shell",
      "command": "npm run build"
    }
  ]
}

presentationによる出力制御

タスク実行時のターミナル動作を細かく制御できます。

presentationプロパティの詳細

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Quiet Task",
      "type": "shell",
      "command": "npm run lint",
      "presentation": {
        "reveal": "silent",
        "revealProblems": "onProblem",
        "focus": false,
        "echo": true,
        "showReuseMessage": false,
        "panel": "shared",
        "clear": true,
        "close": false
      }
    }
  ]
}

プロパティ	説明	値
`reveal`	ターミナルの表示タイミング	`always`/`silent`/`never`
`revealProblems`	問題パネルの表示	`always`/`onProblem`/`never`
`focus`	ターミナルにフォーカス	`true`/`false`
`echo`	コマンドをエコー表示	`true`/`false`
`panel`	ターミナルの共有設定	`shared`/`dedicated`/`new`
`clear`	実行前にターミナルをクリア	`true`/`false`
`close`	タスク終了時にターミナルを閉じる	`true`/`false`

分割ターミナルでの実行

groupプロパティを使用すると、複数のタスクを分割ターミナルで並列表示できます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25


{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Watch Frontend",
      "type": "shell",
      "command": "npm run watch:frontend",
      "presentation": {
        "group": "watchers"
      },
      "isBackground": true,
      "problemMatcher": []
    },
    {
      "label": "Watch Backend",
      "type": "shell",
      "command": "npm run watch:backend",
      "presentation": {
        "group": "watchers"
      },
      "isBackground": true,
      "problemMatcher": []
    }
  ]
}

バックグラウンドタスク（ウォッチモード）

ファイル変更を監視し続けるウォッチタスクの設定方法です。

TypeScript Watchタスクの設定

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29


{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "tsc watch",
      "type": "shell",
      "command": "tsc",
      "args": ["--watch"],
      "isBackground": true,
      "problemMatcher": {
        "owner": "typescript",
        "fileLocation": "relative",
        "pattern": {
          "regexp": "^([^\\s].*)\\((\\d+|\\d+,\\d+|\\d+,\\d+,\\d+,\\d+)\\):\\s+(error|warning|info)\\s+(TS\\d+)\\s*:\\s*(.*)$",
          "file": 1,
          "location": 2,
          "severity": 3,
          "code": 4,
          "message": 5
        },
        "background": {
          "activeOnStart": true,
          "beginsPattern": "^\\s*\\d{1,2}:\\d{1,2}:\\d{1,2}(?: AM| PM)? - File change detected\\. Starting incremental compilation\\.\\.\\.",
          "endsPattern": "^\\s*\\d{1,2}:\\d{1,2}:\\d{1,2}(?: AM| PM)? - Compilation complete\\. Watching for file changes\\."
        }
      }
    }
  ]
}

プロパティ	説明
`isBackground`	バックグラウンドで継続実行するタスク
`background.activeOnStart`	開始時からアクティブ状態とみなす
`background.beginsPattern`	コンパイル開始を示すパターン
`background.endsPattern`	コンパイル完了を示すパターン

preLaunchTaskとしての使用

launch.jsonのpreLaunchTaskにバックグラウンドタスクを指定できます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


// .vscode/launch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Program",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/dist/index.js",
      "preLaunchTask": "tsc watch",
      "outFiles": ["${workspaceFolder}/dist/**/*.js"]
    }
  ]
}

キーボードショートカットへのバインド

頻繁に実行するタスクはキーボードショートカットに登録すると便利です。

keybindings.jsonへの登録

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


// keybindings.json
[
  {
    "key": "ctrl+shift+t",
    "command": "workbench.action.tasks.runTask",
    "args": "Run tests"
  },
  {
    "key": "ctrl+shift+l",
    "command": "workbench.action.tasks.runTask",
    "args": "npm lint"
  }
]

実践的なtasks.json設定例

フロントエンド開発プロジェクトの包括的なタスク設定例です。

フルスタック開発向けtasks.json

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87


{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Install Dependencies",
      "type": "shell",
      "command": "npm install",
      "problemMatcher": []
    },
    {
      "label": "Build Frontend",
      "type": "npm",
      "script": "build:frontend",
      "problemMatcher": ["$tsc"],
      "options": {
        "cwd": "${workspaceFolder}/frontend"
      }
    },
    {
      "label": "Build Backend",
      "type": "npm",
      "script": "build:backend",
      "problemMatcher": ["$tsc"],
      "options": {
        "cwd": "${workspaceFolder}/backend"
      }
    },
    {
      "label": "Build All",
      "dependsOn": ["Build Frontend", "Build Backend"],
      "group": {
        "kind": "build",
        "isDefault": true
      },
      "problemMatcher": []
    },
    {
      "label": "Lint",
      "type": "shell",
      "command": "npm run lint",
      "problemMatcher": ["$eslint-stylish"]
    },
    {
      "label": "Test",
      "type": "npm",
      "script": "test",
      "group": {
        "kind": "test",
        "isDefault": true
      },
      "problemMatcher": []
    },
    {
      "label": "CI Pipeline",
      "dependsOn": ["Lint", "Build All", "Test"],
      "dependsOrder": "sequence",
      "problemMatcher": []
    },
    {
      "label": "Watch Frontend",
      "type": "npm",
      "script": "watch:frontend",
      "isBackground": true,
      "presentation": {
        "group": "watchers",
        "reveal": "always"
      },
      "problemMatcher": ["$tsc-watch"]
    },
    {
      "label": "Watch Backend",
      "type": "npm",
      "script": "watch:backend",
      "isBackground": true,
      "presentation": {
        "group": "watchers",
        "reveal": "always"
      },
      "problemMatcher": ["$tsc-watch"]
    },
    {
      "label": "Dev Mode",
      "dependsOn": ["Watch Frontend", "Watch Backend"],
      "problemMatcher": []
    }
  ]
}

このタスク構成は以下のワークフローを実現します。

graph TD
    A[CI Pipeline] --> B[Lint]
    B --> C[Build All]
    C --> D[Build Frontend]
    C --> E[Build Backend]
    D --> F[Test]
    E --> F
    F --> G[完了]
    
    H[Dev Mode] --> I[Watch Frontend]
    H --> J[Watch Backend]

トラブルシューティング

“command not found"エラーの対処

タスク実行時に「command not found」エラーが発生する場合、シェルの起動スクリプトが実行されていない可能性があります。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "npm script",
      "type": "npm",
      "script": "build",
      "options": {
        "shell": {
          "args": ["-c", "-l"]
        }
      }
    }
  ]
}

-lオプションを追加すると、ログインシェルとして実行され、~/.bashrcなどが読み込まれます。

文字エンコーディングの問題

日本語などの非ASCII文字が文字化けする場合は、コードページを変更します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Japanese Output",
      "type": "shell",
      "command": "chcp 65001 && npm run build",
      "windows": {
        "command": "chcp 65001 && npm run build"
      },
      "problemMatcher": []
    }
  ]
}

まとめ

VSCode タスク設定（tasks.json）を活用することで、ビルド、テスト、リントなどの開発作業を大幅に効率化できます。

本記事で解説した内容を振り返ります。

機能	用途
基本タスク定義	コマンドの実行と自動化
problemMatcher	ビルドエラーの自動検出
複合タスク	並列・順次実行の制御
npm/gulp/make連携	既存ツールとの統合
変数置換	動的なコマンド生成
OS別設定	クロスプラットフォーム対応
バックグラウンドタスク	ウォッチモードの実行

tasks.jsonをチームで共有することで、開発環境の統一とオンボーディングの効率化も実現できます。プロジェクトに合わせたタスク設定を構築し、開発生産性を向上させましょう。

VSCode タスク設定でビルド・テストを自動化する#

この記事で得られること#

前提条件と実行環境#

tasks.jsonの保存場所#

VSCode タスクの基本構造#

最小構成のtasks.json#

タスクの実行方法#

タスクの主要プロパティ#

タスクグループの設定#

デフォルトビルドタスクの設定#

デフォルトテストタスクの設定#

problemMatcherによるエラー検出#

組み込みproblemMatcherの一覧#

組み込みproblemMatcherの使用例#

カスタムproblemMatcherの定義#

マルチラインproblemMatcherの定義#

複合タスク（dependsOn）による並列・順次実行#

並列実行（デフォルト）#

順次実行#

npm連携タスク#

npmスクリプトの自動検出#

npmタスクのカスタマイズ#

npmタスクの自動検出の無効化#

gulp連携タスク#

gulpfile.jsの例#

gulpタスクのカスタマイズ#

make連携タスク#

Makefileの例#

makeタスクの定義#

カスタムタスクの作成#

シェルタスクとプロセスタスク#

引数の指定方法#

変数置換の活用#

主要な変数一覧#

変数を使用したタスク例#

入力変数の使用#

OS別設定の定義#

OS固有のコマンド設定#

グローバルオプションとOS固有オプション#

presentationによる出力制御#

presentationプロパティの詳細#

分割ターミナルでの実行#

バックグラウンドタスク（ウォッチモード）#

TypeScript Watchタスクの設定#

preLaunchTaskとしての使用#

キーボードショートカットへのバインド#

keybindings.jsonへの登録#

実践的なtasks.json設定例#

フルスタック開発向けtasks.json#

トラブルシューティング#

“command not found"エラーの対処#

文字エンコーディングの問題#

まとめ#

参考リンク#