問題の概要F5キーを押してデバッグを開始しようとした際、アプリが起動する代わりにポップアップが表示されて進めなくなることがあります。これは、VS Codeのデバッガーが preLaunchTask プロパティで定義された特定の指示を探しているものの、設定ファイル内にそれが見つからないために発生します。まだ登録されていない電話番号に電話をかけようとしているような状態です。
正確なエラーメッセージは以下の通りです：
The task 'npm: build' referenced in launch.json cannot be found.
要約：60秒でできる解決策- .vscode/launch.json を開き、preLaunchTask 内の正確なテキストをコピーします。- .vscode/tasks.json を開き、そのテキストと完全に一致する label を持つタスクが存在することを確認します。- tasks.json がない場合は、.vscode フォルダ内に手動で作成する必要があります。- VS Codeを再起動して、タスクランナーのキャッシュを強制的に更新します。## ステップ1：ラベルの一致を確認するVS Codeは、単純な文字列の一致を利用してデバッガーとビルドスクリプトを紐付けます。タイポ（打ち間違い）が1文字あったり、不要なスペースが入っていたり、大文字・小文字が異なっていたりするだけで、このリンクは切れてしまいます。コンピュータは融通が利きません。"npm: build" と "npm: Build" が同じものを指しているとは判断してくれないのです。
check launch.json.vscode/launch.json ファイルを開きます。実行しようとしている設定を探し、preLaunchTask の行を確認します。
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"program": "${workspaceFolder}/app.js",
"preLaunchTask": "npm: build"
}
]
}
check tasks.json次に、.vscode/tasks.json を開きます。ここにある label は、上記の preLaunchTask と1対1で完全に一致している必要があります。
{
"version": "2.0.0",
"tasks": [
{
"label": "npm: build",
"type": "shell",
"command": "npm run build"
}
]
}
もしラベルが単に "build" なのに、launch.json が "npm: build" を要求している場合、デバッガーは毎回失敗します。
ステップ2：自動検出に頼らないVS Codeは package.json をスキャンして npm: build のようなタスクを自動検出しようとします。しかし、このプロセスには時間がかかることがあります。大規模なプロジェクトを開いてから5〜10秒以内にデバッグを開始しようとすると、拡張機能のスキャンがまだ完了していない可能性があります。
最も確実な解決策は、タスクを明示的に定義することです。これにより推測を排除できます。package.json のスクリプトを使用したい場合は、tasks.json で以下のような明示的な形式を使用してください。
{
"version": "2.0.0",
"tasks": [
{
"type": "npm",
"script": "build",
"problemMatcher": [],
"label": "npm: build"
}
]
}
ステップ3：JSONの構文エラーを探す12行目のカンマが1つ抜けているだけで、tasks.json ファイル全体が無効になることがあります。JSONの形式が正しくない場合、VS Codeは構文エラーを表示するのではなく、そのファイルを黙って無視します。その結果、単純にタスクが存在しないかのように振る舞います。
ToolCraftの JSON Formatter & Validator を使用することをお勧めします。コードをそこに貼り付けて、ダークテーマのエディタでは見落としがちな末尾のカンマや閉じカッコの不足をチェックしましょう。