Three.js/Node.js-コード補完のあるエディタ。

Node.jsのコード書きは、今までと同じように手に馴染んだCodaを使っていたのだが、どうにもNode.jsのコード補完はやってくれなくて、フラストレーションが溜まっていた。
気がついたらエディタ探しを始めてしまっていた。


[Komodoエディタ]
前回エントリで紹介した、Eclipse IDE for JavaScript Web Developersも、元はといえば、このコード補完されない不満を解消すべく検索していた課程で見つけたものだ。
Eclipse+Node Debuggerではコード補完できず、引き続き探したところ、KomodoエディタでNode.jsが開発できるという記事を見つけた。
Using Komodo for Node.JS Coding
Node.js support in Komodo 7 Alpha 3
ただし有償のKomodo IDEのみであり、無償のKomodo Editの方には、Node.jsの開発項目は見当たらなかった。
Komodo Edit

Komodo EditにてNode.jsの項目は見当たらなかったが、プロジェクトフォルダー内にjsのソースファイルをおいておくとコード補完してくれる。これがとても便利。
残念ながら、ここでもNode.jsのライブラリーを入れてもコード補完はきちんと動作しなかった。
しかしながら、three.jsのsrcフォルダを突っ込んでおくと、しっかりとコード補完してくれる。
これまで、three.jsでもコード補完なしで作業を進めていたので、これだけでかなりの開発効率アップだ。
コード補完候補を出したい時はcommand+Jだ。これだけではなくctrl+K,ctrl+Gと続けてキーバインドするとファンクション定義部分へジャンプしてくれる。そしてcommand+マウスロールオーバーでファンクションの簡易説明になる。
これがドキュメントの少ないthree.jsには、とんでもなく使い勝手が良い。
もともとはNode.jsのためであったが、three.js開発では完全にKomodo Edit以外には考えられない状態となっている。

[VJET JavaScript IDE]
Komodo EditではNode.jsに使えなかったので、引き続き探してみると、VJET JavaScript IDEというEclipseのプラグインがあることを知る。
Eclipse Marketplaceにもある模様だが下記のガイドに沿ってインストールした。
VJET JavaScript IDE Installation Guide

インストール手順をガイド通り簡単に書いておく。
・Eclipseを起動し、Help > Install New Softwareを選択
・Addをクリックしロケーションに「http://www.ebayopensource.org/svn/vjet/tags/RELEASE/plugin/.」を入力、
 OKをクリック
・VJETのチェックボックスを押し、何回かnext、使用許諾をacceptする。
・プロンプトが再起動するか聞いてくるので、再起動をかける。
・リスタート後、VJETの機能を使えるようにするために、「VJET JS Perspective」へ画面をきりかえる。
・ Window -> Open Perspective -> Otherを選択
・ VJET JS を選択。
 これでVJETのJavaScript 開発環境がデフォルトとなる。

次にコード補完を有効にするためにNode.jsタイプライブラリを入れる。
Importing VJET JavaScript Type Libraries
Node.js以外にも、jQuery、Dojo、JSON、Canvasのタイプライブラリがある。
今回はNode.jsのみを入れたが、それ以外のもあると便利なものばかりなので後々で使ってみるつもりだ。

これもインポートガイドに沿い手順を書いておく。
・まずは、こちらで
 VJET JavaScript Type Libraries (As Eclipse Projects)
 Node.jsのタイプライブラリをダウンロードし、適当なフォルダに置いておく。
・EclipseのFile > Importを選択。
・General > Existing Projects Into Workspaceを選択
・NEXTボタンを押す。
・Select archive fileラジオボタンを選択。Browseを押し、
 先ほどダウンロードしたタイプライブラリの圧縮ファイルを選択
・Finishを選択すると、ExplorerにType Libraryが現れる。

ココまで来ると次はビルドパスを更新しなければならない。
・コード補完したいプロジェクトを右クリックし、Build Path -> Configure Build Pathを選択
・ProjectsタブからAddを押しタイプライブラリのチェックボックスの選択。
・OKし、これでタイプライブラリにビルドパスが通ったことになる。

以上でコード補完が効くようになる。例えば
var server = http.
とすると、選択項目が現れる。
またcontrol+spaceしても選択項目が現れる。
この選択項目にNode.jsのファンクションが含まれているはずだ。

これで、Node.jsもthree.jsもコード補完できる環境が整った。
ただ、Komodoエディタの方がしっくりとくるので、Node.jsもこっちで使いたい気にどんどんなってくる。
そうするとKomodo IDEとなって有償になるので、今のところ検討だけはしておいている段階だ。

Submit a Comment

Spam Protection by WP-SpamFree