Phpstorm(Webstorm)でCoffeeScriptを書くときの設定

Phpstorm(Webstorm)でCoffeeScriptを書くときの設定をまとめてみました。

やりたいことは、CoffeeScript書く→自動でコンパイル→任意の場所に書き出しという流れです。

以前は、この記事を参考にして設定すると出来ていた気がするのですが、今回別PC(mac)で設定するとダメだったので、別の設定方法を調べました。

1. node.jsをインストール

まずはかきのサイトからnode.jsをダンロードして、インストールします。

http://nodejs.org/

インストールが終わったら、下記のコマンドをターミナルに打って、インストールが出来ているか確認します。

$ node -v

2. CoffeeScriptをインストール

次にnpmでCoffeeScriptをインストールします。
npmはnode.jsのパッケージ管理ツールで、node.jsと一緒にインストールされています。

インストール方法は、ターミナルに下記のコマンドを入力するだけです。
コマンドを入力するとパスワードを求められるので、PCの管理者パスワードを入力してEnterキーを押して下さい。

$ sudo npm install -g coffee-script

インストールが終わったら、下記のコマンドをターミナルに打って、インストールが出来ているか確認します。

$ coffee -v

3. Phpstorm(Webstorm)の設定

最後にPhpstorm(Webstorm)の設定を行います。

まず、プロジェクトを作成して、coffeeファルダ内にCoffeeScriptファイルを作成します。
構成は、coffeeフォルダにcoffeeScriptファイル、jsフォルダにはコンパイルされたJavaScriptファイルが出力されるように設定します。

つぎに、File Watchersを使って監視・コンパイルを自動化する設定を行います。
Preferences -> File Watchersを開き、+をクリックしてCoffeeScriptを選択します。設定画面が表示されるので、各項目を入力します。内容は下記の通りです。

Scope : Project Files
Program : /usr/local/bin/coffee
Arguments : ––output $FileParentDir$/js/ ––map ––compile $FileName$
Working directory : $FileDir$
Environment variables : 空
Output paths to refresh : $FileParentDir$/js/$FileNameWithoutExtension$.js:$FileParentDir$/js/$FileNameWithoutExtension$.map

後はcoffeeファルダ内のCoffeeScriptファイルに下記のコードを記述して保存すると、自動でjsフォルダ内にjsが出力されていると思います。

test = () -> console.log "hello world"
test();

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Post Navigation