如何在 VSCode 中使用 babel-node 調試 ES6代碼

安裝@babel/node

npm i @babel/node

目錄結構

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

<!--more-->

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

givencui博客首發, 轉載請註明來自GivenCui