01 Apr 2012

Getting Sublime Text 2 to Compile CoffeeScript on Windows 7

Okay, this is maybe a bit niche but I might as well document this for whoever else comes across it.

Sublime Text 2 is a pretty nice text/code editor in the same style as TextMate for Mac. CoffeeScript is a reduced syntax for writing JavaScript code.

Getting them to work together isn’t all that straightforward but is possible.

Note: This guide applies to how I got it to work on my machine for Windows 7 64-bit. Do this at your own risk; remember that I’m just a random guy on the internet.

Okay, let’s go.

1. Get the stuff you need

Download Sublime Text 2 (ST2) from their website and install it.
Download the CoffeeScript TextMate bundle from GitHub.
Download CoffeeScript from GutHub and put it somewhere sensible (in my case, I put it under d:opensourcecoffeescript)
Download and install NodeJS for Windows.

2. Add CoffeeScript Syntax Highlighting

Find your ST2 installation folder and open up the packages folder. On Windows 7, this will be under _[your user directory]_AppDataRoamingSublime Text 2Packages.

In that folder, create a new folder called “CoffeeScript”.

From the CoffeeScript bundle you downloaded from GitHub, copy the contents of the Commands, Preferences, Snippets and Syntax folder directly into your new CoffeeScript packages folder. At this stage, your new package folder should have a few dozen files and no folders in it. If so, you can throw away the TM bundle as we won’t be using it again.

If you want, you can now fire up TM2 and you’ll have full syntax support for CoffeeScript. But, to build, you’ll need to soldier on.

3. Add Script Compilation

To compile the CoffeeScript files, we’ll use the compiler that runs using NodeJS. Remember that “sensible” location I said you should put the CoffeeScript files? You’ll need that location now.

Go to your CoffeeScript folder and find the bin folder and the coffee file within that. Note this path. We’re going to tell NodeJS to run using this path.

In the root of your CoffeeScript folder, create a new command file (a text file with .cmd as extension) called coffee.cmd. Add in the command below, substituting the values from your own system:

@echo off
"[the path to node on your system]/NodeJS/node.exe" "[the path to CoffeeScript on your system]/Coffee-Script/bin/coffee" %*

In my case, it looks like this:

@echo off
"%PROGRAMFILES(x86)%/NodeJS/node.exe" "d:/opensource/Coffee-Script/bin/coffee" %*

You can test this works by opening up a command prompt and running the cmd file. If all is working well, you should get a “coffee >” prompt.

Once that’s all working, go back to the CoffeeScript package folder you created in Step 2.
Inside new package folder, open up ‘CoffeeScript.sublime-build’. This is the file that shows ST2 how to compile your CoffeeScript file.

Edit the “path” value in this file to point to the directory that you’ve put your coffee.cmd file (if you’ve used the same locations as sugested, this should be in your CoffeeScript directory). You’ll need to use double slashes to escape the directory slashes (i.e. use d:opensourcecoffeescript instead of d:opensourcecoffeescript).

Edit the “cmd” value to use coffee.cmd as the first parameter.

You should now have something like this:

{
  "path": "D:opensourcecoffeescript",
  "cmd": ["coffee.cmd","-c","$file"],
  "file_regex": "^(...*?):([0-9]*):?([0-9]*)",
  "selector": "source.coffee"
}

Save and close.

4. Build Some Scripts

Now to make sure everything’s working.

Open up ST2 and type out some CoffeeScript:

class CoffeeScriptTester
  sayHello:
    alert "Hello World"
 
CoffeeScriptTester.sayHello()

Save and select CoffeeScript as your filetype.

Now go to the Tools menu and select Build. If all has gone to plan, you should get a message reading “[Finished]” and you should now have a compiled JavaScript file sitting in the same folder and your CoffeeScript file. Open this up and behold the compiled file. You can see the final script in action here.

5. Troubleshooting

If things didn’t work then the main things to check are:

Are your paths correct in your coffee.cmd file? This can be tested by running the file from a command prompt and checking that you get the coffee prompt at the end.
Are you TM2 package files all in the correct place? You shouldn’t have any nested folder in here; it should be one flat file.