如何在 VSCode 中使用 babel-node 调试 ES6代码

安装@babel/node

npm i @babel/node

目录结构

.
├── .babelrc
├── .vscode
│   └── launch.json
├── package.json

配置launch.json

关键点:

• 配置runtimeExecutable, 用babel-node来debug
• 开启sourcemap "sourceMaps": true,
• 配置env, 不影响babel其他功能

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "current file",
      "program": "${file}",
      "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/babel-node",
      "sourceMaps": true,
      "env": {
        "BABEL_ENV": "debug"
      }
    }
  ]
}

配置.babelrc

说明:
debug对应launch.json中的 "BABEL_ENV": "debug"

{
  "presets": ["@babel/preset-env"],
  "env": {
    "debug": {
      "sourceMaps": "inline",
      "retainLines": true
    }
  }
}