VSCode Node + Babel Recipe | Solves: vscode debug unexpected token import

VSCode_Node_Babel_Recipe.md

VSCode Node + Babel Recipe

Debug Modern JavaScript with VSCode. Part of VSCode Course.

1. init a module:

npm init -y

2. Babel setup

npm i -D babel-cli babel-core babel-preset-env

3. Add .babelrc

touch .babelrc

4. Edit .babelrc

{
  "presets": ["env"]
}

5. The package.json file looks like

{
  "name": "vscodepro",
  "description": "VSCode.pro for Power Users",
  "version": "1.0.0",
  "author": "AhmadAwais",
  "license": "MIT",
  "main": "index.js",
  "scripts": {
    "start": "babel-node index.js",
    "debug": "babel-node debug index.js"
  },
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.3",
    "babel-preset-env": "^1.7.0",
  }
}

6. My .vscode/launch.json file

{
	"version": "0.2.0",
	"configurations": [
		{
			"type": "node",
			"request": "attach",
			"name": "Attach",
			"restart": true,
			"port": 9229
		},
		{
			"type": "node",
			"request": "launch",
			"protocol": "inspector",
			"name": "ES6 Debugger",
			"program": "${workspaceFolder}/index.js",
			"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/babel-node",
			"runtimeArgs": ["--presets", "env"]
		}
	]
}

7. My node version v9.7.1

Peace! ✌️

License & Conduct

• MIT © Ahmad Awais
• Code of Conduct

Connect

 (follow) To stay up to date on free & open-source software

 (follow) To get #OneDevMinute daily hot tips & trolls

 (subscribe) To tech talks & #OneDevMinute videos

 (read) In-depth & long form technical articles

 (connect) On the LinkedIn profile y'all

Sponsor

Me (Ahmad Awais) and my incredible wife (Maedah Batool) are two engineers who fell in love with open source and then with each other. You can read more about me here. If you or your company use any of my projects or like what I’m doing then consider backing me. I'm in this for the long run. An open-source developer advocate.

• 🌟 $9.99/month (recommended) ❯ Two cups of Caffè latte (coffee) every month →
• 🚀 $99.99 (one-time sponsor) ❯ Support an hour of open-source code →
• 🔰 $49.99 (one-time sponsor) ❯ Support an hour of maintenance →
• ☕️ $9.99 (one-time sponsor) ❯ Lunch/coffee →

Or you can back me by checking out my super fun video course. As developers, we spend over 200 Hrs/month with our code editors — it's only fair to learn your next editor deeply. This course will save you 15-20 hours every month. Become a VSCode Power User →

VSCODE