[IDE & Editor] Sublime Text: CoffeeScript Sublime Plugin と build error ([Errno 2] No such file or directory)

毎回 coffee -c $file と打つのが大変なので、SublimeText の Build System から cmd+b でコンパイルできないか試したら、いろいろとはまりました。

Contents

環境

CoffeeScript の確認

nodebrew でインストールしており、下記のパスが通っている状態。

.zshrc
export PATH=$HOME/.nodebrew/current/bin:$PATH
% echo $path
% coffee -v
CoffeeScript version 1.6.3

path の確認

% which node
/Users/****/.nodebrew/current/bin/node
% which coffee
/Users/****/.nodebrew/current/bin/coffee
% which cake
/Users/****/.nodebrew/current/bin/cake

CoffeeScript Sublime Plugin をインストール

シンタックスハイライトとビルドのために、CoffeeScript をインストールします。

  1. cmd+shift+p で Command Palette… を呼び出す。
  2. install package を選択。
  3. CoffeeScript をインストール。
  4. SublimeText2を再起動。

発生するエラー

主に2つの原因があるよう。

  • CoffeeScript へのパスが認識されない。
  • 割り当てられた cake sbuild コマンドが実行できない。

cmd+bで、このようなエラーが表示される。

[Errno 2] No such file or directory
[cmd:  [u'cake', u'sbuild']]
[dir:  /Users/****/projects/lessons-coffee]
[path: /usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Users/****/bin]
[Finished]

CoffeeScript.sublime-build を確認

build の設定は、.sublime-build というファイルで行われるようなので、内容を確認する。

/Users/****/Library/Application Support/Sublime Text 2/Packages/CoffeeScript/CoffeeScript.sublime-build
CoffeeScript.sublime-build
{
    "cmd": ["cake", "sbuild"]
,   "path": "/usr/local/bin:$PATH"
,   "selector": "source.coffee"
,   "working_dir": "$project_path"
,   "variants":
    [
        {
            "name": "Run",
            "cmd": ["coffee", "$file"]
        }
    ]
}

解決策1: CoffeeScript.sublime-build を編集する

但し、直接編集してしまうので、プラグインのバージョンアップで設定が消えるような気がする。

/Users/****/Library/Application Support/Sublime Text 2/Packages/CoffeeScript/CoffeeScript.sublime-build
CoffeeScript.sublime-build
{
    "cmd": ["coffee", "-c", "$file"]
,   "path": "$HOME/.nodebrew/current/bin:/usr/local/bin:$PATH"
,   "selector": "source.coffee"
,   "working_dir": "$project_path"
,   "variants":
    [
        {
            "name": "Run",
            "cmd": ["coffee", "$file"]
        }
    ]
}

解決策2: build 設定を独自に作成する

追加された設定を優先して見てくれるよう。

/Users/****/Library/Application Support/Sublime Text 2/Packages/User/builds/myCoffeeScript.sublime-build
myCoffeeScript.sublime-build
{
  "cmd": ["coffee","-c","$file"],
  "path": "$HOME/.nodebrew/current/bin",
  "selector": "source.coffee"
}

自分はお試し利用なので、この手法を使うことにしました。

解決策3: CoffeeScript Sublime Plugin の設定で動くように環境を整える

CoffeeScript のコンパイルには、いろいろと事前設定が必要らしく、このあたりを整備してみる。
実際の開発で必須の作業なのかどうか不明。

path を通す

cmd+,Preferences - Settings - User を呼び出し、設定を加える。

, を忘れずに。

Preferences.sublime-settings
    "build_env": {
        "PATH": "$HOME/.nodebrew/current/bin"
    }

この設定が追加されるのか、上書きされてしまうのか不明。

echo $path で表示されるパスをすべて入れた方が良いのかもしれない。

% echo $path
/Users/****/bin /usr/local/bin /Users/****/.nodebrew/current/bin /usr/local/heroku/bin /Users/****/.rbenv/shims /Users/****/.rbenv/bin /usr/bin /bin /usr/local/sbin /usr/sbin /sbin

この時点でパスが通るので、cmd+shift+b が使えるようになる。
.coffee ファイルを開いて実行すると、下記が表示される。

Hello Word!
[Finished in 0.5s]

Workディレクトリに cakefile を作成する

この時点で cake コマンドを実行しても、下記のようなエラーになってしまう。

% cake
/Users/****/.nodebrew/node/v0.10.22/lib/node_modules/coffee-script/lib/coffee-script/cake.js:111
    throw new Error("Cakefile not found in " + (process.cwd()));
          ^
Error: Cakefile not found in /Users/****

上記を参考に、ワークディレクトリをこのような構成にする。

.
├── cakefile
├── lib
└── src
    └── hello.coffee

cakefile に task として、sbuild を設定する。

cakefile
{exec} = require 'child_process'
task 'sbuild', 'Build project from src/*.coffee to lib/*.js', ->
  exec 'coffee --compile --output lib/ src/', (err, stdout, stderr) ->
    throw err if err
    console.log stdout + stderr

以上で、cmd+bcake sbuild が実行され、lib/ 以下に .js ファイルが生成される。
但し、working_dir も見ているので、.coffee ファイルをいい加減に開いてしまうと、コンパイルでこけます。