home wiki.fukuchiharuki.me
Menu
Top/はじめてのAngular2/EclipseでTypeScript

vimでもいいのですが、やっぱりIDEがほしい。使い慣れたEclipseでTypeScriptな環境を作ることにしました。

TypEcs - TypeScript IDE for Eclipse†

Quick Startのとおりでインストールできる。普通にプラグインをインストールするやり方。

↑

NodeJSがインストールされていません†

an_error.png
An error occured during TypeScript engine initialization.
TypeScript runtime requires NodeJS that should be installed separately.
It seems NodeJS is not installed or is not available in system path.

NodeJSが見つからないからTypeScriptエンジンが初期化できないそうです。いやいや、まてまて、そんなはずはない。Hello Worldやったもん。nodeもnpmも動いてるはずだよ？

  • Macを使っています
  • nodebrewでnodeをインストールしました
↑

/usr/local/bin/nodeなら見つかった†

シンボリックリンクで /usr/local/bin/node を作ってあげるとエラーはでなくなった。PATH変数をみているのではどうやらなさそう。でもこのシンボリックリンクは気持ちが悪い。共有の場所からホームディレクトリへのシンボリックリンクはさすがにイヤ。

↑

/usr/local/bin/nodeを作る†

ホームディレクトリを直に書いてシンボリックリンクを張るのは気持ちが悪いので、環境変数を使ってホームディレクトリ下のnodeに橋渡しするスクリプトを書いて置いておくことにしました。なければ呼べないだけ。

  • /usr/local/bin/node 
    $HOME/.nodebrew/current/bin/node $@
↑

システムパスにnodebrewを追加する†

-- この方法では解決できていませんでした

Macのシステムパスを追加するには/etc/paths.d/にパスを書いたファイルを作成してあげればよいみたいです。

  • /etc/paths.d/node 
    ~/.nodebrew/current/bin

次のようにたどれます。

  • /etc/profile から /usr/libexec/path_helper を実行している
  • path_helperは /etc/paths.d/* を読み上げている
  • /etc/paths.d/node を追加する

この記事が教えてくれました。

↑

Validationを省く†

ううん、エラーがいっぱい出るよう。動くからいいんだけど、さすがに気になるのでエラーがでないようにします。

↑

node_modulesは見ない†

node_modulesはnpmでインストールされるものなのでここはみてくれなくてもいい。くれなくてもいいというか、ここでエラー出ちゃうのって＞＜

↑

Include Path†

  1. プロジェクトを右クリックして Properties を開く
  2. JavaScript > Include Path を選択
  3. Excluded: (None) を選択して Edit... をクリック
    include_path_1.png
  4. Exclusion patterns: の方の　Add... をクリック
    include_path_2.png
  5. Browse... をクリック
    include_path_3.png
  6. ファイル一覧から node_modules を選択して OK、OK、Finish をクリック
    include_path_4.png
  7. Excluded: node_modules/ の表示を確認
    include_path_5.png
↑

HTMLとJSON†

  1. メニューの Eclipse > 環境設定... をクリック
  2. Validation を選択
  3. HTML Syntax Validator のチェックを外す（Angular2の書き方だと必ず警告が出てダルいので）
  4. JSON Validator 行の ... をクリック
    json_1.png
  5. Add Exclude Group... をクリック
  6. Exclude Group を選択して Add Rule... をクリック
    json_2.png
  7. Folder or file name を選択して Next > をクリック
    json_3.png
  8. Browse Folder... をクリック
  9. 何も選択せずそのまま 開く をクリック（ここが謎のコツ）
    json_4.png
  10. node_modules を入力して Finish をクリック
    json_5.png
  11. Exclude Group に Folder: node_modules の表示を確認
    json_6.png