前回の記事では、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]をクリックします。
サーバー起動方法
上記設定後にプロジェクトを新たに作成すると、Express 4が導入されます。
Express 4ではプロジェクトの構成が3とは異なり、「app.js」からのサーバー起動は行えません。
プロジェクト内の「bin」フォルダを展開し、「www」を右クリック後、[実行]→[Node Application]をクリックするとサーバーを起動できます。
Eclipseの環境設定
メニューバーより[Eclipse]→[環境設定]を開き、以下の項目を変更していきます。
一般
[エディター]→[テキスト・エディター]
[tab]キーを押した際、半角スペースを2つ入力するようにします。
- 表示されるタブ幅: 2
- タブでスペースを挿入: 有効
※この設定は汎用的なものであり、個別に設定されている言語（JavaScriptなど）はそれぞれ変更が必要です。
[キー]
Windows版のEclipseでは、コードを途中まで入力して[Ctrl] + [Space]を押すと、入力候補が表示されます。
Mac版のEclipseでも同じ機能はありますが、検索機能「Spotlight」とキーが重複しているため、キーの割り当てを変更する必要があります。
一覧より[コンテンツ・アシスト]を選択し、[バインディング]の内容を一度削除後、割り当てるキーを入力します。
上記例では[command] + [space]に設定しています。
※OS側の設定で、上記キーによる入力ソースの切替を無効にする必要があります。（システム環境設定→[キーボード]→[ショートカット]→[入力ソース]→[前の入力ソースを選択]）
[外観]
Eclipse全体の配色を変更できます。
黒背景の方が見やすい場合は、次の項目を変更します。
テーマ: ダーク
[外観]→[色とフォント]
[基本]→[テキスト・フォント]を選択して[編集]をクリック後、お好みのフォントとサイズを選択してパネルを閉じます。
おすすめは「Ricty Diminished」の 18ポイントです。
Ricty Diminishedのインストール方法は、下記記事内で紹介しています。
JavaScript
[エディター]→[コンテンツ・アシスト]
JavaScriptのコーディング中、「.」（ドット）を押した際に入力候補が表示されるようにします。
- 自動有効化を使用可能にする: 有効
- 自動有効化遅延: 100
[自動有効化遅延]は候補が表示されるまでの時間（ミリ秒）です。お好みで調整してください。
[コード・スタイル]→[フォーマッター]
[新規]をクリック後、[プロファイル名]に任意の名前（ここでは「Custom」）を入力して[OK]をクリックします。
[インデント]タブの下記項目を変更して[OK]をクリックします。
- タブ・ポリシー: スペースのみ
- インデント・サイズ: 2
- タブ・サイズ: 2
- 'switch' 本文内のステートメント: 有効
Nodeclipse
[Jade Editor]
テーマを「ダーク」に変更すると、Jade Editorのフォントが見づらくなってしまいます。
テンプレートエンジンとしてJadeを使用する場合は、フォントカラーを変更しておきます。
参考までに、私の設定値を記載します。
- ドキュメント色: ホワイト
- キーワード色: シアン
- 文字列色: ブラウン
- 数値色: ホワイト
- 標準テキスト色: ホワイト
まとめ
以上の設定で、Node.jsによるWeb開発が効率良く行えると思います。
今後更に必要な設定・プラグインがあれば追加していきます。