THE NEST: Sublime Text2開發CoffeeScript程式：Windows環境設定

最近把CoffeeScript的IDE改成了Sublime Text2
但因為我是使用Windows，所以遇到了不少的麻煩，花了些時間修正，以下是詳細的安裝步驟

安裝NodeJS
安裝coffee-script
(command line下執行下列指令)
```
npm install -g coffee-script
```
安裝Sublime 2

安裝Sublime Package Control：
a. 開啟sublime text2
b. ctrl+` 帶出指令視窗
c. 輸入下列指令

import urllib2,os; pf='Package Control.sublime-package'; ipp=sublime.installed_packages_path(); os.makedirs(ipp) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler())); open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read()); print 'Please restart Sublime Text to finish installation'

d. 重開sublime text2即完成Sublime Package Control的安裝

輸入ctrl+shift+P或從功能選單選擇Preferences -> Package Control，之後選擇Package Control: Install Package (如果沒顯示Package Control表示Sublime Package Control安裝失敗)，應會出現下面這個選單

選擇Install Package會跳到另一個選單，輸入NodeJS

並以同樣的步驟安裝coffeescript package
到這步為止，我們已經讓sublime text2對nodejs & coffeescript有基本的支援了(code completion, syntax highlight, snippets等)

因為我想在Sublime Text2裡面直接執行cake build，所以做了以下的修改：
a. 功能選單選擇Preference->Browse Packages進入Packages資料夾
b. 進入CoffeeScript資料夾，編輯 CoffeeScript.sublime-build
c. 檔案應該長的像這樣子

{
 "cmd": ["cake", "sbuild"],
 "path": "/usr/local/bin:$PATH",
 "selector": "source.coffee",
 "working_dir": "$project_path"
}

d. 替換成下列

{
    "cmd": ["cake.cmd", "build"],
    "selector": "source.coffee",
    "working_dir": "$project_path",
    "variants": [
        { 
         "cmd": ["cake.cmd", "test"],
         "name": "Test"
        },
        { 
         "cmd": ["cake.cmd", "watch"],
         "name": "Watch"
        },
        { 
            "cmd": ["cake.cmd", "docs"],
            "name": "Generate Docs"
        }
    ]
}

(需要注意的是在windows底下，指令部分需要加.cmd)
e. 此設定是對應CoffeeScript Template建立的，但原template在windows下面需要做點修正，把color code作escape(第5-8行)，並在指令後面都加上了.cmd

fs = require 'fs'
{print} = require 'util'
{spawn, exec} = require 'child_process'

bold = `'\033[0;1m'`
green = `'\033[0;32m'`
reset = `'\033[0m'`
red = `'\033[0;31m'`

walk = (dir, done) ->
  results = []
  fs.readdir dir, (err, list) ->
    return done(err, []) if err
    pending = list.length
    return done(null, results) unless pending
    for name in list
      file = "#{dir}/#{name}"
      try 
        stat = fs.statSync file 
      catch err 
        stat = null
      if stat?.isDirectory()
        walk file, (err, res) -> 
          results.push name for name in res
          done(null, results) unless --pending
      else
        results.push file
        done(null, results) unless --pending

log = (message, color, explanation) -> console.log color + message + reset + ' ' + (explanation or '')

launch = (cmd, options=[], callback) ->
  app = spawn cmd, options
  app.stdout.pipe(process.stdout)
  app.stderr.pipe(process.stderr)
  app.on 'exit', (status) -> callback?() if status is 0

build = (watch, callback) ->
  if typeof watch is 'function'
    callback = watch
    watch = false
  log ":-)", green
  options = ['-c', '-b', '-o', 'lib', 'src']
  options.unshift '-w' if watch
  launch 'coffee.cmd', options, callback

mocha = (options, callback) ->
  if typeof options is 'function'
    callback = options 
    options = []
    
  launch 'mocha.cmd', options, callback

docco = (callback) ->
  walk 'src', (err, files) -> launch 'docco.cmd', files, callback

task 'docs', 'generate documentation', -> docco()
task 'build', 'compile source', -> build -> log ":)", green
task 'watch', 'compile and watch', -> build true, -> log ":-)", green
task 'test', 'run tests', -> build -> mocha -> log ":)", green

f. 這個Cakefile會需要用到：mocha(測試用)跟docco(產生文件用)

npm install -g mocha
npm install -g docco

設定好之後，用sublime text2開啟專案，ctrl+b會直接呼叫cake執行build工作：把src資料夾下面的coffee檔全部編譯成js並放到lib資料夾下面去，如有需要修改設定只要修改Cakefile就可以了。
如果要執行其它build task：快速鍵ctrl+shift+p開啟選單，輸入Build:就會看到

也可以從Preferences>Key Bindings自訂快速鍵來顯示build task：
```
{ "keys": ["ctrl+alt+shift+b"], "command": "show_overlay", "args": {"overlay": "command_palette", "text": "Build: "} }
```
其中ctrl+alt+shift+b可以替換成任何想要的快速鍵

注意事項：

如果Build不是呼叫Cake或是不能Build，功能選單Tool->Build System選擇CoffeeScript
Sublime的build設定檔只寫了四個task，build/watch/test/docs，可以自己增加，但要確定Cakefile中也有相對應的task，否則系統會自動呼叫預設的cake build
目前找不到好用的Remote SSH Editing Plugin，不是要錢就是功能不太完整，有人有推薦的嗎？

Sublime Text2開發CoffeeScript程式：Windows環境設定

2 則留言: