Visual Studio CodeでJavaScript開発しよう - C#でプログラミングあれこれ

今日の記事は、Visual Studio / Visual Studio Code Advent Calendar 2015 11日目のエントリーです。
Visual Studio / Visual Studio Code Advent Calendar 2015 - Qiita

12月の9日時点で結構埋まってるのに11日だけ空いてたので、ちゃっかり登録しちゃいました。
去年はかなりタフなAdvent Calendarばかり書いちゃったので今回は軽い感じでいきます。

基本的に初学者に優しいブログを目指していますので技術的難易度は低めです。

で、最初に「Visual Studio CodeでJavaScript開発しよう」ってタイトルで書こうと決めて、この数日前に更新されたVS Code拡張のDebugger for Chromeを使ってgulpでbrowserify使ってsource mapsも使ってトランスパイルしたES6のJavaScriptをChrome上でデバッグするようなアツいネタを書こうと思ってました。

でも、ちょっと時期尚早でした。挫折しました。
いや、最近の動きから言うともしかしたらタイミングの問題だけなのかも知れません。
Advent Calendarのネタ的には当初の目論見はあきらめざるを得ない感じになっちゃいました。

とは言うもののNode.jsで動くちょっとしたコードなんかを手軽に試して手軽にデバッグすると言うような用途にはVS Codeは抜群に使えると思います。（トランスパイルしないか、トランスパイル後のコードをデバッグするのであれば）
またgulpとの連携も現時点で問題なく出来ているので、もう少し待てば上に書いたようなbrowerifyやbabelifyを駆使したような開発もいい感じになるんじゃないかと期待しています。

現時点であんまり情報が無かったVS Codeとgulpとの連携について書いておきます。

・ともかく作業フォルダを作る
・そのフォルダをVS Codeで開く
・そこにgulpfile.jsを作る（中身は後述）
・F1キーを押して、taskとか入れるとConfigure Task Runnerが出るのでそれを選びます。

・するとgulp用のtasks.jsonが出来上がるので、tasksにgulpタスクを追記する
・ctrl + shift + bでgulpタスクを実行します。

こんな感じ。

gulpfile.js

var gulp = require('gulp');
	
gulp.task('default', function() {
	console.log('Hello gulp world');
});

tasks.json

tasks.json
{
    "version": "0.1.0",
    "command": "gulp",
    "isShellCommand": true,
    "args": [
        "--no-color"
    ],
    "tasks": [
        {
            "taskName": "default",
            "isBuildCommand": true,
            "showOutput": "always"
        }        
    ]
}

色んな意味で変化の激しい領域なので、半年後ぐらいには相当変化してるだろうと思います。
そういう意味でもしばらく目が離せない状況が続くんではないでしょうか。

ま、これまた色んな意味で情報を追っかけるだけでも大変なんですけどね。

じゃんじゃんVS Code使っていきましょう！