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
}