Last Updated: March 07, 2016
·
12.59K
· Ionut-Cristian Florescu

IcedCoffeeScript with Sublime Text 3

If you're not a JavaScript purist and you care for code readability and development speed, you should definitely consider IcedCoffeeScript, an excellent superset of CoffeeScript developed and maintained by Maxwell Krohn, adding two new keywords, await and defer. These additions simply and powerfully streamline asynchronous control flow, both on the server and on the browser.

Also, if you haven't been living under a rock for the last couple of years, you're probably using Sublime Text as your editor of choice.

IcedCoffeeScript in Sublime Text 3

Sublime Text has a rich and powerful ecosystem of plugins and most people writing CoffeeScript should already be familiar with Better CoffeeScript.

However, if you've decided to try ICS, the default Better CoffeeScript plugin won't work (i.e. you won't get proper syntax highlighting for await and defer, no compilation / JavaScript output inspection, etc.)... And for debugging purposes, seeing the ICS -> JS translation output might be helpful:

IcedCoffeeScript output

That's why I've created this slightly modified fork of the original plugin, providing the missing ICS support.

How to use the Iced Coffee Script fork

  1. Remove the original Better CoffeeScript plugin (if necessary) and close Sublime Text;
  2. Install the IcedCoffeeScript fork:

    cd PACKAGE_PATH
    git clone https://github.com/icflorescu/sublime-better-coffeescript.git "Iced Coffee Script"

    Depending on your OS, PACKAGE_PATH can be:

    Nix: ~/.config/sublime-text-3/packages
    Mac: ~/Library/Application\ Support/Sublime\ Text\ 3/Packages
    Win: %APPDATA%\Sublime Text 3\Packages
  3. Start Sublime Text and enjoy coding in ICS :-)

You might want to modify your CoffeeScript.sublime-settings to fit your needs (go to Preferences -> Package Settings -> Iced Coffee Script -> Settings - User).
Here's mine (for instance, I don't want it to automatically compile on save):

{
    "binDir": "/usr/local/bin",
    "compileOnSave": false
}

A few quick tips

  • Alt-Shift-D: display the compiled JavaScript for the current file or selection;
  • Alt-Shift-S: validate the syntax of the current file or selection;
  • Alt-Shift-C: compile the current file and save the output;
  • Alt-Shift-R: run the current file or selection;
  • Alt-Shift-T: run a specific cake task the current file or selection.

More info available in the GitHub repo.

A word of caution for JavaScript purists

Being passionate about a language is a good thing. Being religious is not. After all, they're just tools.

8 Responses
Add your response

Great tip Ionut, thanks for sharing! :)

PS. I love the angle screenshots, very cool.

over 1 year ago ·

@jonahoffline - Thanks for reading, Jonah! I take it you're not a language purist and decided to try ICS? :-)

over 1 year ago ·

Nope, definitely not a purist :)
I've been meaning to try ICS for a while. Now with this post I'll finally give it a shot :)

over 1 year ago ·

I'll definitely give it a try! Thanks for sharing :)

over 1 year ago ·

@emmenko - Thanks for reading, Nicola!

over 1 year ago ·

What Sublime Text theme are you using in that screenshot?

over 1 year ago ·

Thanks for reading, @markpanado - the Sublime Text theme is Soda Dark, developed by Ian Hill. I like dark themes, but I find most of them too sharp on the eyes. I think Soda Dark is the only one achieving perfect balance between ellegance and readability.

I also think Soda Dark works best with tomorrow color scheme. Both of them can be installed with Sublime Package Manager.

As a side note, IMHO the Soda Dark + Tomorrow combination is what Microsoft UX guys should have copied for Visual Studio 2013, instead of simply jumping into the dark UI bandwagon just because it was trendy ;-)...

over 1 year ago ·

Thanks for the detailed tip @icflorescu :) I like the color combination. Will definitely install it! :)

over 1 year ago ·