VSCode配置支持mocha调试

平常开发的时候,经常性需要对某个组件进行单元测试。而VSCode提供了调试的node程序的功能，就希望直接在源码页面上调试，这样更加方便。

启用调试

1. 点击Debug的标签，如下图：

1. 在打开的lanuch.json文件复制以下内容：

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Run mocha",
      "type": "node",
      "request": "launch",
      "program": "${workspaceRoot}/node_modules/mocha/bin/_mocha",
      "stopOnEntry": false,
      "args": [
        "--no-timeouts",
        "--require",
        "./testHelper.js",
        "--compilers",
        "js:babel-core/register",
        "--recursive"
      ],
      "cwd": "${workspaceRoot}/",
      "runtimeExecutable": null,
      "env": {
        "NODE_ENV": "testing"
      }
    }
  ]
}

1. 在根目錄下创建 testHelper.js和registerBabel.js两个文件：

testHelper.js:

require('./registerBabel');

registerBabel.js:

require('babel-core/register')({
  // babel options
  // ...
  // 在这里可以处理某些特殊的需要，比如对`node_moduels`下某个组件启用babel解析等等
});

抽离这两个文件是为了让正式程序也直接可以调用registerBabel.js文件。

1. 当然要记得安装babel-core

npm i babel-core -D

然后再你想打断点的位置 打上断点，点击run 就可以了、。

优化

不过在处理过程中，发现断点的地方往往与实际不相符，这是因为编译后的源码与实际源码文件的行不一致造成的。只需要在.babelrc文件内加上一个属性即可：

{
  "retainLines": true
}