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

2022-09-21

やりたいこと

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

  • スクショ画像を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画面が切り替わりタスクが実行されている事がわかる。

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

設定項目の意味

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

ラベル 意味
label ユーザーインターフェースで使用されるタスクのラベル。
type タスクのタイプ。タスクのタイプ。カスタム・タスクの場合、shellまたはprocessのいずれかを指定します。shellが指定された場合、コマンドはシェル・コマンド(例:bash、cmd、PowerShell)として解釈されます。processが指定された場合、コマンドは実行されるプロセスとして解釈されます。
Command 実際に実行するコマンドです。
windows Windows固有のプロパティ。Windowsオペレーティング・システム上でコマンドを実行する場合、デフォルトのプロパティの代わりに使用されます。
group タスクがどのグループに属するかを定義します。この例では、testグループに属しています。testグループに属するタスクは、コマンドパレットから「Run Test Task」を実行することで実行できます。
presentation タスクの出力をユーザー インターフェースでどのように処理するかを定義します。この例では、出力を表示する統合ターミナルは常に公開され、タスク実行ごとに新しいターミナルが作成されます。
options cwd (現在の作業ディレクトリ)、 env (環境変数)、 shell (デフォルトのシェル) のデフォルトをオーバーライドする。オプションはタスクごとに設定できるが、グローバルに、あるいはプラットフォームごとに設定することもできる。ここで設定された環境変数は、タスクスクリプトやプロセスの中からしか参照できず、 args やコマンド、その他のタスク属性の一部である場合は解決されない。
runOptions タスクがいつ、どのように実行されるかを定義する。

コマンドの作成

コマンドを実際に書いてみました。 やってることは単純で、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の更新、記事の変換、全部載せという形でとりあえず3種類準備してみました。

{
    // 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から駄目だよって通知が来るので動かないようなものも解決かと。