VSCodeのタスクでコマンドを簡単に実行する。

はじめに

今回はVSCodeでコマンド入力を楽に行う技を紹介します。

コマンドでスクリプトを動かすのは便利ですが、複数のコマンドを実行しないといけないとコマンドメモを別途控えておかないといけなかったりしますよね。
また、どのコマンドが何をするものかのコメントも必要になります。
さらに実行順序も大切です。

このタスク機能を活用すればそのような悩みが軽減します。

さっそくやってみる。

今回はPowerShellスクリプトを実行させます。
PowerShellがどんなものかについては以下の記事で紹介しています。
https://zenn.dev/articles/8e18e647c58fbc/edit

ワークスペース直下に以下のファイルをつくりましょう。

first.ps1

Write-Output "First Script Start"

second.ps1

Write-Output "Second Script Start"

third.ps1

Write-Output "Third Script Start"

通常はこれをコマンドプロンプトから実行するのですが、これをタスクとして登録し、GUIメニューから実行できるようにします。

ワークスペース直下に.vscodeフォルダをつくり、その中にtasks.jsonを新規作成して入れてください。

tasks.json

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "１番目のタスク",
            "type": "shell",
            "command": ".\\first.ps1"
        },
        {
            "label": "２番目のタスク",
            "type": "shell",
            "command": ".\\second.ps1"
        },
        {
            "label": "３番目のタスク",
            "type": "shell",
            "command": ".\\third.ps1"
        },
        {
            "label": "複合タスク",
            "type": "shell",
            "command": ".\\first.ps1; .\\second.ps1; .\\third.ps1"
        },
    ]
}

複合タスクのようにcommandをセミコロンで区切ると連続でスクリプトを実行できます。

この状態で、VSCodeのメニューから
Terminal > Run Task と選択してください。

そうするとこんなメニューが出ます。

tasks.jsonの入力されたタスクが表示されているのがわかると思います。
そこで、作ったタスク名を選択すると今度はこんなメニューが出ます。
基本的に一番上をそのまま選べばいいです。

補足すると、このメニューは、VSCode（またはCursor）でタスクを実行した際に、「どの種類のエラーや警告をスキャンするか」 を選択するものです。

Continue without scanning the task output
→ タスクの出力をスキャンせずに続行する（エラー解析をしない）

Never scan the task output for this task
→ このタスクの出力を今後スキャンしないように設定する

Never scan the task output for shell tasks
→ シェルタスク（bashやcmdのスクリプト実行）に対しては、今後出力をスキャンしない

Learn more about scanning the task output
→ タスク出力のスキャンについて詳しく学ぶ（ドキュメントへリンク）

ESLint compact problems ($eslint-compact)
→ ESLintのコンパクトな出力の問題をスキャンする（JSのコードチェック）

ESLint stylish problems ($eslint-stylish)
→ ESLintのスタイリッシュなフォーマットの問題をスキャンする

Go problems ($go)
→ Go言語のエラーをスキャンする

Gulp TSC Problems ($gulp-tsc)
→ Gulpを使ったTypeScriptのコンパイルエラーをスキャンする

JSHint problems ($jshint)
→ JSHint（JSコードチェックツール）のエラーをスキャンする

JSHint stylish problems ($jshint-stylish)
→ JSHintのスタイリッシュフォーマットのエラーをスキャンする

Lessc compiler ($lessc)
→ LESS（CSSのプリプロセッサ）のコンパイルエラーをスキャンする

Microsoft compiler problems ($msCompile)
→ Microsoftのコンパイラ（C#やC++など）のエラーをスキャンする

Node Sass Compiler ($node-sass)
→ Node.jsのSassコンパイラのエラーをスキャンする

nvcc
→ NVIDIAのCUDAコンパイラのエラーをスキャンする

TypeScript problems ($tsc)
→ TypeScriptのコンパイルエラーをスキャンする

TypeScript problems (watch mode) ($tsc-watch)
→ TypeScriptのウォッチモード（リアルタイムコンパイル）のエラーをスキャンする

タスク起動を簡単にするVSCodeの拡張を入れる

今の手順でも楽になっているのですが、Task Explorerという拡張を導入すると、サイドバーにタスクの一覧を表示し、ワンクリックで実行できるようになります。

インストール方法:
Ctrl + Shift + X で 拡張機能の検索 を開く。
「Task Explorer」を検索し、インストール。
「Task Explorer」 をサイドバーに追加し、タスク一覧を管理。

そしたら左サイドの下の方にこんなメニューが出るようになります。
そこから選ぶだけでコマンド実行できます。

実行すると、コマンドラインにスクリプトの結果が出力されていますね。

おわりに

いかがでしょうか。
フロントエンドとバックエンドでリポジトリを分けている場合など、これを活用すればブランチの切り替えなども圧倒的に楽になります。
Dockerのようにdependで前のタスクを待ったりもできます。
色々試してみてください。

株式会社ONE WEDGE

【Serverlessで世の中をもっと楽しく】 ONE WEDGEはServerlessシステム開発を中核技術としてWeb系システム開発、AWS/GCPを利用した業務システム・サービス開発、PWAを用いたモバイル開発、Alexaスキル開発など、元気と技術力を武器にお客様に真摯に向き合う価値創造企業です。
https://onewedge.co.jp