- Download and install the Node.js framework. The CoffeeScript transpiler is started through Node.js and the Node Package Manager (npm) is also the easiest way to download the transpiler. For details on using Node.js in WebStorm, see the section Node.Js
- Make sure the Node.js plugin is enabled. The plugin is bundled with WebStorm and activated by default. If it is not, enable the plugin.
Download and install the CoffeeScript transpiler. The easiest way is to use the Node Package Manager (npm), which is a part of Node.js.
- Switch to the directory where the Node Package Manager (npm) is stored or define a path variable for it so it is available from any folder.
Do one of the following depending on your further plans:
npm install coffee-script
otherwise your breakpoints will not be recognised and processed correctly. Source maps are generated by the coffee-script-redux transpiling tool.
Type the following command at the command line prompt:
npm install coffee-script-redux
In either case, the tool is installed under Node.js so Node.js, which is required for starting the tool, will be specified in the path to it.
The executable files of both transpilers have the same name coffee.cmd (though luckily differ in contents). Therefore to have both tools available, you need to rename the executable of the one that was downloaded first or move it to another folder under Node.js.
- To start creating a File Watcher, open the Project Settings and click File Watchers. The File Watchers page that opens, shows the list of File Watchers that are already configured in the project.
Click the Add button or press Alt+InsertControl N
and choose the predefined template from the pop-up list.
- If you are going to debug your code, choose CoffeeScript Source Maps. As a result, the source maps will be created.
- Proceed as described on page Using File Watchers.
WebStorm can perform static analyses of your CoffeeScript code without actually running a transpiler and display the predicted transpilation output in the .
- Open the desired CoffeeScript file in the editor, and right-click the editor background.