vscode debug ES6 application

Question

I have VSCode 0.5.0. I set the compilerOptions flag to "ES6" and the editor started recognizing my ES6 code as correct. I have babel installed. My Mocha tests use the babel compilers and my tests pass. My app runs from the command line with no problems when I launch it with babel-node . When I debug the app from within VSCode, it starts up without the ES6 support, and the app fails for ES6 syntax issues. Are there debug settings that I missed turning on?

Answer 1

Assuming you have babel-cli installed as a local module in your project the following should work.

launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch",
            "type": "node",
            "request": "launch",
            "program": "${workspaceRoot}/node_modules/babel-cli/bin/babel-node.js",
            "stopOnEntry": false,
            "args": [
                "${workspaceRoot}/server.js"
            ],
...

Answer 2

By default VSCode launches node just with a --debug-brk option. This is not enough to enable ES6 support. If you can find out what options 'babel-node' passes to node, you could specify the same options in the VSCode launch config (through the runtimeArgs attribute). But this does not solve the issue that babel-node transpiles your ES6 code before running it.

Alternatively you could try to set the 'runtimeExecutable' in your launch config to 'babel-node'. This approach works with other node wrappers, but I haven't verified that is works with babel-node.

A third option (which should work) is to use the attach mode of VSCode: for this launch babel-node from the command line with the '--debug' option. It should print a port number. Then create an 'attach' launch config in VSCode with that port.