EmacsでCoffeeScriptの変換結果をリアルタイムに確認する

こんにちは。SNSのプロフィール写真にアホ毛はえてる福山です。

CoffeeScriptの練習環境をEmacsで整えてみました。

ほぼリアルタイムで自分の書いたcoffeeコードがどのようにjsとして展開されるのかがわかります。

node,npm,coffee-script,coffee-mode.elの準備が終わっていることを前提に進めます。

init.elに記述

Emacsの設定ファイルに以下を記述します。

;; coffee-modeを読み込む
(require 'coffee-mode)
;; coffee scriptファイルを開いたとき、coffee-modeをメインモードにする
(add-to-list 'auto-mode-alist '("\.coffee$" . coffee-mode))
(add-to-list 'auto-mode-alist '("Cakefile" . coffee-mode))
;; 保存したとき、拡張子以外同名のjsバッファをリロードする
(defun revert-compiled-coffee ()
  (interactive)
  (with-current-buffer
      (concat (file-name-sans-extension (buffer-name (current-buffer))) ".js")
    (revert-buffer nil t)))
(add-hook 'coffee-mode-hook
          (lambda ()
            (add-hook 'after-save-hook 'revert-compiled-coffee nil t)))

再起動or再読み込み後、拡張子が.coffeeのファイルを開くとcoffee-modeが自動で適応されます。

watchで監視するのもいいですが、キーボードショートカット[C-c C-o C-s]を押すことで、coffeeファイルを保存するとjsファイルをコンパイルするCOSモードに入ります。ミニバッファの上にあるモードラインにCOSと表示されていればOK。

分割したウィンドウにコンパイル後のjsファイルを開き、もう一方にcoffeeファイルを開いて変更を保存すると、逐次隣のjsファイルが更新されます。

おわり

リアルタイムで変更を確認できるWebアプリもあります。
Js2coffee: convert JavaScript code to CoffeeScript

CoffeeScriptは決まった書式で出力してくれるので、悪い意味で様々な書き方が可能なJavaScriptには良いですね。Ruby覚えればもっと捗るはず。