Developing React (with create-react-app) and Visual Studio Code you usually press ESC-` and then npm start. The script from create-react-app then automatically starts a Browser. That you then close. then reopen by pressing F5 to start Chrome in debug mode.

Let’s make these steps a little quicker.

Create a Task for npm start

Press Ctrl-Shift- and Select “Tasks: Configure Default Test Task” This will create a tasks.json file.

In the tasks.json file you need to add a couple of values:

• isBackground: true - launch.json will not wait until the task completes
• problemMatcher Needs to be defined to figure out when the task has completed its initialization phase and it is safe to continue with the next task

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [
        {
            "type": "npm",
            "script": "start",
            "group": {
                "kind": "test",
                "isDefault": true
            },
            "isBackground": true,                       //This prevents the launch.json to wait for the completion of the task
            "problemMatcher": {
                "owner": "custom",                      //This is not needed but, required by the problemMatcher Object
                "pattern": {
                    "regexp": "^$"                      //This is not needed but, required by the problemMatcher Object
                },
                "background": {
                    "activeOnStart": true,
                    "beginsPattern": "Compiling...",    //Signals the begin of the Task
                    "endsPattern": "Compiled .*"        //Signals that now the initialization of the task is complete
                }
            },
            "identifier": "Start Server"
        }
    ]
}

Configure create-react-app

To prevent launching the browser you need to add in your .env-file following line:

BROWSER=none

More Info:

• .env-file

Configure the Launch.json file

Press F5 and select Chrome and a launch.json file will be created.

• Change the port to 3000 (create-react-app default)
• Add a preLaunchTask to start the task we defined earlier

{
    "version": "0.2.0",
    "configurations": \[
        {
            "name": "Chrome",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:3000",         //Change to the create-react-app default 3000
            "webRoot": "${workspaceRoot}/src",
            "preLaunchTask": "npm: start"           //Add prelaunch Task npm: start (defined in tasks.json)
        }
    \]
}

Start Working

Tadaa, now you press F5 and can start debugging directly in vscode. The background task will continue running even when you stop debugging.

Stop Working

You need to terminate the task via ctrl-shift-p > terminate Task. (Or you just close vscode)