如何直接从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集成终端的进程下运行，即使在调试进程完成后，它也将继续运行
   因此，如果您想终止服务器进程，请使用集成终端终止它。