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

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

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

预期的步骤是：

1. 运行 npm start。
2. 在浏览器中启动应用。
3. 进入调试模式。

如何做到这一点？

解决方法

有两种方法：

第一种方式：手动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，然后启动调试模式

以下配置取自this blog post。

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",// 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 集成终端的进程下，并且在调试过程完成后也会继续运行。
   因此，如果您想终止服务器进程，请使用集成终端终止它。