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

Here's how to get VSCode debugger to work with Babel 6+:

First install dependencies locally:

$ npm install babel-cli --save $ npm install babel-preset-es2015 --save 

Then run babel-node:

$ node_modules/babel-cli/bin/babel-node.js --inspect --presets es2015 -- server.js --inspect 

By default, the debugger will listen on port 5858, so make sure the port matches in launch.json for Attach configuration:

{   "name": "Attach",   "type": "node",   "request": "attach",   "port": 5858 } 

Now attach the debugger in VSCode:

• make sure debug configuration is set to Attach and not Launch
• run with F5

Nodemon

Although not required, if you also want to use nodemon to pickup code changes without restarting the server, you can do this:

Make sure nodemon is installed:

$ npm install nodemon --save-dev 

Run the server

$ node_modules/.bin/nodemon node_modules/babel-cli/bin/babel-node.js --inspect --presets es2015 -- server.js --inspect 

Finally, attach the debugger as shown above.