2022-09-21-VSCodeのTasks機能を使ってまとめてコマンドを実行しよう

やりたいこと

今このブログを更新するのにいくつか連続でコマンドを打ち込んでいるのですが地味に面倒である。 記事を更新するのにやっていることは、この５つのコマンドを連続で流している。

• スクショ画像をwebp形式に変換
• 記事内の画像リンクをFigureタグに変換
• git add *
• git commit
• git push

これらをひとまとめにして実行できるようにするのが今回の目的です。

VSCode Tasks

VSCodeにはコマンドを組み合わせて、新しいコマンドを作成するようなTasksという機能が備わっている。 今回はその機能を使います。

一次ソースもリンクしておきます。 Integrate with External Tools via Tasks

実行方法は簡単です。 Ctrl + P からコマンドパレットを開き、Tasks: Configure Taskを叩きます。

create tasks.json file from templateからサンプルファイルを作成します。

最後に、コマンドの種類にはOthers を選びます。

これで作成完了です。

template Tasks

実行すると作成されるTasks.jsonファイルです。

{
    // 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"
        }
    ]
}

Tasksを実行する

Ctrl + Pでコマンドパレットを開いて、Tasks: Run Taskを実行する。

次にテンプレートのlabelに書かれたコマンドがあるはずなのでクリックする。

実行したときの出力どうするかと聞かれるので、Continue without scanning the task outputを選択する。

TERMINAL画面が切り替わりタスクが実行されている事がわかる。

これでテンプレートタスクの実行は完了です。

設定項目の意味

公式の説明をクソミソ翻訳したものを置いときます。

コマンドの作成

コマンドを実際に書いてみました。 やってることは単純で、gitにAddしてCommitしてPushするだけです。 CommitメッセージもOKなどとして意識が低い。

{
    // 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 'ブログ更新処理'&& git add * && git commit -m 'ok' && git push "
        }
    ]
}

実行結果

早速動かしてみるとこんな感じです。いいですね。

ブログ更新処理
[main 76f4329] ok
 9 files changed, 108 insertions(+)
 create mode 100644 .vscode/tasks.json
 create mode 100644 "content/post/2022-09-21-VSCode\343\201\256Tasks\346\251\237\350\203\275\343\202\222\344\275\277\343\201\243\343\201\246\343\201\276\343\201\250\343\202\201\343\201\246\343\202\263\343\203\236\343\203\263\343\203\211\343\202\222\345\256\237\350\241\214\343\201\227\343\202\210\343\201\206.md"
 create mode 100644 content/post/2022-09-22-00-02-39.png
 create mode 100644 content/post/2022-09-22-00-26-02.png
 create mode 100644 content/post/2022-09-22-00-26-37.png
 create mode 100644 content/post/2022-09-22-00-28-41.png
 create mode 100644 content/post/2022-09-22-00-29-27.png
 create mode 100644 content/post/2022-09-22-00-29-46.png
 create mode 100644 content/post/2022-09-22-00-34-32.png
Enumerating objects: 17, done.
Counting objects: 100% (17/17), done.
Delta compression using up to 20 threads
Compressing objects: 100% (13/13), done.
Writing objects: 100% (14/14), 139.97 KiB | 27.99 MiB/s, done.
Total 14 (delta 3), reused 0 (delta 0), pack-reused 0
remote: Resolving deltas: 100% (3/3), completed with 3 local objects.
To https://github.com/kenpos/xxxxx.git
   8a7b9f7..76f4329  main -> main
 *  Terminal will be reused by tasks, press any key to close it. 

コマンドの追加

自前で用意したPythonのスクリプトと共に実行するようにしました。 Gitの更新、記事の変換、全部載せという形でとりあえず３種類準備してみました。

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [
        {
            "label": "git Action",
            "type": "shell",
            "command": "echo 'ブログ更新処理'&& hugo --environment production && git add * && git commit -m 'ok' && git push "
        },
        {
            "label": "Contents Convert",
            "type": "shell",
            "command": "python tools/imageResize.py && python tools/convert.py"
        },
        {
            "label": "All Command",
            "type": "shell",
            "command": "python tools/imageResize.py && python tools/convert.py && echo 'ブログ更新処理'&& hugo --environment production && git add * && git commit -m 'ok' && git push "
        }
    ]
}

まとめ

これでブログ投稿がワン・コマンドで完結するようになりました。 もししくってたらメールでGithub Actionから駄目だよって通知が来るので動かないようなものも解決かと。