debugging in Visual Studio Code with babel-node

Question

I'm using:

• VS Code v1.3.1
• node v6.3.1
• babel-node v6.11.4
• Windows 10

I'm unable to get a stop at a breakpoint with the following launch file. The debugger runs and attaches to a port, but when I run the applications with a breakpoint, it doesn't stop at the breakpoint and runs straight through. Anyone that has gotten this to work, please advise.

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch",
            "type": "node",
            "request": "launch",
            "program": "${workspaceRoot}/src/app.js",
            "stopOnEntry": false,
            "args": [],
            "cwd": "${workspaceRoot}",
            "preLaunchTask": null,
            "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/babel-node.cmd",
            "runtimeArgs": [
                "--nolazy"
            ],
            "env": {
                "NODE_ENV": "development"
            },
            "externalConsole": false,
            "sourceMaps": false,
            "outDir": null
        },
        {
            "name": "Attach",
            "type": "node",
            "request": "attach",
            "port": 5858,
            "address": "localhost",
            "restart": false,
            "sourceMaps": false,
            "outDir": null,
            "localRoot": "${workspaceRoot}",
            "remoteRoot": null
        },
        {
            "name": "Attach to Process",
            "type": "node",
            "request": "attach",
            "processId": "${command.PickProcess}",
            "port": 5858,
            "sourceMaps": false,
            "outDir": null
        }
    ]
}

Answer 1

No need to transpile with @babel/node

Basic setup (sourcemaps - always)

Note the sourceMaps and retainLines options in .babelrc:

{
  "presets": [
    "@babel/preset-env"
  ],
  "sourceMaps": "inline",
  "retainLines": true
}

And then in launch.json:

{
  "type": "node",
  "request": "launch",
  "name": "Debug",
  "program": "${workspaceFolder}/index.js",
  "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/babel-node",
  "runtimeArgs": [
    "--nolazy"
  ]
}

Advance setup (sourcemaps - development only)

You can tweak the above so only to generate source-maps/retainLines in development mode:

{
  "presets": [
    "@babel/preset-env"
  ],
  "env": {
    "development": {
      "sourceMaps": "inline",
      "retainLines": true
    }
  }
}

And:

{
  "type": "node",
  "request": "launch",
  "name": "Debug",
  "program": "${workspaceFolder}/index.js",
  "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/babel-node",
  "runtimeArgs": [
    "--nolazy"
  ],
  "env": {
    "BABEL_ENV": "development"
  }
}

---

Notes

• Currently "type": "pwa-node" (see more) doesn't work with this setup.
• For "--nolazy" see this.
• "BABEL_ENV": "development" - Unless a different value is set the default is development, so adding this in the launch config is not essential (but does make things more explicit).