Visual Studio Codeの作業を通して外部ツールと統合する

Hello World

実行時に、出力パネルにテキストを表示する、単純な「Hello World」タスクから始めましょう。

タスクは、作業スペースtasks.jsonファイルで定義されています。そして、VS Codeは、一般的なタスク実行環境のためのテンプレートを持っています。 コマンド・パレット（Ctrl+Shift+P）で、あなたは、『Task』でフィルタリングすることができます。そして、さまざまなタスク関連コマンドを見ることができます。

タスクを選択する：タスク実行コマンドを設定し、そして、あなたは、タスク実行環境テンプレートのリストを見るでしょう。 外部コマンドを実行するタスクを作成するために、他を選択します。

あなたは、現在、次の内容とあなたの作業スペースの.vscodeフォルダのtasks.jsonファイルを見ているはずです。：

{
    "version": "0.1.0",
    "command": "echo",
    "isShellCommand": true,
    "args": ["Hello World"],
    "showOutput": "always"
}

この例では、私たちは、「Hello World」を引数として、echo shellコマンドを実際に実行するだけです。

タスクを実行することによって、エコー・タスクを検証します。： タスクを実行し、ドロップダウンからエコーを選択します。 出力パネルが、開き、そして、あなたは、テキストの「Hello World」を見るでしょう。

あなたは、tasks.json変数のインテリセンスを取得することができます。 そして、その値にカーソルを重ね、Ctrl + Spaceで高性能な補完をトリガーします。

ヒント：

あなたが、クイックオープン（Ctrl + P）でタスクを実行するには、「task」スペースとコマンド名を入力します。この場合、『task echo』

Output Window Behavior

時には、あなたは、タスクを実行するとき、出力ウィンドウの動作を制御する必要があります。 例えば、あなたが、問題があると考える場合、エディタ空間を最大にして、タスク出力だけを見たい場合があります。 この、showOutputコントロールのプロパティと有効な値は、以下の通りです。：

always－出力ウインドウは、常に前面に移動します。これは、省略時設定です。

never－ユーザーは、View %gt; Toggle Output command (Ctrl+Shift+U)を使用して、明示的に、出力ウインドウを前面に移動する必要があります。

silent－問題照合プログラムが、タスクに設定されていない場合、出力ウインドウは、前面にのみ表示されます。

echoCommand

command and tasks[]

tasks.jsonは、gulpようなタスク実行環境にすることができる単一のコマンド値をとります。 あるいは、gruntやコンパイラやリンターのようなコマンドラインツール、既定では、コマンドはタスクに表示されます。：タスク・ドロップダウンを実行します。

また、あなたは、異なる引数を渡すために、タスク配列に複数タスクを定義することができます。 あるいは、コマンドが実行されるとき、異なる設定を使用します。

ここに、echoコマンドに異なる引数を渡す簡単な例があります。：

{
    "version": "0.1.0",
    "command": "echo",
    "isShellCommand": true,
    "args": [],
    "showOutput": "always",
    "echoCommand": true,
    "suppressTaskName": true,
    "tasks": [
        { 
            "taskName": "hello",
            "args": ["Hello World"]
        },
        { 
            "taskName": "bye",
            "args": ["Good Bye"]
        }
    ]
}

次に、あなたがタスクを実行するとき：タスクを実行します。あなたは、現在、ドロップダウンに、helloとbyeの2つのタスクを見るでしょう。 私たちは、また、「echo hello Hello World」という結果を生じる既定のタスク名をコマンドに渡すことで、suppressTaskNameをtrueに設定しました。

showOutputのような、一部のtasks.jsonプロパティとsuppressTaskNameは、両方ともグローバルに設定することができます。 そして、その次に、特定のタスクで上書きされます。タスクのargsプロパティ値は、グローバル引数に追加されます。

また、タスクに特定のプロパティが、あります。役に立つプロパティの１つは、isBuildCommandが、trueに設定されている場合、タスクでタスクを実行します。： ビルドタスク（Ctrl + Shift + B）コマンドを実行します。

Running multiple commands

ワークスペースで異なるコマンドラインツールを実行したい場合は、どうすればいいのでしょうか？ tasks.jsonで複数タスクを定義することは、VS Codeでは、まだ完全にサポートされていません（#981を参照してください）。 あなたは、あなたのタスク・コマンドをシェルコマンドによって実行することで、この制限を回避することができます。（LinuxとMacではsh、Windowsではcmd）。

ここに、makeとlsの2つのタスクを追加する例があります。：

{
    "version": "0.1.0",
    "command": "sh",
    "args": ["-c"],
    "isShellCommand": true,
    "showOutput": "always",
    "suppressTaskName": true,
    "tasks": [
        {
            "taskName": "make",
            "args": ["make"]
        },
        {
            "taskName": "ls",
            "args": ["ls"]
        }
    ]
}

makeとlsの両方のタスクは、タスクに表示されます。：タスク実行ドロップダウン。

	  "command": "cmd",
	    "args": ["/C"]

Variable substitution

タスクの設定を編集するとき、一そろいのあらかじめ設定された一般的な変数を持つことは、多くの場合、役に立ちます。 VS Codeは、tasks.jsonファイルの文字列内の変数置換をサポートしています。そして、次の定義済み変数を持っています。：

• $ {workspaceRoot} VS Codeで開いたフォルダのパス
• ${workspaceRootFolderName} VSコードで開かれた斜線無し（/）のフォルダの名前
• ${file}現在開いているファイル
• $ {relativeFile} workspaceRootを基準とした現在開いているファイル
• ${fileBasename}現在開かれたファイルの元の名前
• ${fileDirname}現在開かれているファイルのディレクトリ名
• ${fileExtname}現在開かれているファイルの拡張子
• ${cwd}起動時のタスク実行環境の現在の作業ディレクトリ

また、あなたは、${env.Name}（${env.PATH}のような）を通して、環境変数を参照することができます。 環境変数名の大文字と小文字を一致させてください。たとえば、Windowsではenv.Pathです。

以下は、TypeScriptコンパイラに現在開かれたファイルを渡す設定の例です。

{
    "command": "tsc",
    "args": ["${file}"]
}

Operating System Specific Properties

タスク・システムは、OSに特定の定義している値（たとえば実行されたコマンド）をサポートしています。 そのためには、単純に、tasks.jsonファイルにOS特定のリテラルを配置します。そして、そのリテラルの中に、対応するプロパティを指定します。

下記は、コマンドとして実行可能なNode.jsを使用し、そして、WindowsとLinuxで、それぞれ扱われる例です：

{
    "version": "0.1.0",
    "windows": {
        "command": "C:\\Program Files\\nodejs\\node.exe"
    },
    "linux": {
        "command": "/usr/bin/node"
    }
}

有効な操作プロパティは、WindowsのためのWindows、Linuxのためのlinux、そして、Mac のためのosxです。 特定のスコープのOSで定義されるプロパティは、グローバルなスコープで定義されるプロパティを上書きします。

例えば、下記において、

{
    "version": "0.1.0",
    "showOutput": "never",
    "windows": {
        "showOutput": "always"
    }
}

実行されたタスクからの出力は、それが常に表示されるウィンドウを除いて、前面に移動されることはありません。

Examples of Tasks in Action

タスクの機能を強調するには、ここに、リンターやコンパイラのような、 外部ツールを統合するために、VS Codeが、タスクをどのように使用するについてのいくつかの例があります。

TypeScriptをJavaScriptにTranspilingする

MarkdownをHTMLにコンパイルする

LessとSassをCSSにTranspilingします

Autodetecting Gulp, Grunt and Jake Tasks

VS Codeは、Gulp、GruntとJakeファイル内から、タスクを自動検出することができます。 これは、追加の設定を必要としないタスクリストに、それらのタスクを追加します。 （あなたが、すぐに、問題一致機能を使用する必要がない限り）。

この例をより具体的に作成するのを助けために、この簡単なGulpファイルを使用しましょう。これは、2つのタスクを定義します。： ビルドとデバッグ。1つ目は、Monoのコンパイラを使用して、C#コードをコンパイルします。２つ目は、Monoのデバッガの下で、MyAppを開始します。

var gulp = require("gulp");

var program = "MyApp";
var port = 55555;

gulp.task('default', ['debug']);

gulp.task('build', function() {
    return gulp
        .src('./**/*.cs')
        .pipe(msc(['-fullpaths', '-debug', '-target:exe', '-out:' + program]));
});

gulp.task('debug', ['build'], function(done) {
    return mono.debug({ port: port, program: program}, done);
});

Ctrl+Shift+Pを押し、そして、その次に、Run Taskをタイプし、 続いて、Enterを押し、すべての利用できるタスクの一覧を表示します。1を選択し、Enterを入力すると、タスクが実行されるでしょう

備考

Gulp、GruntとJakeは、自動検出されます。 対応するファイル（たとえばgulpfile.js）が開かれたフォルダのルートに存在する場合だけ。

Processing Task Output with Problem Matchers

VS Codeは、問題照合プログラムでタスクから出力を処理することができます。そして、私たちが、『ボックス内で』その数を運びます.

• TypeScript：

  $tscは、出力ファイル名が、開かれたフォルダに相対的であることを前提とします。

• TypeScript Watch:

  $jshintは、watchモードで実行するとき、ファイル名が絶対パスとして報告されることを前提としています。

• JSHint：

  $jshintは、ファイル名が絶対パスとして報告されることを前提とします。

• JSHint Stylish:

  $jshintは、ファイル名が絶対パスとして伝えられることを前提とします。

• ESLint Compact:

  $eslint-compactは、出力ファイル名が、開かれたフォルダの相対パスであることを前提としています。

• ESLint Stylish:

  $eslint-stylishは、出力ファイル名が、開かれたフォルダの相対パスであることを前提としています。

• C#とVBコンパイラ：

  $mscompileは、ファイル名が絶対パスとして報告されることを前提としています。

• Less：

  $lessCompileは、ファイル名が絶対パスとして伝えられることを前提とします。

問題照合プログラムは、エディタのインライン、そして、問題パネルに、既知の警告やエラー文字列、そして、レポートするために、タスク出力テキストを走査します。 問題照合プログラムは、広範囲、あるいは、特定のタスク・エントリに設定することができます。

また、あなたは、私たちがすぐに説明する、あなた独自の問題照合プログラムを作成することができます。

Mapping Gulp, Grunt and Jake Output to Problem Matchers

あなたは、tasks.jsonファイルで作業を設定する必要があります。 （あなたの作業スペースの.vscodeフォルダの下に配置されています） あなたが、更に単純にタスクを実行したい場合、例えば、あなたは、報告された問題と一致させるために、 あるいは、タスクを使用して、ビルド・タスクを起動するために、 VS Code内で、それらを強調したいかもしれません。：ビルド・タスク・コマンド（Ctrl+Shift+B）を実行します。

あなたが、すでに、タスクを実行して、作業スペースの.vscodeフォルダの下に、tasks.jsonを持っていない場合： コマンド・パレット（Ctrl+Shift+P）からのタスク実行環境動作の設定は、 あなたに、以下の選択するための、一そろいのテンプレートを提供します。

この例のため、Gulpをリストから選択します。上記の例のような、gulpfile.jsを取得します。これは、このようなtasks.jsonファイルを生成します。：

// tasks.json形式に関するドキュメント

{
    // See http://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
// http://go.microsoft.com/fwlink/?LinkId=733558を参照してください。
// tasks.json形式に関するドキュメント

    "version": "0.1.0",
    "command": "gulp",
    "isShellCommand": true,
    "args": [
        "--no-color"
    ],
    "tasks": [
        {
            "taskName": "build",
            "args": [],
            "isBuildCommand": true,
            "isWatching": false,
            "problemMatcher": [
                "$lessCompile",
                "$tsc",
                "$jshint"
            ]
        }
    ]
}

私たちは、C#ファイルをコンパイルするためにMonoコンパイラを実行するので、 私たちは、コンパイラによって報告されるどんな問題でも発見するために、$msCompile問題照合プログラムを使用する必要があります。

problemMatcherプロパティは、それで、以下のようになります。：

            "problemMatcher": [
                "$msCompile"
            ]

このtasks.jsonについて、注意するいくつかの事：

1. 私たちが、シェルでgulpコマンドを実行したい場合、（VS Codeは、直接、それを実行します）それで、私たちは、isShellCommandを使用しました。
2. 私たちは、明示的に、タスク・プロパティを追加しました。それは、必要に応じて、gulpfile.jsにあるタスクを改良することができました。
3. 私たちは、出力を処理するために、問題一致機能$msCompileを定義しました。 －私たちが、Monoコンパイラを使用して、C#をコンパイルしている時から、組み込まれたそれは、mscとして、Microsoftコンパイラ・パターンを厳守して、動作します。
4. isWatchingプロパティは、falseに設定されます。それで、私たちは、ソースコード・ファイルの変更に対して、自動的に、ビルドを実行することはありません。

Defining a Problem Matcher

VS Codeは、ボックスに無関係に、最も一般的な問題一致機能のいくつかを運びます。しかしながら、外部に、多くのコンパイラとlintingツールがあります。 これらの全ては、エラーと警告の、それら独自のスタイルを作り出します。それでは、あなた独自の問題一致機能をどのように作成するかについてお話します。

私たちは、開発者がprintfをprinftとしてタイプミスしたhelloWorld.cプログラムを持っています。gccで、それをコンパイルすると、次に示す警告を生じます：

helloWorld.c:5:3: warning: implicit declaration of function ‘prinft’

私たちは、VS Code内の対応する問題を表示する、出力内のメッセージを捕えることができる、問題一致機能を作り出したいです。 問題一致機能は、大きく正規表現に依存しています。以下の項目では、あなたが、正規表現に精通していることを前提としています。

ヒント：

私たちは、正規表現を開発し、検証するために、RegEx101の遊び場が、本当に優れた方法であることを見つけました。

上記の警告（と、エラー）を捕まえる一致機能は、次のようになります。：

{
    // The problem is owned by the cpp language service.
    // 問題は、cpp言語サービスによって所有されています。
    "owner": "cpp",
    // The file name for reported problems is relative to the opened folder.
    // 報告された問題のファイル名は、開かれたフォルダへの相対パスです。
    "fileLocation": ["relative", "${workspaceRoot}"],
    // The actual pattern to match problems in the output.
    // 実際のパターンは、出力内の問題を一致させます。
    "pattern": {
        // The regular expression. Example to match: helloWorld.c:5:3: warning: implicit declaration of function ‘prinft’ [-Wimplicit-function-declaration]
        // 正規表現。一致する例：helloWorld.c：5：3：警告：関数'prinft' [-Wimplicit-function-declaration]の暗黙の宣言
        "regexp": "^(.*):(\\d+):(\\d+):\\s+(warning|error):\\s+(.*)$",
        // The first match group matches the file name which is relative.
        // 最初の一致グループは、相対パスであるファイル名を組み合わせます。
        "file": 1,
        // The second match group matches the line on which the problem occurred.
        // ２つ目の一致グループは、問題が発生した行と一致します。
        "line": 2,
        // The third match group matches the column at which the problem occurred.
        // 3つ目の一致グループは、問題が発生した列と一致します。
        "column": 3,
        // The fourth match group matches the problem's severity. Can be ignored. Then all problems are captured as errors.
        // 4つ目の一致グループは、問題の重大度と一致します。無視することができます。続いて、すべての問題は、エラーとして集められます。
        "severity": 4,
        // The fifth match group matches the message.
        // 5つ目の一致グループは、メッセージと一致します。
        "message": 5
    }
}

ファイル、行とメッセージ・プロパティが、必須であることに、ご注意ください。

ここに、実際のタスクの内容でラップされた、上記のコード（コメントは削除しました）と完成したtasks.jsonファイルがあります。：

{
    "version": "0.1.0",
    "command": "gcc",
    "args": ["-Wall", "helloWorld.c", "-o", "helloWorld"],
    "problemMatcher": {
        "owner": "cpp",
        "fileLocation": ["relative", "${workspaceRoot}"],
        "pattern": {
            "regexp": "^(.*):(\\d+):(\\d+):\\s+(warning|error):\\s+(.*)$",
            "file": 1,
            "line": 2,
            "column": 3,
            "severity": 4,
            "message": 5
        }
    }
}

VS Code内部で、それを実行し、問題のリストを取得するためにCtrl+Shift+Mを押すことは、あなたに、次に示す出力を与えます。：

パターンの中で使用できる、2つ以上のプロパティがあります。これらは以下の通りです：

• 位置

  問題の場所が、lineやline、columnやstartLine、startColumn、endLine、endColumnである場合、一般的な場所で一致するグループを使用することができます。

• endLine

  一致するグループは、問題の最終列にインデックスを付けます。最終行の値が、コンパイラによって提供されない場合、省略することができます。

• endColumn

  一致するグループは、問題の最終列にインデックスを付けます。最終列の値が、コンパイラによって提供されない場合、省略することができます。

• コード

  一致したグループは、問題のコードに索引を付けます。コード値が、コンパイラによって提供されない場合、省略することができます。

備考

機能性パターンは、少なくとも、ファイル、メッセージや行や場所に一致するグループを提供する必要があります。

Defining a Multi-Line Problem Matcher

いくつかのツールは、ソースファイル内の一部の行で問題を拡散します。 特に、stylish reportersが使用される場合、たとえば、ESLintです。; スタイリッシュ・モードでは、それは、このような出力を生成します。：

test.js
  1:0   error  Missing "use strict" statement                 strict
✖ 1 problems (1 errors, 0 warnings)

私達の問題一致機能は、行に基づいています。このように、私たちは、実際の問題の位置とメッセージとは異なる正規表現で、ファイル名（test.js）をキャプチャする必要があります。 （1:0エラー「使用しているstrict」ステートメントが見つかりません）。

これを行うために、私たちは、パターン・プロパティの問題パターンの配列を使用します。 この方法では、あなたは、あなたが一致することを望むそれぞれの行ごとに、パターンを定義します。

次の問題パターンは、スタイリッシュ・モードのESLintからの出力に一致します。－しかし、まだ、私たちが次に解決するための、1つの小さな問題があります。 下記のコードは、ファイル名を集めるための1つ目、そして、行、列、深刻性、メッセージとエラーコードを集める２つ目の正規表現を持っています。：

{
    "owner": "javascript",
    "fileLocation": ["relative", "${workspaceRoot}"],
    "pattern": [
        {
            "regexp": "^([^\\s].*)$",
            "file": 1
        },
        {
            "regexp": "^\\s+(\\d+):(\\d+)\\s+(error|warning|info)\\s+(.*)\\s\\s+(.*)$",
            "line": 1,
            "column": 2,
            "severity": 3,
            "message": 4,
            "code": 5
        }
    ]
}

もちろん、それは、それほど簡単なことではありません。 そして、１つ以上の問題が、リソースに存在する場合、このパターンは、動作しません。 例えば、ESLintから、次に示す出力を想像します：

test.js
  1:0   error  Missing "use strict" statement                 strict
  1:9   error  foo is defined but never used                  no-unused-vars
  2:5   error  x is defined but never used                    no-unused-vars
  2:11  error  Missing semicolon                              semi
  3:1   error  "bar" is not defined                           no-undef
  4:1   error  Newline required at end of file but not found  eol-last
✖ 6 problems (6 errors, 0 warnings)

パターンの最初の正規表現は、"test.js"、２つ目は、"1:0 error ..."を組み合わせます。 次の行「1:9のエラー...」が処理されます。しかし、最初の正規表現とは一致しません。そして、それで、問題は補足されません。

この作業を行うために、複数行のパターンの最後の正規表現は、繰り返しプロパティを指定することができます。 trueに設定されると、それは、出力で、正規表現の一致と同じくらい長く、 複数行の一致機能の最後のパターンを行に適用するように、タスク・システムに指示します。

すべての先程のパターンによって集められた情報は、最後のパターンとVS Codeの中に問題に変えられた集められた情報と結合されます。

ここに、ESLintのスタイリッシュ問題を完全に集めるための問題一致機能があります。：

{
    "owner": "javascript",
    "fileLocation": ["relative", "${workspaceRoot}"],
    "pattern": [
        {
            "regexp": "^([^\\s].*)$",
            "file": 1
        },
        {
            "regexp": "^\\s+(\\d+):(\\d+)\\s+(error|warning|info)\\s+(.*)\\s\\s+(.*)$",
            "line": 1,
            "column": 2,
            "severity": 3,
            "message": 4,
            "code": 5,
            "loop": true
        }
    ]
}

Next Steps

タスクです－維持し続けましょう...

• tasks.jsonスキーマー(原文リンク)－あなたは、完全なtasks.jsonスキーマーと説明を確認することができます。
• 進化した編集(原文リンク)－Lint、IntelliSense、Lightbulbs、PeekとDefinitionとGoなど
• 言語サポート(原文リンク)－VS Codeとコミュニティ拡張機能の両方を通じて追加した、私達のサポートされている開発言語について学びます。
• デバッグ(原文リンク)－VS Codeエディタで、直接、あなたのソース・コードをデバッグします。

Common Questions

Q:異なるコマンドを実行するために、複数のタスクを定義するには、どうすればよいですか？

A:tasks.jsonで複数タスクを定義することは、VS Codeでは、まだ完全にサポートされていません（#981を参照してください）。 あなたは、あなたのタスク・コマンドをシェルコマンドによって実行することで、この制限を回避することができます。（LinuxとMacではsh、Windowsではcmd）。

ここに、makeとlsの2つのタスクを追加する例があります。：

{
    "version": "0.1.0",
    "command": "sh",
    "args": ["-c"],
    "isShellCommand": true,
    "showOutput": "always",
    "suppressTaskName": true,
    "tasks": [
        {
            "taskName": "make",
            "args": ["make"]
        },
        {
            "taskName": "ls",
            "args": ["ls"]
        }
    ]
}

makeとlsの両方のタスクは、タスクに表示されます。：タスク実行ドロップダウン。

Windowsの場合：あなたは、cmdに、'/C'引数を渡す必要があります。そのため、タスクの引数は実行されます。

    "command": "cmd",
    "args": ["/C"]