導入
皆さんは、開発中に「ターミナルを開いてコマンドを入力し、エラーが出たら修正して、またターミナルに戻る」という作業を繰り返していませんか？この「コンテキストの切り替え」は意外と集中力を削ぐものです。VS Codeのtasks.jsonを活用すれば、ビルドやテストなどの繰り返し作業をエディタ内で完結させ、さらにエラー箇所へワンクリックで移動できるようになります。開発フローを自動化して、コーディングに集中する時間を増やしましょう。
基礎知識
tasks.jsonは、VS Codeに対して「どのようなコマンドを、どのような条件で実行するか」を指示する設定ファイルです。プロジェクト内の.vscodeフォルダに配置されます。
ここで重要なのがProblem Matcher（プロブレムマッチャー）という機能です。通常、ターミナルに表示されるエラーログはただの文字ですが、これを解析して「ファイル名」「行番号」「エラー内容」を抽出することで、VS Codeの「問題」パネルに一覧表示させることができます。これにより、エラーログを目で追う必要がなくなり、エラー箇所へ直接ジャンプできるようになります。
実装/解決策
tasks.jsonを設定するには、VS Codeで「タスクの構成」を選択するか、.vscode/tasks.jsonを作成します。基本的な構成要素は以下の通りです。
1. label: タスクの名前（実行時に表示されます）
2. command: 実行するシェルコマンド
3. group: タスクの分類（ビルドタスクかテストタスクかなど）
4. problemMatcher: ターミナルの出力を解析するルール
サンプルプログラム
以下は、Node.jsのプロジェクトでnpm testを実行し、エラー出力をVS Codeに連携させるサンプルです。この内容を .vscode/tasks.json として保存してください。
{
“version”: “2.0.0”,
“tasks”: [
{
“label”: “テストを実行する”,
“type”: “shell”,
“command”: “npm test”,
“group”: {
“kind”: “test”,
“isDefault”: true // これによりショートカットで即実行可能になります
},
// ターミナルの出力をVS Codeが理解できる形式に変換する設定
“problemMatcher”: [
“$eslint-stylish”
],
“presentation”: {
“reveal”: “always”, // タスク実行時にターミナルを自動で開く
“panel”: “shared” // 前回のタスク結果を上書きする
}
}
]
}
応用・注意点
現場で活用する際のポイントをいくつか紹介します。
・ショートカットの活用: “isDefault”: true を設定しておくと、Windowsなら「Ctrl + Shift + B」、Macなら「Cmd + Shift + B」で即座にビルドやテストが走ります。
・既存のNPM Scriptsとの連携: すでにpackage.jsonにスクリプトがある場合、コマンドを直接書く代わりに “type”: “npm”, “script”: “test” と記述することで、より簡潔に定義できます。
・パスの注意点: チーム開発の場合、個人の環境によってコマンドのパスが異なることがあります。可能であればプロジェクトルートからの相対パスでコマンドを指定するようにしましょう。
tasks.jsonを使いこなすと、単なる「コマンド実行機」ではなく、エディタが「開発の司令塔」に変わります。まずは簡単なスクリプトから自動化を試してみてください。
コメント