VisualStudioCode(VS code)を使ってES6で書いたファイルをデバッグしようとしたところ、思ったより難しくて若干はまりました。ネット上に古い情報が多かったのと、日本語の情報がなさそうだったのでやり方をメモしておきます。
コード
ディレクトリ構造
以下のようにsrc
にコードがまとまっていて、main.js
をデバッグしたいということにして話を進めます。
├── package.json
├── .babelrc
└── src
├── add.js
└── main.js
いろいろ設定
まず、VS codeの左の虫のアイコン→歯車のアイコンとクリックして、.vscode/launch.json
を生成し、以下のように書きます。コンパイル時にsource-maps
を使うことと、コンパイル前後のファイルのパスを明示します。
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "プログラムの起動",
"program": "${workspaceRoot}/src/main.js",
"sourceMaps": true,
"outFiles": ["${workspaceRoot}/.compiled/main.js"]
}
]
}
コンパイルのためのコマンドをpackage.json
に書いておきます(この辺はそれぞれ適当にやってください)。--source-maps
オプションをつけることが重要です。
{
...
"scripts": {
"compile": "rm -rf .compiled && babel src --out-dir .compiled --source-maps"
},
...
}
これで、コマンドラインで
npm run compile
してからsrc/main.js
に適当にbreak pointを設定して、虫アイコン→緑の三角アイコンとクリックすると、ちゃんと動いていることがわかると思います。
コンパイルの自動化
デバッグのためにいちいちnpm run compile
と打つのが若干めんどくさいです。これを改善するため、緑の三角アイコンをクリックした際に自動的にコンパイルをしてくれるようにしましょう。
まずは.vscode/launch.json
に一行追加します。
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "プログラムの起動",
"program": "${workspaceRoot}/src/main.js",
"sourceMaps": true,
"outFiles": ["${workspaceRoot}/.compiled/main.js"],
+ "preLaunchTask": "compile"
}
]
さらに、.vscode/tasks.json
というファイルを追加します。
{
"version": "0.1.0",
"command": "npm",
"isShellCommand": true,
"args": ["run"],
"showOutput": "silent",
"tasks": [
{
"taskName": "compile",
"isBuildCommand": false,
"isTestCommand": false,
"showOutput": "silent",
"args": []
}
]
}
これで、緑の三角アイコンを押すだけでコンパイルも含めてやってくれるようになります。
参考
- https://gist.github.com/dchowitz/83bdd807b5fa016775f98065b381ca4e
- https://www.youtube.com/watch?v=NUtC-FjJILw
- https://stackoverflow.com/questions/38557822/debugging-in-visual-studio-code-with-babel-node
- https://stackoverflow.com/questions/31711286/vscode-debug-es6-application
- https://stackoverflow.com/questions/36006303/vs-code-breakpoint-ignored-because-generated-code-not-found-error