CoffeeScript with Sublime Text

Recently I’ve played with node.js and the Play! framework and I came across CoffeeScript.
CoffeeScript is a language which compiles to JavaScript. The advantage over using JavaScript is basically having a more compact language which looks a lot like Ruby. Sometimes one very readable line of CoffeeScript translates into 7-10 complex lines of JavaScript.

My dear friend Alec recommended Sublime Text, a relatively new lightweight editor similar to TextMate. Starting to learn CoffeeScript I decided to give Sublime a shot and I liked it a lot. Now I also use Sublime to do the Java coding for Play! framework code. Usually you want a richer IDE like Eclipse or IntelliJ for Java but since Play! compiles the code on the fly and comes with perfect compile errors in the browser, a lightweight editor like Sublime works just fine.

Here a little tutorial how to setup Sublime to start coding CoffeeScript:

  1. Install CoffeeScript (You need to have node.js and the node package manager installed):
    npm install -g coffee-script
  2. Download and install Sublime Text Editor
  3. Save the CoffeeScript.tmLanguage here: ~/Library/Application Support/Sublime Text 2/Packages/CoffeeScript/
  4. Create the CoffeeScript.sublime-build here: ~/Library/Application Support/Sublime Text 2/Packages/Users with the following content:
    {"cmd": ["coffee", "$file"],
    "selector" : "source.coffee",
    "path" : "/usr/bin"}
  5. Now open Sublime and create a helloWorld.coffee:
    console.log "Hello world"
  6. CMD-B to execute the script and you should see the output:
    Hello world
    [Finished]

Another helpful thing is to configure Sublime to be used from the command line. Open a terminal and create a symbolic link:

sudo ln -s "/Applications/Sublime Text 2.app/Contents/SharedSupport/bin/subl" /usr/bin/subl

Now you can change to the directory of you project and with “subl .” Sublime opens the current directory as a project.

To get an overview how CoffeeScript compares to JavaScript check out the docs. Further I’ve read CoffeeScript: Accelerated JavaScript Development which gives a good overview of the language.

Update: Great link explaining some Sublime features/shortcuts 9 reasons you must install Sublime Text 2. Code like a man, man.

19 comments to CoffeeScript with Sublime Text

  • Hi Sönke,
    You’d definitively give a try to haXe which give a similar approach but for a lot more platforms…

  • Merci Eric, haXe is also on top of my list to evaluate.

  • Randy

    Great tip! For some reason, my .coffee file was not being recognized as a coffeescript file. I had to set it build hand: Tools => Build System => Coffeescript.

    I also had to set my path to /usr/local/bin/coffee. But still, works great.

  • Didier Prophete

    Herr Sönke, ich bin very disappointed: how could you write about editing source code without mentioning the greatest text editor of all: VIM !! :-) Ok, ok, to be fair, the ‘minimap’ view of Sublime Text is pretty awesome, I have to admit. it’s actually good to see some innovation on the text editing front.

    Glad to see you are trying coffeescript. In my new startup, we are using it all over the place and it is such a step up from standard javascript. Definitely a huge productivity gain (and I wasn’t kidding: VIM is great at editing coffescript once you have added a few plugins: I personally recommend ‘Syntastic’ and ‘vim-coffee-script’)

    Oh, and the link to ‘Sublime Text’ is broken in your post…

  • Sönke

    Monsier le Prophete, sorry for missing VIM 😉
    CoffeeScript is a productivity gain and beauty of the language helps with readability too I think. Also less code -> less bugs.
    One thing I would like to see is a strict flag to compile time detect access to non-existent fields.

  • e_dub_kendo

    Thank you so much good sir! I’ve been trying for hours to figure out how to get coffeescript to run directly from the Sublime Text window, having read that it was possible, and your instructions were what finally helped me to do this. Thanks again!

  • Ian

    So I just stumbled on this blog and I notice that you work at SFDC and use Sublime text… Is there a Sublime 2 bundle for APEX code? If so that would really be helpful!

    I’m trying to go about building my own at the moment (set up a build setting to deploy all code via Ant at the moment) and I set syntax highlighting to Java (.cls, .trigger) and HTML (.page) but it would be amazing if someone had already made the few syntax changes and could post it!

  • Sönke

    Hi Ian, I am not aware of a bundle for APEX code, sorry!

  • Ian

    Ah bummer! If I can get something good working maybe I’ll share it. This is one of the top links on google for “sublime text salesforce”. <- A little SEO for you there.

  • Sönke

    Sweet, thanks a lot Ian and good luck!

  • Ovidiu C.

    The syntax highlighting worked, but for some reason the second part doesn’t. When I try to execute the script with CMD-B I get this:

    [Errno 2] No such file or directory
    [Finished]

    Do I have to change anything in the CoffeeScript.sublime-build file?

    Thanks!

  • Sönke

    Did you set CoffeeScript as the build target?
    Tools->Build System

  • SiM

    I installed coffeescript and Icedcoffeescript through npm install -g and then installed Icedcoffeescript package, NOT the coffeescript package, through ST2 package manager. The IcedCoffeeScript.sublime-build looks like:

    {
    “path”: “$HOME/bin:/usr/local/bin:$PATH”,
    “cmd”: [“iced”,”-c”,”$file”],
    “file_regex”: “^(…*?):([0-9]*):?([0-9]*)”,
    “selector”: “source.coffee”
    }

    Problem is that when I try to Cmd-B a file test.coffee:
    console.log “Hello World!”

    The console output is just:
    [Finished]

    What am I doing wrong?

  • SiM

    Got it:
    Had to remove “-c” from

    “cmd”: [“iced”,”-c”,”$file”],

  • NxD

    Ovidiu C. – to avoid getting:
    [Errno 2] No such file or directory
    [Finished]

    …Confirm that the coffee interpreter is installed – see http://jashkenas.github.com/coffee-script/
    As indicated in the package’s README, I used “sudo bin/cake install”
    Open a terminal session, and type “coffee”. You should see the “coffee: ” prompt.
    If you go to the directory where you saved “helloWorld” and type “coffee helloWorld.coffee”. you should see its output.
    You’ll need to remove “-c” from CoffeeScript.sublime-build file for it to work in Sublime console (a per SiM)

  • @Ian, just thought you might be interested in the Sublime Text 2 bundle I put together for Salesforce.
    It includes a build system, and nice navigation, as well as some snippets thrown over from Java.

    http://www.stuntbyte.com/ide

    Cheers
    Kerry

  • […] Coffee Script with Sublime Text explains how to setup keybinding so Coffee Script can be executed with a keyboard shortcut. […]

  • Joe Ferraro

    @Ian, here is a Force.com IDE for Sublime Text: https://github.com/joeferraro/MavensMate-SublimeText