VS Codeの機能紹介その８ (タスク)

VS Codeの使えそうな機能を何回かに分けて記事に整理していく。
今回は、タスク機能についてまとめ。

環境
タスクとは？
タスクの自動検知
カスタムタスクの定義
タスクの組み合わせ
タスクにショートカットキーを割り当てる
変数の参照
参考

環境

Windows 11 Home 23H2
Visual Studio Code 1.92

タスクとは？

VS Codeのタスク機能を使用すると、Lintやビルドのようなスクリプトやプロセスを、VS Code上からコマンド入力や追加コード無しで実行することができるようになる。

タスクを実行するには、以下のコマンドを実行する。

タスク実行…コマンドパレット(Ctrl+Shift+P) -> タスク: タスクの実行 (Tasks: Run Task)

タスクの自動検知

VS Codeには以下のツールから様々な処理をタスクとして自動検知する仕組みがある。

Gulp
Grunt
Jake
npm
Maven
C# dotnet

例. Vite(react-ts)のタスク
Viteを使用しReactのTypeScriptプロジェクトを作成すると、以下のようなpackage.jsonが自動生成される。

// package.json
{
  // ...
  "scripts": {
    "build": "tsc -b && vite build",
    "dev": "vite",
    "lint": "eslint .",
    "preview": "vite preview"
  },
  // ...
}

この時、コマンドパレット(Ctrl+Shift+P) -> タスク: タスクの実行 (Tasks: Run Task)の後、[実行するタスクの選択]でnpmを選択すると、package.jsonに定義したscriptから自動検知されたタスクが表示される。

カスタムタスクの定義

自動検知できないものや、自身で新しくタスクを作成したい場合は、以下のようにタスクの設定ファイルを作成し、カスタムタスクとして定義することができる。

コマンドパレット(Ctrl+Shift+P)
-> タスク: タスクの構成 (Tasks: Configure Task)
-> テンプレートからtasks.jsonを作成
-> [タスクテンプレートを選択]で任意のテンプレートを選択すると、テンプレートに基づいたタスクの設定ファイル(tasks.json)が作成、表示される。

自動検知されたタスクを変更したい場合は、タスクが表示されている状態で、[タスクの構成]アイコンをクリックすると、タスクの設定ファイルが作成、表示される。

タスクの設定ファイル(tasks.json)で使用するプロパティをまとめると、下表のようになる (よく使われそうなものだけ、青下線で示している)

プロパティ	説明
label	タスク名
type	コマンドの解釈の仕方 – shell: シェルコマンド – process: 実行プロセス – npm：npm …etc
command	実行するコマンド
args	コマンドの引数
dependsOn	前提タスクを定義する場合やタスクを組み合わせる場合に使用参照：タスクの組み合わせ
dependsOrder	前提タスクの実行順を定義 – parallel：並列実行 (デフォルト) – sequence：順次実行参照：タスクの組み合わせ
group	タスクが所属するグループ。コマンドパレットからは、グループごとにタスクを実行可能
options	以下のデフォルト設定を上書きできる。 – cwd (作業ディレクトリ) – env (環境変数) – shell
presentation	統合ターミナルの振る舞いを定義。使用頻度は低と予想。参照: Output behavior
runOptions	いつ、どのようにタスクを実行するかを定義。使用頻度は低と予想。参照: Run behavior
<OS名>	OS種別に応じた設定で上書きする。 – windows: Windows – linux: Linux – osx: macOS

例. tasks.jsonの例

// tasks.json
{
  "tasks": [
    // タスク名("label"): "dir"
    // 種別(type): "shell"で実行
    // 実行コマンド(command): "dir ${workspaceFolder}"
    // linuxの場合の実行コマンド(command): "ls ${workspaceFolder}"
    {
      "label": "dir",
      "type": "shell",
      "command": "dir ${workspaceFolder}",
      "linux": {
        "command": "ls ${workspaceFolder}"
      }
    },
    // ...
  ]
}

コマンドで空白や特殊文字を扱う場合、クオートやエスケープ文字を含める必要がある。

例. 空白を含むコマンドの引数をクオート

// tasks.json
{
  "tasks": [
    {
      "label": "dir",
      "type": "shell",
      "command": "dir 'folder with spaces'"
    },
    // ...
  ]
}

空白を含むコマンドの引数は、argsプロパティに指定しても良い。この場合、タスクはシングルクオート(”)を使用して実行する。

例. 空白を含むコマンドの引数をargsに指定

// tasks.json
{
  "tasks": [
    {
      "label": "dir",
      "type": "shell",
      "command": "dir",
      "args": ["folder with spaces"]
    },
    // ...
  ]
}

quotingプロパティを使用すると、どのように引数をクオートするかを制御することもできる。

例. 空白を含むコマンドの引数をargsに指定し、エスケープする

// tasks.json
{
  "tasks": [
    {
      "label": "dir",
      "type": "shell",
      "command": "dir",
      "args": [
        {
          "value": "folder with spaces",
          "quoting": "escape"
        }
      ]
    },
    // ...
  ]
}

タスクの組み合わせ

dependsOnプロパティを使用して、前提となるタスクを組み合わせることができる。dependsOnプロパティで組み合わせたタスクは、並列実行される。

例. dependsOnプロパティを使用した組み合わせタスクの例

// tasks.json
{
  "tasks": [
    {
      "label": "Client Build",
      // ...
    },
    {
      "label": "Server Build",
      // ...
    },
    // Client Buildタスクと、Server Buildタスクを組み合わせて、Buildタスクを作成する
    {
      "label": "Build",
      "dependsOn": ["Client Build", "Server Build"]
    }
  ]
}

並列ではなく順次実行したい場合は、dependsOrderプロパティで”sequence”を指定すると良い。この場合、タスクはdependsOn配列の要素順に実行される。

// tasks.json
{
  "tasks": [
    // ...
    // この場合、タスクの実行順は、
    //   Dep-1 -> Dep-2 -> Task
    // となる
    {
      "label": "Task",
      "type": "shell",
      "command": "echo Test dependsOrder",
      "dependsOn": ["Dep-1", "Dep-2"]
      "dependsOrder": "sequence",
    }
  ]
}

タスクにショートカットキーを割り当てる

タスク実行の頻度が高い場合、ショートカットキーを割り当てるのは効果的。
ショートカットキーの割り当てには、以下のように設定を変更する。

コマンドパレット(Ctrl+Shift+P) -> 基本設定: キーボードショートカットを開く (Preferences: Open Keyboard Shortcuts) で”workbench.action.tasks.runTask”を検索して設定

設定ファイルを直接編集するなら、以下。

コマンドパレット(Ctrl+Shift+P) -> 基本設定: キーボードショートカットを開く (Preferences: Open Keyboard Shortcuts (JSON))

// keybindings.json
{
  "key": "<ショートカットキー>",
  "command": "workbench.action.tasks.runTask",
  "args": "<タスク名>"
}

runTaskを含めて、以下のような項目にショートカットキーを割り当てることができるので、使いやすいように設定すると良い。

項目	説明
workbench.action.tasks.build	ビルドタスクの実行 (デフォルト: Ctrl+Shift+B)
workbench.action.tasks.configureDefaultBuildTask	既定のビルドタスクを構成する
workbench.action.tasks.configureDefaultTestTask	既定のテストタスクを構成する
workbench.action.tasks.configureTaskRunner	タスクの構成
workbench.action.tasks.manageAutomaticRunning	自動タスクの管理
workbench.action.tasks.openUserTasks	ユーザータスクを開く
workbench.action.tasks.openWorkspaceFileTasks	ワークスペースタスクを開く
workbench.action.tasks.reRunTask	最後のタスクを再実行
workbench.action.tasks.restartTask	実行中のタスクの再起動
workbench.action.tasks.runTask	タスクの実行
workbench.action.tasks.showLog	タスクログの表示
workbench.action.tasks.showTasks	実行中タスクの表示
workbench.action.tasks.terminate	タスクの終了
workbench.action.tasks.test	テストタスクの実行