VSCodeでReactのデバッグ環境を整える

この記事の目的

Reactプロジェクトで基本yarnを使っている場合に、デバッグ用の設定どうするかを模索した結果です。
VSCode上でブレーク張って変数見たりできるようになります。

設定ファイル

.vscodeフォルダ内に以下の２ファイルを作成します。

• tasks.json：ターミナル＞タスクの構成...＞npm: start
• launch.json：実行＞構成の追加...＞Chrome
  からそれぞれ雛形のファイルを生成できます。

tasks.json

{
    "version": "2.0.0",
    "tasks": [
        {
            "type": "shell",
            "command": "yarn start", // package.jsonで設定しているコマンド
            "label": "yarn: start",　// launch.jsonで使います
            "detail": "react-scripts start",
            "group": {
                "kind": "test",
                "isDefault": true
            },
            "isBackground": true,
            "problemMatcher": {
                "owner": "custom",
                "pattern": {
                    "regexp": "ˆ$"
                },
                "background": {
                    "activeOnStart": true,
                    "beginsPattern": "Compiling...",
                    "endsPattern": "Compiled .*"
                }
            }
        }
    ]
}

上記typeにnpmは指定できますが、yarnは指定できないのでshellとしています。
その代わりcommandで実行したいコマンドを全て指定しています。こちらはpackage.jsonで指定しているreact-scripts startのエイリアスコマンドに対応させます。

launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-chrome",
            "request": "launch",
            "preLaunchTask": "yarn: start", ・ tasks.jsonのlabel
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}",
            "sourceMaps": true,
            "sourceMapPathOverrides": {
                "webpack:///./*": "${webRoot}/src/*"
            }
        }
    ]
}

webRootはモノレポのプロジェクトの場合、"${workspaceFolder}/frontend"のように指定してください。
nameはVSCodeの実行とデバッグの名称になります。今回の設定の場合の見た目は以下の画像参照。

最後に、デバッグ用のChromeだけが立ち上がるようために必要な設定を行います。
と言っても簡単で、.envファイルに以下を追記するだけです。

.env

BROWSER=none

おわりに

上記設定の後、launch.jsonのpreLaunchTaskの中身をnpmにしてこちゃこちゃしても同じことだなと気づきました。
でも、デバッグできたらいいじゃないということで、お好みの設定で快適な開発ライフを送りましょう。