【Docker × VSCode】dockerコマンドをタスク登録してショートカット実行する

VScodeでdockerコンテナ開発をすることが多くなってきた。
そこで毎回、ターミナルに

• docker compose up -d
• docker ps
• docker network ls
• docker volume ls

などのお決まりのdockerコマンドを打つのが面倒だな
それによく打ち間違えたりすので、何かいい方法はないかと
探していたら、VScodeのタスクに登録すればいいことに気づいた

ので、VScodeのタスクを使ってdockerコマンドをショートカット実行する方法
をまとめる

VScodeのタスクとは？

Visual Studio Code（VSCode）のタスクは、特定の操作を自動化するための機能で
ビルドやデプロイなどの定型的な作業を自動化し、開発を効率化することができる。

要は毎回入力して実行するのが面倒なコマンドをタスクとして登録して
起きる機能！

これにdockerのコマンドを登録しておけば
毎回コマンドを打たずとも実行が可能になる。

タスクの種類

VScodeのタスクには

• ユーザータスク
• プロジェクトタスク

の2種類がある。

ユーザータスク

ユーザータスクは、VSCode全体で使用できるタスクのこと。
ここで定義したタスクは、VSCodeのどのプロジェクトでも利用できる
※グローバルタスクと呼ばれることもある。

カスタムタスク

カスタムタスクは特定のプロジェクトまたはワークスペースに関連づけられた
タスクのこと。

特定のプロジェクトでしか使わないタスクはこちらで定義する。

dockerコマンドをタスクに登録する

実際によく使うコマンドをVScodeのタスクに登録
してみる

ユーザータスクに登録

dockerコマンドをユーザータスクに登録する。
dockerを使わないプロジェクトの場合は、プロジェクトタスクで
十分かもしれないが、最近はほとんどDockerで開発環境を作るので
ユーザータスクに登録する。

実際にユーザータスクを登録していく

ユーザータスクを開くを選択

選択すると自動でtask.jsonがつくられる

Copy
{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [
        {
            "label": "echo",
            "type": "shell",
            "command": "echo Hello"
        }
    ]
}

一旦、このまま保存する。
ユーザータスクのため、このtask.jsonは

C:\Users\<user名>\AppData\Roaming\Code\User配下に作成される

dockerコマンドを定義する

デフォルトのechoタスクは不要なので消してしまっていい。
※もちろん残しておいてもいいが使わないと思う。

下記のように編集する。

Copy
{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "docker-compose-up",
            "type": "shell",
            "command": "docker-compose up -d",
            "problemMatcher": []
        },
        {
            "label": "docker-compose-down",
            "type": "shell",
            "command": "docker-compose down",
            "problemMatcher": []
        },
        {
            "label": "docker-ps",
            "type": "shell",
            "command": "docker ps",
            "problemMatcher": []
        }
    ]
}

下記の3つのコマンドをタスクとして登録する

• docker compose up -d
• docker compose down
• docker ps

problemMatcherはなくてもいいが、ないとタスク実行時に
スキャンするか聞かれて面倒なので空配列を設定しておく。

これで完了。

ユーザータスクを使う

登録したタスクを使ってみる。
F1でコマンドパレットを開いて

タスクの実行を選択

実行するタスクを選択する

ユーザータスクのものはユーザーと右についている

実行する

ターミナルでコマンドが実行される

Copy
*  実行するタスク: docker ps 

CONTAINER ID   IMAGE     COMMAND   CREATED   STATUS    PORTS     NAMES
 *  ターミナルはタスクで再利用されます、閉じるには任意のキーを押してください。

カスタムタスクに登録

最初のタスクの構成を選ぶ その後の流れは基本的に同じになる

ただカスタムタスクの場合は、プロジェクト内またはワークスペース
内でしか使えないタスクであるため
タスク作成を行うとプロジェクトルートに.vscode/task.jsonが作成される。

実行に関しても同様にできる
ただカスタムタスクの場合は、右側にユーザーと表示されない

タスクをキーボードショートカットで実行する

F1でコマンドパレット出して、タスク選択するのさえ
面倒な場合は、キーボードショートカットにタスクを
登録してしまえば、ショートカット実行させることもできる

左下の歯車からキーボードショートカットを選択する

keybindings.jsonを開いて下記のようにする

Copy
[
    // task実行
    {
        "key": "ctrl+shift+P",
        "command": "workbench.action.tasks.runTask",
        "args": "docker-ps",
    }
]

• keyで対応するキーボードを設定する
• commandで「workbench.action.tasks.runTask」にする
• argsは上記コマンドの引数で実行するタスクのlabelを設定する

これでctrl+shift+Pを押した時にタスクの「docker-ps」
が実行できるようになる。

まとめ

VScodeのタスク機能にDockerコマンドを定義してサクッと
実行する方法をまとめた。

VScodeのタスクはまだ色々できそうなので
また便利そうなのがあればまとめたい。