読者です 読者をやめる 読者になる 読者になる

STDIO

システム開発やフクロウ、節約などの情報をI/Oするためのブログ

【Node.js】Eclipseの設定(Nodeclipse + Express 4)

Eclipse Node.js設定

前回の記事では、EclipseにNode.js用プラグイン「Nodeclipse」を導入し、Expressのプロジェクト作成と実行ができる環境を構築しました。

しかし、本格的な開発を行うためには、まだ設定が不十分です。

今回はNode.js + ExpressでWebアプリを効率良く開発するために必要な、Eclipseの設定をまとめました。

※現在Node.jsの学習中のため、当記事の内容は今後追加・変更する可能性があります。

環境

  • モデル: MacBook Pro 15インチ(Mid 2015)
  • OS: macOS Sierra 10.12.1
  • Homebrew: 1.1.1
  • Java(JDK): 1.8.0_112
  • nodebrew: 0.9.6
  • Node.js: v6.9.1(現時点のLTS・長期サポート版)
  • Eclipse: Java EE IDE for Web Developers(Neon、4.6.1)
  • Nodeclipse: 1.0.2

環境構築がお済みでない方は、以下の記事をご覧いただければと思います。

Express 4の導入

現時点のNodeclipseでプロジェクトを作成すると、古いバージョンのExpress 3.2.6が導入されます。

Express 4を使用する場合は、Expressプロジェクトを生成する「express-generator」の最新版をインストールし、Eclipseに設定します。

express-generatorのインストール

ターミナルで次のコマンドを実行します。

$ npm install -g express-generator
/Users/stdio/.nodebrew/node/v6.9.1/bin/express -> /Users/stdio/.nodebrew/node/v6.9.1/lib/node_modules/express-generator/bin/express
/Users/stdio/.nodebrew/node/v6.9.1/lib
└─┬ express-generator@4.14.0 
  ├─┬ commander@2.9.0 
  │ └── graceful-readlink@1.0.1 
  ├─┬ mkdirp@0.5.1 
  │ └── minimist@0.0.8 
  └── sorted-object@2.0.0

インストールされた「express」コマンドのパスを確認し、コピーしておきます。

$ which express
/Users/stdio/.nodebrew/current/bin/express

Nodeclipseの設定

メニューバーより[Eclipse]→[環境設定]→[Nodeclipse]を開き、[Express path]に先ほどコピーしたExpressコマンドのパスを貼り付け、[OK]をクリックします。

Eclipse Express設定

サーバー起動方法

上記設定後にプロジェクトを新たに作成すると、Express 4が導入されます。

Express 4ではプロジェクトの構成が3とは異なり、「app.js」からのサーバー起動は行えません。

プロジェクト内の「bin」フォルダを展開し、「www」を右クリック後、[実行]→[Node Application]をクリックするとサーバーを起動できます。

Eclipse Express 4 サーバー起動

Eclipseの環境設定

メニューバーより[Eclipse]→[環境設定]を開き、以下の項目を変更していきます。

一般

[エディター]→[テキスト・エディター]

[tab]キーを押した際、半角スペースを2つ入力するようにします。

  • 表示されるタブ幅: 2
  • タブでスペースを挿入: 有効

※この設定は汎用的なものであり、個別に設定されている言語(JavaScriptなど)はそれぞれ変更が必要です。

[キー]

Windows版のEclipseでは、コードを途中まで入力して[Ctrl] + [Space]を押すと、入力候補が表示されます。

Mac版のEclipseでも同じ機能はありますが、検索機能「Spotlight」とキーが重複しているため、キーの割り当てを変更する必要があります。

一覧より[コンテンツ・アシスト]を選択し、[バインディング]の内容を一度削除後、割り当てるキーを入力します。

Eclipse キー設定 コンテンツ・アシスト

上記例では[command] + [space]に設定しています。

※OS側の設定で、上記キーによる入力ソースの切替を無効にする必要があります。(システム環境設定→[キーボード]→[ショートカット]→[入力ソース]→[前の入力ソースを選択])

[コンテンツ・タイプ]

テンプレートエンジン「EJS」のファイルをHTMLに関連付けすることで、HTMLタグのシンタックスハイライトや入力補完が有効になります。

※EJS独自のタグ(<% 〜 %>)には未対応です。

[コンテンツ・タイプ]の一覧より、[テキスト]→[HTML]を選択し、[追加]をクリックします。

Eclipse コンテンツ・タイプ追加 EJS

表示されたダイアログの[コンテンツ・タイプ]に「*.ejs」と入力して[OK]をクリックします。

上記設定後にEJSファイルを開くと、次のように色分けされて表示されます。

Eclipse EJS表示

[外観]

Eclipse全体の配色を変更できます。

黒背景の方が見やすい場合は、次の項目を変更します。

テーマ: ダーク

[外観]→[色とフォント]

[基本]→[テキスト・フォント]を選択して[編集]をクリック後、お好みのフォントとサイズを選択してパネルを閉じます。

おすすめは「Ricty Diminished」の 18ポイントです。

Ricty Diminishedのインストール方法は、下記記事内で紹介しています。

JavaScript

[エディター]→[コンテンツ・アシスト]

JavaScriptのコーディング中、「.」(ドット)を押した際に入力候補が表示されるようにします。

  • 自動有効化を使用可能にする: 有効
  • 自動有効化遅延: 100

[自動有効化遅延]は候補が表示されるまでの時間(ミリ秒)です。お好みで調整してください。

[コード・スタイル]→[フォーマッター]

[新規]をクリック後、[プロファイル名]に任意の名前(ここでは「Custom」)を入力して[OK]をクリックします。

Eclipse JavaScript コードスタイル設定1

[インデント]タブの下記項目を変更して[OK]をクリックします。

  • タブ・ポリシー: スペースのみ
  • インデント・サイズ: 2
  • タブ・サイズ: 2
  • 'switch' 本文内のステートメント: 有効

Eclipse JavaScript コードスタイル設定2

Nodeclipse

[Jade Editor]

テーマを「ダーク」に変更すると、Jade Editorのフォントが見づらくなってしまいます。

テンプレートエンジンとしてJadeを使用する場合は、フォントカラーを変更しておきます。

参考までに、私の設定値を記載します。

  • ドキュメント色: ホワイト
  • キーワード色: シアン
  • 文字列色: ブラウン
  • 数値色: ホワイト
  • 標準テキスト色: ホワイト

まとめ

以上の設定で、Node.jsによるWeb開発が効率良く行えると思います。

今後更に必要な設定・プラグインがあれば追加していきます。

関連記事