IntelliJ IDEAのFile Watchers機能でTypeScriptコンパイラ(tsc)にパスを通す方法

こんにちは、沖です。

昨日書いた翻訳記事「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コンパイラにパスを通すには、以下の手順を行います。

  1. Node.jsをインストールする
  2. TypeScriptコンパイラ(tsc)をインストールする
  3. IntelliJ IDEAでTypeScriptファイルを作成する
  4. Edit Watcherダイアログでtscへのパスを通す

1つずつ具体的に解説していきましょう。

1.Node.jsをインストールする

TypeScriptコンパイラは、Node.jsのパッケージとして提供されています。そのため、まずNode.jsをインストールしておく必要があります(長くなってしまうので、ここではNode.jsとは何かは説明しません)。

Node.jsのサイトに行き、INSTALLボタンをクリックすると、自動的に環境に合わせたインストーラがダウンロードできますので、インストーラの指示に従ってインストールします。

node.js


完了したら、インストールができているかどうかを確認してみましょう。Windows+Rキーで「ファイル名を指定して実行」ダイアログを開き、「名前」フィールドにcmdと入力してOKボタンをクリックすると、コマンドプロンプトが起動します。

ss_2013423161829.png

コマンドプロンプトでnode -vと入力してEnterキーを押すと、インストールされているNode.jsのバージョンが表示されます。これでNode.jsの準備はOKです。

ss_2013423162114.png

2.TypeScriptコンパイラ(tsc)をインストールする

続いて、TypeScriptコンパイラをインストールします。そのままコマンドプロンプトでnpm install -g typescriptと入力してEnterキーを押します。

ss_201342316258.png

すると、自動的に文字列がズラズラと表示され、インストールが行われます。

ss_2013423162550.png

再びコマンドを入力できる状態になったら、インストールは完了です。このとき、赤枠で囲った部分がTypeScriptコンパイラへのパスになりますので、どこかにコピーしておきましょう。

3.IntelliJ IDEAでTypeScriptファイルを作成する

適当なプロジェクトを作成し、プロジェクトペインのコンテキストメニューからNew -> TypeScript Fileで新しいTypeScriptファイルを作成します。

ss_2013423164424.png

ファイル名を入力するダイアログが表示されますので、適当な名前を入力します。

ss_2013423164533.png

4.Edit Watcherダイアログでtscへのパスを通す

作成されたTypeScriptファイルの編集画面に、緑色のバーが表示されます(表示されない場合は編集画面で適当なコードを入力してみてください)。これは、編集しているファイルがTypeScriptであることをIDEAが自動的に検出し、File Watcherを追加することを提案しています。

ss_201342316470.png

赤枠で囲っている「Add watcher」をクリックすると、Watcherの編集画面が表示されます。

ss_2013423165515.png

初期状態では、「Program」の部分が空になっているはずです。File Watchers機能では、「File type」で指定したファイル(ここではTypeScriptファイル)を監視し、変更があった場合に自動的に「Program」のパスにあるプログラムを実行しますので、ここでTypeScriptコンパイラへのパスを指定します。

具体的には、手順2.でコピーしておいたTypeScriptコンパイラへのパスを貼り付けます。ただし、このパスはWindowsでは動作しないため、末尾に.cmdを入力します

上記のダイアログの設定をまとめると、TypeScriptファイルを監視して、変更があった場合に所定の場所にあるtsc.cmdファイル(TypeScriptコンパイラ)を、--sourcemapオプションを付けて実行する、ということになります。

OKボタンを押して、TypeScriptファイルを編集すると、自動的にコンパイルが行われるようになります。

ss_20134231792.png

File Watchersの設定はプロジェクトごとになりますので、別のプロジェクトの時はまた新たにWatcherを追加する必要があります。

なお、私の環境で試した限りでは、過去に作ったWatcherの内容をIDEAが記憶しているようで、Programでのtsc.cmdへのパスなども初期状態で入力済みになっていたりしました。

それでは、良きTypeScriptライフを!

よろしければコメントをどうぞ!

匿名希望のコメントはこちらへ

Comment Form

Trackbacks:0

TrackBack URL for this entry
http://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

この記事はいかがでしたか?

ぜひ共有してみてください。あなたのフィードバックが、私のモチベーションにつながります。

×