如何直接从 VSCode 运行和调试 React 应用程序？

Question

我希望能够直接从 VSCode 编译和运行 React 应用程序，然后进入调试模式（无论它是 javascript 还是 Typescript React 应用程序，都可以执行此操作）。

预期步骤是：

1. 运行

   npm start

   。
2. 在浏览器中启动应用程序。
3. 进入调试模式。

这怎么办？

Answer 1

有两种方法可以做到：

第一种方式：手动

npm start

，然后启动调试模式

1. 首先使用VSCode集成终端，运行

   npm start

   。

2. 然后，使用以下

   launch.json

   ：

   {
       "version": "0.2.0",
       "configurations": [ 
           {
               "name": "Chrome",
               "type": "chrome",
               "request": "launch",
               "url": "http://localhost:3000",     // create-react-app's default port 3000
               "webRoot": "${workspaceRoot}/src"
           }
       ]
   }
   

3. 点击“运行”按钮。

第二种方式：自动化

npm start

，然后启动调试模式

以下配置摘自这篇博文。

1. tasks.json

   {
       "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
                }
             }
          }
       ]
   }
   

• 注意： 如果是多根工作区，其中

  package.json

  可能位于子文件夹中，请将以下内容添加到任务定义中：

  "options": { 
     "cwd": "${worspaceFolder}/your-subfolder" 
  }
  

2. launch.json

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

3. 点击“运行”按钮。

注意事项（两种方式）：

1. 第一次运行

   npm start

   时，它将打开一个新的浏览器选项卡\窗口。您可以通过创建一个包含以下行的

   .env

   文件来阻止它：

   BROWSER=none

2. npm start

   将在VSCode的集成终端下运行。相应地，react 的服务器进程也会运行在 VSCode 集成终端的进程下，并且即使调试过程完成后也会继续运行。
   因此，如果您想终止服务器进程，请使用集成终端终止它。

Answer 2

自动化的替代方案

npm start

， 就是在打开的文件夹（工作区）上运行一次：

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "Start React development server",
            "type": "shell",
            "command": "npm",
            "args": [ "start" ],
            "runOptions": { "runOn": "folderOpen" }
        }
    ]
}

您确实应该创建一个包含

.env

行的

BROWSER=none

文件，以防止 React 自动打开项目的默认浏览器。 （应该有一个单独的

npm build

命令，我认为）