lk_jxg
Last Updated: March 07, 2016
·
11.38K
· icflorescu
Icflorescu

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.

Say Thanks
Respond

8 Responses
Add your response

10587
4693d7cfa88635d430c0de9a92f8dd84

Great tip Ionut, thanks for sharing! :)

PS. I love the angle screenshots, very cool.

over 1 year ago ·
10589
Icflorescu

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

over 1 year ago ·
10591
4693d7cfa88635d430c0de9a92f8dd84

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 ·
10618
70f0507ce8012cdaa5e0ab97445136c6

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

over 1 year ago ·
10734
Icflorescu

@emmenko - Thanks for reading, Nicola!

over 1 year ago ·
15542
73803c9f6e5a7690d3825008deec4619

What Sublime Text theme are you using in that screenshot?

over 1 year ago ·
15566
Icflorescu

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 ·
15567
73803c9f6e5a7690d3825008deec4619

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

over 1 year ago ·