VSCode配置支持mocha调试

背景

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

启用调试

点击Debug的标签，如下图：

点击上册的配置按钮，选择Node.js，并在打开的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"
      }
    }
  ]
}

并在根目录下增加testHelper.js和registerBabel.js两个文件：
testHelper.js:

require('./registerBabel');

registerBabel.js:

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

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

到此为止，在下列图片内的下拉处选择Run mocha并点击下面图片内的绿色按钮既可以开启调试。

优化

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

{
  "retainLines": true
}