VSCode + Babel でデバッグをする

Visual Studio Code を利用して node.js のプロジェクトのデバッグを行うとブレークポイントの利用ができるなど非常に便利です。しかし、babelを利用してコードのトランスパイルを行っていると、デフォルトの設定ではブレークポイントを貼り付けることができません。ここではその対応を行い、bableを利用してもブレークポイントを利用してデバッグができるようにします。

ビルドをするscriptを定義する

babelでコードをトランスパイラするためのscriptをpackage.jsonに定義します。

package.json

"scripts": {
  "build": "babel src/ -d build/ --source-maps",
}

パスなどは自分の環境に合わせて変更をしてください。--source-mapsというオプションを付けてトランスパイル元のファイルと前のファイルを結びつけます。

タスクを定義する

次に、Visual Studio Code で利用するタスクを定義します。.vscode/tasks.jsonを編集します。

.vscode/tasks.json

{
  "version": "2.0.0",
  "tasks": [
    {
      "identifier": "build",
      "type": "npm",
      "script": "build",
      "problemMatcher": []
    }
  ]
}

Visual Studio Code からnpm run buildを呼び出すことができるように成りました。

実行の構成を作る

最後にVisual Studio Code の実行のための構成を作ります。.vscode/launch.jsonを編集します。

.vscode/launch.json

{
  "version": "0.2.0",
  "configurations": [

    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "program": "${workspaceFolder}/build/index.js",
      "preLaunchTask": "build",
      "sourceMaps": true,
      "outFiles": ["${workspaceRoot}/build"]
    }
  ]
}

preLaunchTaskで先程定義をしたbuildタスクを呼び出してbabelによるトランスパイルを行います。sourceMapsオプションをtrueとしoutFilesにトランスパイルされたファイルが格納されているディレクトリのリストを指定します。

Visual Studio Codeのデバッグ->デバッグの開始でコードの実行ができます。また、トランスパイル前のコードにブレークポイントを設定しても、コードを停止することが可能です。

まとめ

Visual Studio Codeのデバッグ機能を利用してbableによってトランスパイルされたコードに対してもブレークポイントを利用するための設定を紹介しました。