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 bab

Answer 1

There are two ways of doing it:

First Option using npm command prompt

In package.json file create build command that will execute babel

{
  "scripts": {
    "build": "babel src --out-dir dist --watch --source-maps"
  },
  "devDependencies": {
    "babel-cli": "^6.23.0",
    "babel-preset-es2015-node6": "^0.4.0",
    "eslint": "^3.16.0"
  }
}

In launch.json Enter following code:

{
  "configurations": [
    {
      "name": "Launch",
      "type": "node",
      "request": "launch",
      "program": "${workspaceRoot}/src/index.js",
      "stopOnEntry": false,
      "args": [],
      "cwd": "${workspaceRoot}",
      "runtimeArgs": [
        "--nolazy"
      ],
      "sourceMaps": true,
      "outFiles": [
        "${workspaceRoot}/dist/**/*.js"
      ]
    }
  ]
}

Open your cmd window, navigate to your package.json file and execute:

npm run build

Open your VS Code and run your code. It will run and it will stop at all your breakpoints. The reason it works because source maps are generated and VS knows how to map them to your code.

Second option using VS Code task:

In VS Code add following task (Ctrl + Shift + P) and type 'Tasks: Configure Task Runner':

Add following code to tasks.json file

{
  "version": "0.1.0",
  "command": "${workspaceRoot}/node_modules/.bin/babel",
  "isShellCommand": true,
  "tasks": [
    {
      "taskName": "watch",
      "args": [
        "src",
        "--out-dir",
        "dist",
        "--watch",
        "--source-maps"
      ],
      "suppressTaskName": true,
      "isBuildCommand": true
    }
  ]
}

Now execute task, but pressing Ctrl + Shift + B (build command) and now you can run and debug your code. VS Code doing the same as what npm is doing in step one.

You will also need to configure babel in .babelrc (located in the root of the project) file like this:

{
  "presets": [
    "es2015-node6"
  ]
}

and jsconfig.json (located in the root of the project)

{
  "compilerOptions": {
    "target": "ES6"
  },
  "include": [
    "src/**/*"
  ]
}

Answer 2

babel + nodemon

In the VS Code Terminal, launch your server with the --inspect argument:

nodemon --inspect --watch src --exec node_modules/.bin/babel-node --presets react,es2015 src/server.js

Among the other lines, one will show the port on which the debugger is listening:

...
Debugger listening on port 9229
...

Create the following debug configuration:

{
    "type": "node",
    "request": "attach",
    "name": "Attach to Port",
    "address": "localhost",
    "port": 9229
}

Launch the debugger, and if everything went fine you will see in the output Terminal:

Debugger attached.

From now on, you can debug your application.

Answer 3

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.