使用Create-React-App进行VSCode调试

发布时间：2020-12-15 16:20:52 所属栏目：百科来源：网络整理

导读：我想设置我的VS代码来调试使用’create-react-app’创建的React-app. 我试过这个配置： { "version": "0.1.0","configurations": [ { "name": "Launch node","type": "node","request": "launch","program": "${workspaceRoot}/src/index.js","cwd": "${work

我想设置我的VS代码来调试使用’create-react-app’创建的React-app.

我试过这个配置：

{
    "version": "0.1.0","configurations": [
        {
            "name": "Launch node","type": "node","request": "launch","program": "${workspaceRoot}/src/index.js","cwd": "${workspaceRoot}","preLaunchTask": null,"runtimeExecutable": null,"runtimeArgs": [
                "--nolazy"
            ],"env": {
                "NODE_ENV": "development"
            },"sourceMaps": true,"outFiles": []
        },{
            "name": "Attach","request": "attach","port": 9222,"address": "localhost","restart": false,"sourceMaps": false,"localRoot": "${workspaceRoot}","remoteRoot": null
        }
    ]
}

但我得到错误以下错误：

Debugger listening on port 11198
e:formsrcindex.js:1
(function (exports,require,module,__filename,__dirname) { import React from 'react';
                                                             ^^^^^^

SyntaxError: Unexpected reserved word

…

我想我需要将’preLaunchTask’设置为babel或将’outFiles’设置为某个dist文件夹,但我不知道我应该在哪里指出它.

我会感激你的想法.
TNX

解决方法

您的配置不正确.它应该是：

{
  "version": "0.2.0","configurations": [{
    "name": "Chrome","type": "chrome","url": "http://localhost:3000","webRoot": "${workspaceRoot}/src","userDataDir": "${workspaceRoot}/.vscode/chrome","sourceMapPathOverrides": {
      "webpack:///src/*": "${webRoot}/*"
    }
  }]
}

详见https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#debugging-in-the-editor

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!