A set of VSCode configurations that allow for easy client-side debugging of React

launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/src",
      "preLaunchTask": "start",
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*",
      }
    }
  ]
}

tasks.json

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "start",
      "type": "npm",
      "script": "start",
      "isBackground": true,
      "problemMatcher": {
        "owner": "custom",
        "pattern": {
          "regexp": "^$"
        },
        "background": {
          "activeOnStart": true,
          "beginsPattern": "Starting the development server...",
          "endsPattern": "Compiled .*"
        }
      },
      "identifier": "Start Server"
    }
  ]
}