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

{
        "name": "Launch via Babel",
        "type": "node",
        "request": "launch",
        "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/babel-node",
        "runtimeArgs": ["--presets", "env"],
        "program": "${file}"
}

#34615

doesn't work with async/await

my VSCode config using Nodemon + Babel Node , no problems so far:
launch.json

{
    "type": "node",
    "request": "launch",
    "name": "backend - nodemon",
    "cwd": "${workspaceFolder}/backend",
    "runtimeExecutable": "${workspaceFolder}/backend/node_modules/.bin/nodemon",
    "runtimeArgs": [
        "--nolazy",
        "--exec",
        "${workspaceFolder}/backend/node_modules/.bin/babel-node"
    ],
    "program": "${workspaceFolder}/backend/lib/development.js",
    "restart": true,
    "protocol": "inspector",
    "stopOnEntry": false,
    "sourceMaps": true,
    "showAsyncStacks": true,
    "console": "internalConsole",
    "internalConsoleOptions": "neverOpen",
    "env": {
        "BABEL_ENV": "development"
    }
}

.babelrc

{
  "presets": [
    ["@babel/preset-env", {"targets": {"node": "current"}, "debug": true}]
  ],
  "plugins": [
    "@babel/plugin-transform-runtime",
    "@babel/plugin-syntax-dynamic-import",
    "@babel/plugin-syntax-import-meta",
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-proposal-json-strings",
    ["@babel/plugin-proposal-decorators", {"legacy": true}],
    "@babel/plugin-proposal-function-sent",
    "@babel/plugin-proposal-export-namespace-from",
    "@babel/plugin-proposal-numeric-separator",
    "@babel/plugin-proposal-throw-expressions",
    "@babel/plugin-proposal-export-default-from",
    "@babel/plugin-proposal-logical-assignment-operators",
    "@babel/plugin-proposal-optional-chaining",
    ["@babel/plugin-proposal-pipeline-operator", {"proposal": "minimal"}],
    "@babel/plugin-proposal-nullish-coalescing-operator",
    "@babel/plugin-proposal-do-expressions",
    "@babel/plugin-proposal-function-bind"
  ],
  "env": {
    "development": {
      "sourceMaps": true,
      "retainLines": true
    }
  }
}

Thanks a lot guys! 👍

can you use breakpoint while still running the debugger?
I used babel-node from @babel/node with almost same configuration in the launch.json, but it seems the breakpoint will works only if I restart the debugger.

yes I can use them without problems.
also make sure vscode, chrome, vscode debugger for chrome are at latest version.
what do you mean by "almost same configuration"?

Shameless plug: This is a part of my VSCode.pro course folks, do check it out.

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

Thx Ahmet ⛳