How to Use CoffeeScript in WebMatrix

CoffeeScript is a scripting language that makes it easier to write JavaScript. WebMatrix provides support for writing CoffeeScript, including syntax highlighting and compilation. For more information specific to the use of CoffeeScript, check out http://coffeescript.org/.

 

Adding a CoffeeScript file to your site

If you would like to start using CoffeeScript in your site, you can start by adding a new file. In the lower left corner of the WebMatrix window, click the Files tab to open the Files workspace, and then click New.

coffee-1

 

Tip: You can also use the keyboard shortcut CTRL-N.

This will open the Choose a File Type dialog. Click the All category on the left side of the dialog to show all of the supported file templates in WebMatrix, and then select CoffeeScript. Accept the default name of CoffeeScript.coffee, and then click OK.

coffee-2

 

Using CoffeeScript

To get started, you'll write some basic CoffeeScript. CoffeeScript makes it easier to write and maintain JavaScript. Add the following sample code from the CoffeeScript website to the CoffeeScript.coffee file. The single line of code is a function that calculates the square of a given number:

square = (x) -> x * x

And that’s it! The equivalent script in JavaScript would look like this:

var square = function(x) {
  return x * x;
};

This is just one example where a script that required three lines of code can be reduced to one—this is why CoffeeScript is popular. For more information on CoffeeScript syntax, see http://coffeescript.org/.

Compiling your CoffeeScript into JavaScript

Many web frameworks will automatically generate JavaScript based on your CoffeeScript at runtime. If you want to compile your CoffeeScript into JavaScript at design time, you can use the OrangeBits compiler extension for WebMatrix. The OrangeBits compiler automatically creates JavaScript every time you save your CoffeeScript document. To add the OrangeBits extension to WebMatrix, click the extension gallery icon in the ribbon:

coffee-3

 

The extension gallery contains useful extensions that add capabilities to WebMatrix. In the search box, type "OrangeBits", select OrangeBits Compiler, and then click Install.

coffee-4

 

When the installation finishes, save the CoffeeScript.coffee file. The notification bar tells you that the file has been compiled, and the CoffeeScript.js file that the compiler generated appears in the file tree. Open the CoffeeScript.js file, and you will see the equivalent JavaScript code for the squaring function mentioned earlier.

Note that now you can also right click any *.coffee file in your tree, and select Compile:

coffee-5

 

This will generate CoffeeScript.js in the file tree, which you can now open:

coffee-5

 

Finally, all of the WebMatrix editor features like formatting, code folding, and brace matching are also available when you write CoffeeScript.

You can discuss this article using the adjacent Facebook talkback.

For technical questions please visit our discussion forums, where we have a vibrant community of developers like you, as well as Microsoft engineers who are ready to answer your questions!