Brackets 用 JavaScript コードヒントの新プロジェクト Adobe から公開

Brackets の Sprint 21 から JavaScript のコードヒントが追加されています。今度は、さらに、型情報を理解するコードヒント機能が実装されるようです。

この機能は、現在、独立したプロジェクトとして GitHub に公開されていて、Sprint 24 公開のタイミングで、オリジナルの Brackets に組み込まれる予定だそうです。

なので、まだちゃんと動かない箇所もありそうですが、興味のある方は、以下の様にしてお試しできます。

  1. コードヒント機能のリポジトリをブラウザで開く
  2. js-code-intelligence ブランチをクローン
  3. SHIFT キーを押しながら Brackets Sprint 22 を起動
  4. ダイアログが表示されたらクローンしたフォルダ内の src/index.html を選択

これで、新しいコードヒント機能を先行して体験できます。すでに結構使える印象です。

型情報の見つけ方

JavaScript の変数の型をどうやって判別しているか、その説明が公開されていましたので、以下、いくつかの例をご紹介します。 (さすがに全ての変数の型が編集時に分かる訳では無いようで)

まず、代入文を解析することによって判別できる例です。

function getLabel() {
    var label = "文字列";
    return label;
}
 
var s = getLabel(); // s の型を String として扱う

次は、.prototype に対する操作を適用する例です。

function Product() {};
Product.prototype.clone = function() {};
 
var p = new Product();
p.  // この時点では clone() をコードヒントに追加

非同期にモジュールを読み込むフレームワークを使用している場合 (例:RecqireJS) には、読み込んだモジュール内に定義されている API をヒントとして表示します。

var module = require("someModule");
module. // 読み込んだメンバーをヒントとして表示

更に、JSDoc のコメント内にからも型情報を入手できます。

/**
 * 2つの数の和を計算
 * @param {number} a
 * @param {number} b
 * @return {number} 
*/
function sum(a, b) {}

その他、Node.JS や特定のブラウザ等、実行環境に API が事前に定義されているものも利用可能となっています。

ということで、今後の Brackets では、プロパティの記述やメソッドの呼び出しなどで、より充実したコードヒントが利用できるようになりそうです。

また、コードヒントを含む JavaScript コードの解析に関しては、Tern.JS をベースにしたいという考えがあるようで、このプロジェクトに対するアドビからの貢献も行われているようです。

 

トラックバック(0)

トラックバックURL: http://cuaoar.jp/mt4/mt-tb.cgi/423

コメントする

2014年1月

Sun Mon Tue Wed Thu Fri Sat
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31  
レンタルサーバー

月別 アーカイブ

Powered by Movable Type 4.261