- 2013年4月23日 17:14
- Technology
- Comments: 0
- TrackBacks: 0
- Edit
こんにちは、沖です。
昨日書いた翻訳記事「WebStorm 6におけるTypeScriptのサポート」に対して、「非CUIユーザーのために「tscコンパイラへのパスをWebStormに提供する」方法を詳しく教えてほしい！」とコメントをいただきましたので、その方法を説明する記事を書きます。
私の環境は、以下の通りです。Macの人は、コマンドプロンプトをターミナルに置き換えるなどして読んでください。
- Windows 7 Professional 64bit
- IntelliJ IDEA 12.1.1
IntelliJ IDEAは、WebStormやPhpStormの上位版ですが、今回の内容は下位製品でも同じ手順でいけるはずです。
なお、WebStormには最初からFile Watchers機能が入っていますが、IntelliJ IDEAには入っていませんので、Settings -> Plugins -> Browse repositoriesからFile Watchersプラグインをインストールしておきます（もちろん無料です）。
さて、tscコンパイラにパスを通すには、以下の手順を行います。
- Node.jsをインストールする
- TypeScriptコンパイラ（tsc）をインストールする
- IntelliJ IDEAでTypeScriptファイルを作成する
- Edit Watcherダイアログでtscへのパスを通す
1つずつ具体的に解説していきましょう。
1.Node.jsをインストールする
TypeScriptコンパイラは、Node.jsのパッケージとして提供されています。そのため、まずNode.jsをインストールしておく必要があります（長くなってしまうので、ここではNode.jsとは何かは説明しません）。
Node.jsのサイトに行き、INSTALLボタンをクリックすると、自動的に環境に合わせたインストーラがダウンロードできますので、インストーラの指示に従ってインストールします。
完了したら、インストールができているかどうかを確認してみましょう。Windows+Rキーで「ファイル名を指定して実行」ダイアログを開き、「名前」フィールドにcmdと入力してOKボタンをクリックすると、コマンドプロンプトが起動します。
コマンドプロンプトでnode -vと入力してEnterキーを押すと、インストールされているNode.jsのバージョンが表示されます。これでNode.jsの準備はOKです。
2.TypeScriptコンパイラ（tsc）をインストールする
続いて、TypeScriptコンパイラをインストールします。そのままコマンドプロンプトでnpm install -g typescriptと入力してEnterキーを押します。
すると、自動的に文字列がズラズラと表示され、インストールが行われます。
再びコマンドを入力できる状態になったら、インストールは完了です。このとき、赤枠で囲った部分がTypeScriptコンパイラへのパスになりますので、どこかにコピーしておきましょう。
3.IntelliJ IDEAでTypeScriptファイルを作成する
適当なプロジェクトを作成し、プロジェクトペインのコンテキストメニューからNew -> TypeScript Fileで新しいTypeScriptファイルを作成します。
ファイル名を入力するダイアログが表示されますので、適当な名前を入力します。
4.Edit Watcherダイアログでtscへのパスを通す
作成されたTypeScriptファイルの編集画面に、緑色のバーが表示されます（表示されない場合は編集画面で適当なコードを入力してみてください）。これは、編集しているファイルがTypeScriptであることをIDEAが自動的に検出し、File Watcherを追加することを提案しています。
赤枠で囲っている「Add watcher」をクリックすると、Watcherの編集画面が表示されます。
初期状態では、「Program」の部分が空になっているはずです。File Watchers機能では、「File type」で指定したファイル（ここではTypeScriptファイル）を監視し、変更があった場合に自動的に「Program」のパスにあるプログラムを実行しますので、ここでTypeScriptコンパイラへのパスを指定します。
具体的には、手順2.でコピーしておいたTypeScriptコンパイラへのパスを貼り付けます。ただし、このパスはWindowsでは動作しないため、末尾に.cmdを入力します。
上記のダイアログの設定をまとめると、TypeScriptファイルを監視して、変更があった場合に所定の場所にあるtsc.cmdファイル（TypeScriptコンパイラ）を、--sourcemapオプションを付けて実行する、ということになります。
OKボタンを押して、TypeScriptファイルを編集すると、自動的にコンパイルが行われるようになります。
File Watchersの設定はプロジェクトごとになりますので、別のプロジェクトの時はまた新たにWatcherを追加する必要があります。
なお、私の環境で試した限りでは、過去に作ったWatcherの内容をIDEAが記憶しているようで、Programでのtsc.cmdへのパスなども初期状態で入力済みになっていたりしました。
それでは、良きTypeScriptライフを！
よろしければコメントをどうぞ！
匿名希望のコメントはこちらへ
Trackbacks:0
- TrackBack URL for this entry
- https://448.jp/cgi-bin/mt/bnq48cke.cgi/1442
- Listed below are links to weblogs that reference
- IntelliJ IDEAのFile Watchers機能でTypeScriptコンパイラ（tsc）にパスを通す方法 from 448.jp blog
