eclipse4.2でjQueryの補完機能を充実させる方法

eclipse

JavaScriptのソースをeclipseで開発されている方も多いのではないでしょうか。わたくしもJavaScriptの開発はeclipseでおこなっています。
ここ最近では、ピュアなJavaScriptではなく、JavaScript+jQueryでの開発の方が多くなってきました。
しかしeclipse4.2ではjQueryのコード補完(ctrl+スペースキーで出てくるアレ)がないので、別途プラグインを入れる必要があります。
今回はjQueryのコード補完「jsdt-jquery」のインストール方法をまとめました。

[スポンサーリンク]

この章でやること

eclipseにjsdt-jqueryを入れます。
jsdt-jqueryの初期設定を行います。

eclipseにjsdt-jqueryを入れる

eclipseの「ヘルプ」>「Eclipse マーケットプレース」を選択します。
検索窓に「jsdt-jquery」を入れて検索します。
jsdt-jquery-1

以下画面が表示されるので、インストールしていきます。
あとの画面は流れにまかせていけばOK!
jsdt-jquery-2

jsdt-jqueryの初期設定

jQueryのコード補完(ctrl+スペースキーで出てくるアレ)が出来るようにプロジェクトの設定をします。

まずはJavaScriptプロジェクトを作成します。
画面右クリック>新規>その他>JavaScriptプロジェクト

jsdt-jquery-3

JavaScriptプロジェクトを右クリックして設定画面を開いて、
JavaScript>インクルードパス>JavaScriptライブラリーの追加をクリックします。

jsdt-jquery-4

一番うえのjQuery Libraryを選択します。

jsdt-jquery-5

jQueryのバージョンを選びます。
残念ながら1.8までしか選択出来ません。(1.9はまだできないようですね。)

jsdt-jquery-6

元の設定画面に戻って、「jQuery 1.8 Library」が追加されていれば初期設定はOKです。

jsdt-jquery-7

jQueryの補完を使ってみる

出来た!
「ctrl+スペースキー」でjQueryの補完が出来るようになりました!

jsdt-jquery-9

さいごに

お疲れ様でした。
今までeclipseでjQueryは実装しにくかったのですが、jsdt-jqueryを入れてからは格段によくなったように感じます。
JavaScriptとjQueryのエディタ(eclipseプラグイン)は色々ありますが、わたしはこの方法がシンプルで一番好きです。

こうやってみるとeclipseってjavaやC++エンジニアだけのものではないように感じます。
JavaScriptやHTMLがメインのフロントエンジニアの方にもeclipseがもっと広まればよいなーと思います。