VSCodeでReact/Viteのプロジェクトをデバッグする

今まで、Reactをデバッグするときは、

npm run devで開発サーバを起動
ターミナルに表示されたURLを ctrl+clickでブラウザを開く
F12キーで、デバッグツールを起動して、console.logで値を確認

といった感じでした。

これでもいいのですが、コード上にブレークポイントを置いて、F5キーで実行としたかったので、やってみました
ちょくちょく使いそうなので、メモっておきます。
デバッガの終了にあわせて、開発サーバも停止したいのですが、気が向いたときに対応します。

手順

.vscodeフォルダにlaunch.jsonとtasks.jsonを配置する
F5キーで開発サーバとブラウザ／デバッガが立ち上がる
デバッグする
デバッガ終了する
開発サーバを停止する

launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:5173",
      "webRoot": "${workspaceFolder}",
      "preLaunchTask": "npm-run-dev"
    }
  ],
  "compounds": [
    {
      "name": "Start Dev Server and Debug",
      "configurations": ["Launch Chrome against localhost"],
      "preLaunchTask": "npm-run-dev",
      "stopAll": true
    }
  ]
}

tasks.json

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "npm-run-dev",
      "type": "npm",
      "script": "dev",
      "detail": "Start development server",
      "isBackground": true,
      "problemMatcher": [
        {
          "pattern": [
            {
              "regexp": ".",
              "file": 1,
              "location": 2,
              "message": 3
            }
          ],
          "background": {
            "activeOnStart": true,
            "beginsPattern": ".",
            "endsPattern": ".*Local:.*"
          }
        }
      ]
    }
  ]
}