VSCode调试ES6代码

文章来源：《Debugging ES6 in Visual Studio Code》

package.json

要安装babel-cli

其中scripts中的compile是最重要的，相当于会持续去编译ES6代码

{
  "name": "mes-rabbitmq-monitoringclient",
  "version": "1.0.0",
  "description": "MES system RabbitMQ Monitoring Client , Save Queue Message Data To DB And Call WebAPI",
  "main": "index.js",
  "scripts": {
    "start": "pm2 start dist/index.js --no-daemon",
    "build": "babel src -d dist",
    "compile": "babel src --out-dir .compiled --source-maps --watch",
    "local": "cross-env NODE_ENV=local nodemon --exec babel-node src/index.js"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/ChenWes/MES-RabbitMQ-MonitoringClient.git"
  },
  "keywords": [
    "MES",
    "RabbitMQ"
  ],
  "author": "WesChen(chenxuhua0530@163.com)",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/ChenWes/MES-RabbitMQ-MonitoringClient/issues"
  },
  "homepage": "https://github.com/ChenWes/MES-RabbitMQ-MonitoringClient#readme",
  "dependencies": {
    "amqplib": "^0.5.3",
    "config-lite": "^2.1.0",
    "extend": "^3.0.2",
    "fs": "^0.0.1-security",
    "lodash": "^4.17.15",
    "moment": "^2.23.0",
    "mongoose": "^5.4.1",
    "pm2": "^3.2.4",
    "redis": "^3.0.2",
    "socketcluster-client": "14.2.1",
    "winston": "^2.3.1",
    "winston-daily-rotate-file": "^1.4.6"
  },
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.3",
    "babel-eslint": "^10.0.1",
    "babel-polyfill": "^6.26.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1"    
  }
}

launch.json调试配置文件

很重要的是，其中outFiles中的配置，即npm run compile的目录 

然后配合env设置环境变量

{
    // 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": "Launch index.js",
            "program": "${workspaceRoot}/src/index.js",
            "outFiles": [
                "${workspaceRoot}/.compiled/**/*.js"
            ],
            "env": {
                "NODE_ENV": "local"
            }
        }
    ]
}

在调试代码前，先使用命令行运行命令

yarn compile
#或者是npm run compile

再在VSCode中按F5来调试代码，调试前，需要先打上断点，才会跑到断点中进行调试