Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
9
Help us understand the problem. What is going on with this article?
@amay077

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

More than 1 year has passed since last update.

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が立っていて、これが加わると便利になりそうだなと思います。

参考

9
Help us understand the problem. What is going on with this article?
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
amay077
ランチの時は呼ぶといい!

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
9
Help us understand the problem. What is going on with this article?