CoffeeScript to JavaScript compilation in Sublime Text 2/3

Ever wanted to write code in CoffeeScript? It surely is great but you wonder why is this not automated or smaller. Actually there are two options:

1. include CoffeeScript so it will compile to JavaScript when page is loaded
2. include pure JavaScript - generated from CoffeScript code.

First option is very easy but may vary on performance. Second is better in performance bad worse in usage. I’ll teach you how to automate that process so it will be both fast on page load and easy too.

1st option - include CoffeeScript

This is the way:

<script type="text/javascript" src="js/coffee-script.js"></script>
<script type="text/coffeescript" src="js/general.coffeescript"></script>

Simple. CoffeScript is loaded first and then automatically compiled by script.

Minuses are that compiler have to be downloaded (about 200KB of minimzed code!) and scrip have to be compiled after the JS compiler is downloaded.

Let’s forget about this.

2nd option - include JavaScript

There are probably other code editors as well which can do same thing but I’ll present it in Sublime Text 2. I’m assuming you’re using Windows OS, otherwise you’re probably not interested in those instructions.

There are few steps to install it. The hard moment is when plugin doesn’t work (and that’s why you can read it) which about I’d like to share.

Better CoffeeScript plugin installation:

1. Run Sublime Text 2
2. Ctrl+Shift+P and then type “Install Package”, hit Enter and wait until similiar window appears.
3. Type “Better CoffeeScript” and hit Enter. The plugin will be installed

Now we need to install CoffeeScript compiler itself:

1. Download node.js Windows Installer (in my case x64) and install it wherever you want (yes, other path than the default one works fine).
2. Open Windows command line (hotkey Win+R and then type cmd).
3. In command line type: npm install -g coffee-script
4. Setup environment variable PATH so it will point at %APPDATA%/npm and C:/Program Files/nodejs (or wherever you have installed it)

OK, now theoretically the plugin should work (after this operation and Sublime Text 2 is restarted) BUT there’s a problem of course. Try to create file with extension coffee, e.g. _general.coffee _and save it. Sublime Text 2 says then:

‘coffe’ is not recognized as an internal or external command

It sucks by no seing a path to coffee.cmd script located in %APPDATA%/npm. My workaround is following:

1. Using some file explorer go to folder: %APPDATA%/Sublime Text 2/Packages/Better CoffeeScript

2. Modify CoffeeScript.py file:

   source_file = args[-1] cmd = settings.get(‘binDir’, ‘%APPDATA%/npm’) + ‘/’ + cmd if path.isfile(source_file):

Now, everytime when you save some *.coffee file then the plugin compiles it to JavaScript code and saves it to *.js file in same folder.

Bonus

Wanted to make your files even smaller? Use YUI Compressor! There’s also a plugin for it: http://leon.radley.se/2012/02/st2-yui-compressor/

Works great. Have fun.

Some time has passed - Sublime Text 3

If you have Sublime Text 3, then probably you don’t have Package Control (and you won’t see “Install Package” after CTRL+SHIFT+P). Also current version of Better CoffeeScript seems to work on Windows but doesn’t compile file on save. To change this copy configuration from Preferences->Package Settings->Better CoffeeScript->Settings-Default to Settings-User and set compileOnSave to true