S.F. Blog:JavaScript intellisense拡張を学ぶ（１）

はじめに

intelllisense拡張をいじるにあたり、勉強したことを何回かに分けて書いていくことにする。

準備

VS2013 Express For WebにあらかじめWeb Essentials for Visual Studioをインストールしておく。
テストファイルを格納するためのフォルダを作る。ここでは test2としておく。
VS2013 Express For Webの「ファイル」→「Webサイトを開く」→「ファイルシステム」とクリックし作成したtest2フォルダを指定してソリューションを作成する。
test2フォルダ内にScriptsディレクトリを作り、_reference.jsを配置する。これはWeb Essentialsをインストールしていればプロジェクトを右クリックし、「追加」→「_reference.js intellisense file」で追加できる。
追加された_reference.jsを開くと以下<autosync>ディレクティブがtrueに設定されている。
追加されたScriptsディレクトリにtest.jsを作成する。すると<autosync>ディレクティブにより///<reference path="test.js" />が_reference.jsに追加される。
さらにScriptsディレクトリにtest.intellisense.jsを追加する。するとVS2013によってtest.jsのintellisense拡張であると認識され、ソリューションエクスプローラー上では以下のように表示される。

test.jsを読み込むHTMLファイルを作成する。ここではtest.htmlとする。

<!DOCTYPE HTML>
<html>
<head>
<title>タイトル</title>
<script type="text/javascript" src="Scripts/test.js"></script>
</head>
<body>
</body>
</html>

test.jsの中身を適当に書いて保存する。

(function (w) {
w.test = {
double : function (num) {
return num  2;
}
};
})(window);

Intellisense拡張版 Hello World

test.intellisense.jsに以下の記述を追加する。
intellisense.logMessage('Hello World!!');

test.htmlファイルでtest.js中のオブジェクトをintellisenseで表示させると「JavaScript言語サービス」出力ウィンドウに「Hellow World!!」が表示される。ここで使用したintellisenseオブジェクトはデザイン時のさまざまなintellisense操作をカスタマイズするために用意されたビルトインオブジェクトである。

次回からintellisenseオブジェクトが持つメソッド・プロパティの動作を確かめていく。

補足：コメントの書き方について

通常関数の機能などのコメントをfunction()のすぐ上の行に書けばそれが候補表示の際に表示される。

(function (w) {
  w.test = {
　　 // このメソッドは入力値を2倍にして返す。
　　 double: function (num) {
      return num  2;
    }
  };
})(window);

上のコードのdoubleをコード補完表示した結果は下のとおりである。

関数の詳細な説明をintellisense表示したいときは「XML Document Comment」を使用する。

(function (w) {
  w.test = {
    double: function (num) {
    /// <summary>このメソッドは入力値を2倍にして返す。</summary>
    /// <param name="num" type="Number">数</param>
    /// <returns type="Number">numを2倍した数</returns>
      return num * 2;
    }
  };
})(window);

intellisenseで候補表示させたのが下のスクリーンショットである。