Angular + VSCode でデバッグ開始したときに ng serve する

#angular#vscode
Posted on 2018/07/12 00:00:00(+9:00)

Angular + VSCode でのWebアプリ開発、普通は

  1. ng serve する
  2. (launch.json で) Chrome 起動して http://localhost:4200/ を開く

としますが、 ng serve を忘れたりシェルのウィンドウどこいった？ってなったりして面倒なので VSCode の「デバッグ開始(F5)」 一発で ng serve -> Chrome 起動する方法を考えてみました。

.vscode/tasks.json

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "ng-serve",
            "type": "shell",
            "isBackground": true,
            "command": "ng serve",
            "problemMatcher": {
                "owner": "custom",
                "pattern": {
                    "regexp": "^$"
                },
                "background": {
                    "activeOnStart": true,
                    "beginsPattern": ".*Angular Live Development Server.*",
                    "endsPattern": ".*Compiled successfully.*"
                }
            }
        },
        {
            "label": "ng-kill",
            "type": "shell",
            "command": "killall ng"
        }
    ]
}

ng-serve と ng-kill という2つのタスクを定義します。

ng-serve は ng serve を実行するものですが、フォアグラウンドで実行すると、listen状態で待ち続ける（＝次の処理であるChrome起動が行われない）になるので、"isBackground": true にします。すると今度は「タスクの終了」を示すものがなくなってしまうので、"problemMatcher": { } 内の "endsPattern": ".*Compiled successfully.*" として、 「ng serve が正常に実施されてこのメッセージが出力されたらタスク終了とみなす」という定義をします。

ng-kill は、 killall ng として ng という名前のプロセスを kill しているだけです。VSCode の機能で「任意のタスクを終了させるタスク」を作る方法がわからなかったのでこうなりました:sweat: (macOS では動いたけど Windows では動きそうにないな…)

.vscode/launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Debug with Chrome",
            "url": "http://localhost:4200",
            "webRoot": "${workspaceFolder}",
            "preLaunchTask": "ng-serve",
            "postDebugTask": "ng-kill"
        }
    ]
}

こちらは通常の「Chromeを起動させる」 launch.json に preLaunchTask と postDebugTask を追加しただけです。

これで デバッグ開始(F5) をすると、ng serve が実行されて、待受開始になったら Chrome が起動します。 また、デバッグを停止させると killall ng が実行されて ng serve も停止します。

作ってはみたものの、実行の度に ng serve されるのはそれなりに時間がかかって嫌だし、これは常駐させておくものだからデバッグ終了で止めない方がいいかもなーと思います。

GitHub の VSCode プロジェクトでは「一度作ったタスクを使い回す」設定のPRが立っていて、これが加わると便利になりそうだなと思います。

参考