tasks.jsonをコマンドパレットから作成する – 【VS Code】
Ctrl + Shift + pでコマンドパレットを開き、「tasks: configure task」とタイプします。
.vscode/tasks.jsonが作成されます。
tasks.json
{
"version": "2.0.0",
"tasks": [
{
"type": "npm",
"script": "install",
"group": "build",
"problemMatcher": [],
"label": "npm: install",
"detail": "install dependencies from package"
}
]
}
label
labelはタスクを一意に識別するために必須の名前項目です。単にタスクの名前として使われ、複数のタスクを区別できるようにする役割があります。例えば、labelがないとタスクを呼び出したり区別したりできません。
labelで指定した値は、launch.jsonのpreLaunchTaskの値として指定することが出来ます。
type
typeではタスクをどのように実行するかの種類を指定します。
npmやshell、processが指定できます。
{
"version": "2.0.0",
"tasks": [
{
"label": "echo",
"type": "shell",
"command": "echo Hello"
}
]
}
必須項目ですが、dependsOnが指定されている場合に、dependsOnで依存しているタスクにtype指定がされていればtypeを省略することができます。
group
groupでは、タスクをビルドやテストなどのグループに所属させたり、コマンドパレットの実行時にグループ単位でまとめられるための設定です。groupは省略可能です。
groupで指定できる代表的な値は文字列とオブジェクトがあります。
- “build”、”test”、”none”
- { “kind”: “build”|”test”, “isDefault”: true|false } の形式
isDefaultでtrueを指定することにより、そのグループ内に複数のタスクがある場合に「デフォルトとして扱うタスクかどうか」を指定することができます。
presentation
presentationでは、タスク実行時のターミナルや出力パネルの見え方や動作の制御を行うオプション設定です。presentationは省略可能です。
- reveal：ターミナルを表示するタイミングを指定。値は “always”（常に表示）, “silent”（エラー時のみ表示）, “never”（表示しない）などがある。
- focus：タスク実行後にターミナルにフォーカスを移すか（true/false）
- panel：ターミナルパネルの使い方。共有（”shared”）, タスクごと専用（”dedicated”）, 毎回新しいターミナル（”new”）
- clear：タスク開始前にターミナルをクリアするか
- close：終了時にターミナルを閉じるか
- echo：実行コマンドをターミナルに表示するか
{
"version": "2.0.0",
"tasks": [
{
"label": "test-always",
"type": "shell",
"command": "echo タスク1: reveal always",
"presentation": {
"reveal": "always"
}
}
]
}
dependsOn
dependsOnでは、タスクを実行する際に先に実行しておくべき依存タスクを指定します。dependsOnは省略可能です。
配列形式で複数のタスクラベルを指定でき、依存タスクが実行された後にメインタスクが実行される仕組みです。
problemMatcher
problemMatcherでは、タスクのコマンド実行結果の出力内容を解析して、エラーや警告などの「問題」をVS Codeの問題パネルやエディタ上に表示するための仕組みです。problemMatcherは省略可能です。
problemMatcherで指定できる代表的な値は文字列と配列とオブジェクトがあります。
- “$tsc”
- [“$tsc”]
- “problemMatcher”: {“owner”: “custom”,”pattern”: { … }}の形式
- $tsc・・・TypeScriptの公式コンパイラ(tsc)の出力エラーと警告を解析します。
- $tslint・・・TSLintの警告やエラーを検出するためのマッチャーです。
- $tsc-watch・・・TypeScriptの公式コンパイラ(tsc)のウォッチモード（–watch）で出力されるエラーや警告を問題パネルに自動で表示します。
- $eslint-stylish・・・ESLintのデフォルトスタイル出力用のマッチャーです。
- $lessCompile・・・Lessコンパイル時のエラーメッセージを解析します。
- $gulp-tsc・・・Gulpを使ったTypeScriptコンパイル用のマッチャーです。
- $msCompile・・・Microsoft Visual Studioのコンパイル出力を解析します。
- $java・・・Javaコンパイラ出力用のマッチャーです。
- $jshint・・・JSHintのコンパイルエラーや警告用マッチャーです。
- $go・・・Go言語のbuildやtest関連エラー検出用マッチャーです。
拡張機能を使えば定義済みMatcherを追加することが可能です。
esbuild Problem Matchersをインストールすると、$esbuild-watchが使えるようになります。
この拡張機能はesbuildのウォッチモード（–watch）用に問題マッチングを提供し、esbuildのビルドエラーや警告をVS Codeの問題パネルに表示可能にします。
isBackground
isBackgroundでは、タスクを「バックグラウンド実行」させるかどうかを指定します。trueに設定すると、タスクはバックグラウンドプロセスとして動作し、継続的に実行されたままになります。isBackgroundは省略可能です。
バックグラウンドタスクにする場合は、併せてproblemMatcherを設定し、どのログ出力時に「起動中」とみなすか（beginsPattern）、どのログで「完了」とみなしてバックグラウンド状態に移行するか（endsPattern）を正規表現で指定する必要があります。
これによりVS Codeはタスクの状態を正しく認識できます。
※$tsc-watch、拡張機能の$esbuild-watchはbackground情報を含むためproblemMatcherで指定が可能
beginsPattern、endsPatternを指定する例
(activeOnStart: trueでタスク開始直後からバックグラウンドとして動作中と見なす)
{
"version": "2.0.0",
"tasks": [
{
"label": "my-watch-task",
"type": "shell",
"command": "npm run watch",
"isBackground": true,
"problemMatcher": {
"owner": "custom",
"pattern": {
"regexp": "^$"
},
"background": {
"activeOnStart": true,
"beginsPattern": "^Starting watch mode...$",
"endsPattern": "^Compilation complete.$"
}
}
}
]
}
KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80～120万から受け付けております^^
得意技はJS(ES20xx),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^
