Skip to content

Instantly share code, notes, and snippets.

@ahmadawais
Last active November 1, 2022 11:31
Show Gist options
  • Star 18 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save ahmadawais/518113716d90022e115946fe95859cd2 to your computer and use it in GitHub Desktop.
Save ahmadawais/518113716d90022e115946fe95859cd2 to your computer and use it in GitHub Desktop.
VSCode Node + Babel Recipe | Solves: vscode debug unexpected token import

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


πŸ™Œ

Connect

GitHub @AhmadAwaisΒ (follow) To stay up to date on free & open-source software

Twitter @MrAhmadAwaisΒ (follow) To get #OneDevMinute daily hot tips & trolls

YouTube AhmadAwaisΒ (subscribe) To tech talks & #OneDevMinute videos

Blog: AhmadAwais.comΒ (read) In-depth & long form technical articles

LinkedIn @MrAhmadAwaisΒ (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.


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


VSCode Ahmad on Twitter

@ahmadawais
Copy link
Author

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

#34615

@futurfutur
Copy link

doesn't work with async/await

@yokrysty
Copy link

yokrysty commented May 15, 2019

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
    }
  }
}

@AliakseiYakubuk
Copy link

Thanks a lot guys! πŸ‘

@darrylsepeda
Copy link

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.

@yokrysty
Copy link

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"?

@ahmadawais
Copy link
Author

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


πŸ“ƒ

License & Conduct


πŸ™Œ

Connect

GitHub @AhmadAwaisΒ (follow) To stay up to date on free & open-source software

Twitter @MrAhmadAwaisΒ (follow) To get #OneDevMinute daily hot tips & trolls

YouTube AhmadAwaisΒ (subscribe) To tech talks & #OneDevMinute videos

Blog: AhmadAwais.comΒ (read) In-depth & long form technical articles

LinkedIn @MrAhmadAwaisΒ (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.


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


VSCode
Ahmad on Twitter

@tuncatunc
Copy link

Thx Ahmet β›³

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment