Visual Studio Codeの使い勝手をよくするツール：特集：Visual Studio Code早分かりガイド（3/5 ページ）

» 2015年09月08日 05時00分公開

TypeScriptコードのコンパイル

　以下では自動生成されたtasks.jsonファイルの構成に少しだけ手を加えて、TypeScriptコードをコンパイルしてみよう。tasks.jsonファイルを以下に示す。

{
"version": "0.1.0",
"command": "tsc",
"isShellCommand": true,
"showOutput": "always",
"args": ["HelloWorld.ts"],
"problemMatcher": "$tsc"
}

tasks.jsonファイル（JSON）
showOutputプロパティを「always」に設定した。

　そして、以下のようなコードを書いたとする。

class Foo {
public static showMessage()
{
console.log("hello, world");
}
}

Foo.showMessage();

メッセージを表示するだけのプログラム（TypeScript）

　そして、「tsc」タスクを実行すると、いとも簡単にこれはJavaScriptにコンパイルされる。そこで、このコードをあえて間違えて記述してみよう。

class Foo {
public static showMessage()
{
console.log("hello, world");
}
}

Bar.showMessage();

バグ入りキケン？なコード（TypeScript）

　一目で分かるように、クラス名を間違えている。ここで、「tsc」タスクを実行すると、以下のように表示される。

コンパイルエラーが発生した
画面右側にはエラーメッセージが表示されるとともに、左下にはバツ印の隣に「1」と表示され（赤枠内）、エラーが発生したことが分かる。

　ここで注目したいのはステータスバーの左端だ。バツ印の隣に「1」と表示され、エラーが発生したことを示している。ここをクリックすると、以下のような画面になる。

エラー／警告メッセージの表示

　ここで表示された項目をクリックすることで、エラー発生行にジャンプできるのだ。このメッセージを解釈するために必要な仕組みが冒頭で述べたプロブレムマッチャーであり、そのおかげでコーディング→タスクによるコンパイル→コンパイルエラーが発生した行へのジャンプと修正がスムースに行えるようになっている。

　なお、「!」が表示された状態のコマンドパレットは［Shift］＋［Ctrl］＋［M］キー（OS Xでは［Shift］＋［Command］＋［M］キー）を押しても表示できる。キーボード派の方は覚えておこう。

Node.jsアプリでのタスクの利用例

　以下は前回作成したPhonebookプロジェクトにSassなスタイル指定を追加したところだ。ショボいサンプルに、ショボいスタイル指定なので、内容は問わずにいただければ幸いだ。

phonebook.scssファイル

　そして、このファイルをCSSファイルに変換するための処理をgulpとそのプラグインであるgulp-sassを利用して次のようなgulpfile.jsファイルを作成したとしよう*2（gulp-sassのサンプルをそのまま拝借したようなコードである）。

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('sass', function() {
gulp.src('./sass/**/*.scss')
.pipe(sass())
.pipe(gulp.dest('./public/stylesheets'));
});

.scssファイルを.cssファイルにgulpを使って変換（JavaScript）

　このようにして、プロジェクト内で定義したgulpタスクを、VS Codeは自動的にタスクとして判定してくれる。そのため、コマンドパレットから［Run Task］コマンドを実行すると、これまでに見てきたようなtasks.jsonファイルでのタスクランナーの構成を行っていなくとも、次のように、この処理が実行可能なタスクとして自動的に表示されるのだ。

gulpのタスクがコマンドパレットに表示される

*2　もちろん、gulpとgulp-sassのインストールなどは行っているが、ここではその手順は省略する。

　さらにこれを自動化するためにgulpfile.jsファイルに以下のgulpタスクを追加する。

gulp.task('watch', function () {
gulp.watch('./sass/**/*.scss', ['sass']);
});

ファイルの変更をウォッチして、.scssファイルが変更されたら、自動的に.cssファイルを作成（JavaScript）

　この場合には、tasks.jsonファイルでのタスクランナーの構成が必要になる（筆者が試したところ、VS Codeを実行しているOSによっては不要な場合もあるようだ）。ここでは以下のような構成とした*3。

{
"version": "0.1.0",
"command": "gulp",
"isShellCommand": true,
"tasks": [
    {
      "taskName": "watch",
      "showOutput": "always",
    }
]
}

VS Codeでgulpタスクを自動実行するための設定を追加したtasks.jsonファイル（JSON）

*3　本稿執筆時点（2015年9月4日）では、「CSS, Sass and Less」ページによるとtasksプロパティの構成で「isWatchingプロパティ」をtrueに設定するように説明されているが、これは不要なようである。

　このとき、taskNameプロパティの値を、ファイル変更を監視するgulpタスクと同じ名前にしておこう（この場合は「watch」）。そうすれば、コマンドパレットからこのタスクを実行することで、ファイルを変更したときには自動的にコンパイルが行われるようになる。なお、このようなタスクを実行中はステータスバーの左端にそのことを知らせるマークが表示される。