2014年4月16日水曜日

angular-seed プロジェクトを WebStorm でデバッグする


このエントリーをはてなブックマークに追加
まだよくわかっていないので作業ログのような感じです。
結局のところ index.html を右クリックして Debug index.html しているだけですが、これで良いのかどうか。
※ Chrome 用の Plugin は事前に入れておきます。
  1. angular-seed フォルダ下で npm install を実行
  2. WebStorm で "New Project from Existing Files" を選択
  3. 一番下のオプション Source files are in a local directory, no Web server is yet configured. を選択(ここよくわかってないです。。。)
  4. angular-seed のフォルダ選択して Project Root ボタンを押す。
  5. Finish。
  6. とりあえず filters.js の関数内にブレイクポイントを設置
  7. index.html を右クリックして Debug index.html を選択
  8. view2 をクリックすると、ちゃんと止まる

2014年4月5日土曜日

CreateProcess error=193 : WebStorm で TypeScript の環境構築


このエントリーをはてなブックマークに追加
TypeScript 用の File Watcher を加えて Programs に node.js の tsc を指定したところ

An exception occurred while executing watcher...
CreateProcess error=193

というエラーで tsc の実行に失敗しました。
下記参考サイトによると、CreateProcess という関数は exe しか呼べないため、exe 以外を起動しようとするとエラーが出るそうです。

参考 : Setting up a LESS file watcher in PHPStorm 6 using node.js on Windows?

解決方法

1. Microsoft SDK の tsc.exe を使う
Programs に
C:\Program Files (x86)\Microsoft SDKs\TypeScript\tsc.exe
を指定すると、問題なく .ts ファイルから .js ファイルが作成されました。
Visual Studio の TypeScript をプラグインを使っている場合は、この辺りに tsc.exe があるのだと思います。

2. Node.js を使う方法
最初は 1 の方法に気づかず、こちらを行っていました。
Setting の File Watchers の項目(Ctrl + Shift + A で検索窓を出し、File Watcher と入力すると速いです)、の File Watcher 一覧から TypeScript を選び

Program を
C:\nodejs\node.exe
に、
Arguments を
C:\Users\USERNAME\AppData\Roaming\npm\node_modules\typescript\bin\tsc --sourcemap $FileName$
としました。
(USERNAME は自分のユーザ名に置換します。tsc のインストール先が異なる場合はその場所を設定します)


TypeScript が 1.0 になったのをきっかけに、また何か作ろうと思ってまずは環境設定を始めました。以前は VisutalStudio を使っていましたが、AndroidStudio や PyCharm を使って IntelliJ のエディタに慣れてきたので、ついでに WebStorm を試してみようと思います。