Help us understand the problem. What is going on with this article?

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

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-serveng-kill という2つのタスクを定義します。

ng-serveng 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 に preLaunchTaskpostDebugTask を追加しただけです。

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

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

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

参考

amay077
ランチの時は呼ぶといい!
https://blog.amay0777.net/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした