# CoffeeScript

> **TL;DR**
> Required plugins:
>
>
>
> `CoffeeScript`, `File Watchers` -    install the plugins on the Settings | Plugins page, tab Marketplace.     The plugins are available only in IntelliJ IDEA with the Ultimate subscription.

With IntelliJ IDEA, you can use [CoffeeScript](http://coffeescript.org/) that compiles into JavaScript. IntelliJ IDEA recognizes `*.coffee` files and marks them with ![the CoffeeScript icon](https://resources.jetbrains.com/help/img/idea/2026.2/coffeescript.org.coffeescript.images.coffeescript.svg). You can set breakpoints directly in your CoffeeScript code, and IntelliJ IDEA recognizes them using source maps generated during compilation.

IntelliJ IDEA helps you write CoffeeScript code by suggesting completion for keywords, labels, variables, parameters and functions. You can jump from a symbol to its declaration  `Ctrl+B` (Windows), `⌘ B` (macOS), `⌘ B` (IntelliJ IDEA Classic (macOS)), `⌘ B` (macOS System Shortcuts), `Ctrl+B` (XWin), `Ctrl+B` (GNOME), `Ctrl+B` (KDE), `Ctrl+Alt+G` (Emacs), `F12` (Sublime Text), `F12` (Sublime Text (macOS)), `Ctrl+B` (NetBeans), `F12` (Visual Studio), `F12` (Visual Studio (macOS)), `F3` (Eclipse), `F3` (Eclipse (macOS)) or implementation `Ctrl+Alt+B` (Windows), `⌘ ⌥ B` (macOS), `⌘ ⌥ B` (IntelliJ IDEA Classic (macOS)), `⌘ ⌥ B` (macOS System Shortcuts), `Ctrl+Alt+B` (XWin), `Ctrl+Alt+B` (GNOME), `Ctrl+Alt+B` (KDE), `Ctrl+Alt+B` (Emacs), `Ctrl+Alt+B` (Sublime Text), `⌘ ⌥ B` (Sublime Text (macOS)), `Ctrl+Alt+B` (NetBeans), `Alt+End` (Visual Studio), `⌘ ⌥ Click` (Visual Studio (macOS)), `Ctrl+T` (Eclipse), `Ctrl+Alt+B` (Eclipse (macOS)) as well as find any symbol by its name `Ctrl+Alt+Shift+N` (Windows), `⌘ ⌥ O` (macOS), `⌘ ⌥ ⇧ N` (IntelliJ IDEA Classic (macOS)), `⌘ ⌥ O` (macOS System Shortcuts), `Ctrl+Alt+Shift+N` (XWin), `Ctrl+Alt+Shift+N` (GNOME), `Ctrl+Alt+Shift+N` (KDE), `Ctrl+Alt+Shift+N` (Emacs), `Ctrl+Shift+R` (Sublime Text), `⌘ ⇧ R` (Sublime Text (macOS)), `Ctrl+Alt+Shift+O` (NetBeans), `Ctrl+Alt+Shift+T` (Visual Studio), `⌘ ⌥ ⇧ T` (Visual Studio (macOS)), `Ctrl+Alt+Shift+N` (Eclipse), `⌘ ⌥ O` (Eclipse (macOS)).

IntelliJ IDEA integrates with the [coffeescript](https://www.npmjs.com/package/coffeescript) compiler that translates CoffeeScript code into JavaScript. The tool also creates [source maps](http://net.tutsplus.com/tutorials/tools-and-tips/source-maps-101/) that set correspondence between lines in your CoffeeScript code and in the generated JavaScript code so that IntelliJ IDEA debugger recognizes breakpoints in your CoffeeScript code and processes them correctly.

## Before you start

Procedure:

1. Download and install [Node.js](http://nodejs.org/#download).

2. Install the CoffeeScript and File Watchers plugins on the Settings | Plugins page, tab Marketplace, as described in [Installing plugins from
JetBrains Marketplace](managing-plugins.html#install_plugin_from_repo).     The plugins are available only in IntelliJ IDEA with the Ultimate subscription.

> **Note:**
> When you open a `.coffee` file without a CoffeeScript plugin installed, IntelliJ IDEA displays a pane where installing the plugin is suggested.
>
>
>
> ![Enable plugin pane](https://resources.jetbrains.com/help/img/idea/2026.2/ws_coffee_enable_plugin_pane.png)

## Compiling CoffeeScript into JavaScript

To compile your code automatically, you need to configure a [CoffeeScript File Watcher](#ws_coffee_compilation_create_fw) which will track changes to your files and run the compiler.

When you open a file, IntelliJ IDEA checks whether an applicable File Watcher is available in the current project. If such File Watcher is configured but disabled, IntelliJ IDEA displays a popup that informs you about the configured File Watcher and suggests to enable it.

If an applicable File Watcher is configured and enabled in the current project, IntelliJ IDEA starts the compiler automatically upon the event specified in the [New Watcher dialog](new-watcher-dialog.html).

* If the Auto-save edited files to trigger the watcher checkbox is selected, the File Watcher is invoked as soon as any changes are made to the source code.

* If the Auto-save edited files to trigger the watcher checkbox is cleared, the File Watcher is started upon save (`File | Save All`, `Ctrl+S` (Windows), `⌘ S` (macOS), `⌘ S` (IntelliJ IDEA Classic (macOS)), `⌘ S` (macOS System Shortcuts), `Ctrl+S` (XWin), `Ctrl+S` (GNOME), `Ctrl+S` (KDE), `Ctrl+X, Ctrl+S` (Emacs), `Ctrl+S` (Sublime Text), `⌘ S` (Sublime Text (macOS)), `Ctrl+S` (NetBeans), `Ctrl+Shift+S` (Visual Studio), `⌘ ⇧ S` (Visual Studio (macOS)), `Ctrl+S` (Eclipse), `⌘ S` (Eclipse (macOS))) or when you move focus from IntelliJ IDEA (upon frame deactivation).

Learn more from [File Watchers](using-file-watchers.html).

The compiler stores the generated output in a separate file. The file has the name of the source CoffeeScript file and the extension `.js` or `.js.map` depending on the compiler type. The location of the generated files is defined in the Output paths to refresh field of the [New Watcher dialog](new-watcher-dialog.html). Based on this setting, IntelliJ IDEA detects the compiler output.  However, in the   Project tool window  (`Alt+1` (Windows), `⌘ 1` (macOS), `⌘ 1` (IntelliJ IDEA Classic (macOS)), `⌘ 1` (macOS System Shortcuts), `Alt+1` (XWin), `Alt+1` (GNOME), `Alt+1` (KDE), `Alt+1` (Emacs), `Alt+1` (Sublime Text), `⌘ 1` (Sublime Text (macOS)), `Ctrl+1` (NetBeans), `Ctrl+Alt+L` (Visual Studio), `⌘ ⌥ L` (Visual Studio (macOS)), `Alt+1` (Eclipse), `Alt+1` (Eclipse (macOS))) , they are shown under the source `coffee` file which is now displayed as a node.

### Install the CoffeeScript compiler

Procedure:

1. In your command-line shell or in the embedded Terminal (`Alt+F12` (Windows), `⌥ F12` (macOS), `⌥ F12` (IntelliJ IDEA Classic (macOS)), `⌘ ⌃ T` (macOS System Shortcuts), `Alt+F12` (XWin), `Alt+F12` (GNOME), `Alt+F12` (KDE), `Alt+F12` (Emacs), `Alt+F12` (Sublime Text), `⌥ F12` (Sublime Text (macOS)), `Alt+F12` (NetBeans), `Ctrl+Alt+1` (Visual Studio), `⌘ ⌃ 1` (Visual Studio (macOS)), `Alt+F12` (Eclipse), `⌥ F12` (Eclipse (macOS)))  , type one of the following commands:

* `npm install --global coffeescript` for global installation.

* `npm install --save-dev coffeescript` to install CoffeeScript as a [development dependency](https://docs.npmjs.com/getting-started/using-a-package.json#specifying-packages). Learn more from the [CoffeeScript official website](http://coffeescript.org/#top).

### Create a CoffeeScript File Watcher

Procedure:

1. Press `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS)) to open settings and then select `Tools | File Watchers`.

2. Click ![the Add button](https://resources.jetbrains.com/help/img/idea/2026.2/app.expui.general.add.svg) or press `Alt+Insert` (Windows), `⌘ N` (macOS), `⌃ N` (IntelliJ IDEA Classic (macOS)), `⌘ N` (macOS System Shortcuts), `Alt+Insert` (XWin), `Alt+Insert` (GNOME), `Alt+Insert` (KDE), `Alt+Insert` (Emacs), `Ctrl+N` (Sublime Text), `⌘ N` (Sublime Text (macOS)), `Alt+Insert` (NetBeans), `Ctrl+N` (Visual Studio), `⌘ N` (Visual Studio (macOS)), `Alt+Insert` (Eclipse), `⌘ N` (Eclipse (macOS)) and choose the CoffeeScript predefined template from the list. Your code will be translated to JavaScript and supplied with generated [source maps](http://net.tutsplus.com/tutorials/tools-and-tips/source-maps-101/).

3. Proceed as described in [File Watchers](using-file-watchers.html).

> **Tip:**
> You can also use the compiler from the command line or [configure it as a third-party tool](configuring-third-party-tools.html).

### Customize the behaviour of the compiler

With IntelliJ IDEA, you can adjust the compiler by passing arguments to it just as if you were working in the command-line mode. Below is an example of customizing the default output location for the CoffeeScript compiler.

Suppose, you have a project with the following folder structure:

![File Watchers example of folder structure](https://resources.jetbrains.com/help/img/idea/2026.2/fileWatcherExampleImage1.png)

With the default File Watcher, the generated files will be shown as children of their original files.

![Default File Watcher output](https://resources.jetbrains.com/help/img/idea/2026.2/ws_coffee_example_default_fw_output.png)

You can change this default location and have the generated files stored in a separate `JavaScript` folder.

Procedure: Store all the generated files in the output JavaScript folder

1. [Create a CoffeeScript File
Watcher](#ws_coffee_compilation_create_fw).

![Create a CoffeeScript File Watcher](https://resources.jetbrains.com/help/img/idea/2026.2/ws_coffee_example_create_file_watcher.png)

2. In the Arguments field, type:

```SHELL
--map --compile -o $ProjectFileDir$/JavaScript $FileName$
```

3. In the Output paths to refresh field, type:

```SHELL
$ProjectFileDir$/JavaScript/$FileNameWithoutExtension$.js:$ProjectFileDir$/JavaScript/$FileNameWithoutExtension$.map:$FileNameWithoutExtension$.js.map
```

As a result, the project tree looks as follows:

![Custom output, flat structure](https://resources.jetbrains.com/help/img/idea/2026.2/fileWatcherExampleImage3.png)

You can also have the generated files stored in the folder structure that repeats the original structure under the `app` node.

Procedure: Preserve the original folder structure in the output folder

1. Create a CoffeeScript File Watcher.

2. In the Arguments field, type:

```SHELL
--map --compile -o $ProjectFileDir$/JavaScript/$FileDirRelativeToProjectRoot$ $FileName$
```

3. In the Output paths to refresh field, type:

```SHELL
$ProjectFileDir$/JavaScript/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.js:$ProjectFileDir$/JavaScript/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.map:$FileNameWithoutExtension$.js.map
```

As a result, the project tree looks as follows:

![Custom output, folder structure preserved](https://resources.jetbrains.com/help/img/idea/2026.2/ws_coffee_example_custom_fw_preserve_folder_structure.png)

### Preview compilation results without running the compiler

IntelliJ IDEA can perform static analyses of your CoffeeScript code without actually running a compiler and display the predicted compilation output in the dedicated read-only viewer.

Procedure:

1. Open the desired CoffeeScript file in the editor, and right-click the editor background.

2. From the context menu, choose `Preview Compiled CoffeeScript File`. The preview is opened in the dedicated read-only viewer: the left pane shows the original CoffeeScript source code, and the right pane shows the JavaScript code that will be generated by the compiler when it runs.

## Running CoffeeScript

There are two ways to run CoffeeScript in IntelliJ IDEA:

* Compile the CoffeeScript code manually and then run the output JavaScript code as if it were a Node.js application.

* Run the original CoffeeScript code through the Node.js run configuration and have IntelliJ IDEA compile it on the fly.

Procedure: Compile CoffeeScript manually and run the generated JavaScript code

1. [Compile the CoffeeScript code into Javascript](#ws_coffee_compilation).

2. [Start creating a Node.js run configuration](running-and-debugging-node-js.html#Node.js_run) with the following mandatory settings:

1.

The Node.js engine to use. By default, the field shows the path to the runtime specified on the [JavaScript Runtime](javascript-runtime.html) page during Node.js configuration.

2.

In the Working directory field, specify the location of the files referenced from the starting CoffeeScript file to run, for example, includes. If this file does not reference any other files, just leave the field empty.

3.

In the Path to Node App JS File field, specify the full path to the JavaScript file that was generated from the original CoffeeScript file during the compilation.

3. Save the configuration and click Run  in the dialog.

Alternatively,   select the newly created run configuration from the list on the main toolbar and click ![the Run button](https://resources.jetbrains.com/help/img/idea/2026.2/app.expui.run.run.svg).

4. Proceed as while [running a Node.js application](running-and-debugging-node-js.html#running) .

Procedure: Compile CoffeeScript on the fly during run

1. This mode requires that the `register.js` file, which is a part of the `coffeescript` package, is located inside your project. Therefore, make sure you have the `coffeescript` package installed locally as described in [Install the CoffeeScript
compiler](#ws_coffee_installation).

2. Open the starting CoffeeScript file in the editor or select in the   Project tool window  (`Alt+1` (Windows), `⌘ 1` (macOS), `⌘ 1` (IntelliJ IDEA Classic (macOS)), `⌘ 1` (macOS System Shortcuts), `Alt+1` (XWin), `Alt+1` (GNOME), `Alt+1` (KDE), `Alt+1` (Emacs), `Alt+1` (Sublime Text), `⌘ 1` (Sublime Text (macOS)), `Ctrl+1` (NetBeans), `Ctrl+Alt+L` (Visual Studio), `⌘ ⌥ L` (Visual Studio (macOS)), `Alt+1` (Eclipse), `Alt+1` (Eclipse (macOS)))  and choose `Run <CoffeeScript_file_name>` from the context menu. IntelliJ IDEA runs the file with the automatically generated run/debug configuration.

Alternatively, select `Create <CoffeeScript_file_name>` from the context menu and check the following mandatory settings in the [Run/Debug Configuration: Node.js](run-debug-configuration-node-js.html) dialog that opens:

1.

The Node.js runtime to use. Select the relevant runtime configuration or create a new one. By default, the field shows the path to the runtime specified on the [JavaScript Runtime](javascript-runtime.html) page during Node.js configuration.

For Linux and macOS, this setting is overridden by the Node.js from the path to the CoffeeScript compiler executable file.

2.

In the Node parameters field, type `--require coffeescript/register`.

3.

In the Working directory field,  specify the [working directory](http://en.wikipedia.org/wiki/Working_directory) of the application.   By default, the field shows the project root folder.

4.

In the File field, specify the full path to the CoffeeScript file to run.

3. Save the configuration and click ![the Run button](https://resources.jetbrains.com/help/img/idea/2026.2/app.expui.run.run.svg) on the toolbar.

Alternatively,   select the newly created run configuration from the list on the main toolbar and click ![the Run button](https://resources.jetbrains.com/help/img/idea/2026.2/app.expui.run.run.svg).

4. Proceed as while [running a Node.js application](running-and-debugging-node-js.html#running) .

## Debugging CoffeeScript

To debug CoffeeScript in IntelliJ IDEA, you need source maps generated in addition to the JavaScript code. [Source maps](http://net.tutsplus.com/tutorials/tools-and-tips/source-maps-101/) set correspondence between lines in your CoffeeScript code and in the generated JavaScript code, otherwise your breakpoints will not be recognised and processed correctly. JavaScript and source maps are generated by compiling the CoffeeScript code manually using the File Watcher of the type CoffeeScript. After that you can debug the output JavaScript code as if it were a Node.js application.

> **Note:**
> Debugging of JavaScript code is only supported in [Google Chrome](http://www.google.com/chrome/) and in other [Chromium-based browsers](https://www.chromium.org/).

Debugging CoffeeScript is supported only in the local mode. This means that IntelliJ IDEA itself starts the Node.js engine and the target application according to a run configuration and gets full control over the session.

For more information about debugging Node.js applications, refer to [Running and debugging Node.js](running-and-debugging-node-js.html).

Procedure: Debug CoffeeScript code

1. Set the [breakpoints](using-breakpoints.html) in the CoffeeScript code where necessary.

2. [Compile the CoffeeScript code into Javascript](#ws_coffee_compilation_create_fw) using the File Watcher of the type CoffeeScript.

3. [Start creating a Node.js run configuration](running-and-debugging-node-js.html#Node.js_run)  with the following mandatory settings:

1.

The Node.js engine to use. By default, the field shows the path to the runtime specified on the [JavaScript Runtime](javascript-runtime.html) page during Node.js configuration.

2.

In the Working directory field, specify the location of the files referenced from the starting CoffeeScript file to run, for example, includes. If this file does not reference any other files, just leave the field empty.

3.

In the Path to Node App JS File field, specify the full path to the JavaScript file that was generated from the original CoffeeScript file during the compilation.

4. Save the configuration and click ![the Debug button](https://resources.jetbrains.com/help/img/idea/2026.2/app.expui.run.debug.svg) on the toolbar.

5. Proceed as when [starting the debugger
together
with a Node.js application locally](running-and-debugging-node-js.html#debugLocal).

## Refactoring CoffeeScript

In the CoffeeScript context, IntelliJ IDEA supports copying, renaming, moving, and safe deleting of files and folders, learn more from [Code refactoring](refactoring-source-code.html).

Procedure:

* To copy, rename, move, or delete safely a file or a folder, select it in the Project tool window and then select the relevant action from the context menu.

![Refactoring CoffeeScript - invoke actions from the Project tool window](https://resources.jetbrains.com/help/img/idea/2026.2/ws_coffee_refactoring_steps_project_tw.png)

* To move or copy a file, open it in the editor and then select `Refactor | Copy File` or `Refactor | Copy File` from the context menu.

![Refactoring CoffeeScript - invoke actions from the editor](https://resources.jetbrains.com/help/img/idea/2026.2/ws_coffee_refactoring_steps_editor.png)

## Configuring syntax highlighting

You can configure CoffeeScript-aware syntax highlighting according to your preferences and habits.

Procedure:

1. In the Settings dialog (`Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))), go to `Editor | Color Scheme | CoffeeScript`.

2. Select the color scheme, accept the highlighting settings inherited from the defaults or customize them as described in [Colors and fonts](configuring-colors-and-fonts.html).

## See also

### External Links

[http://coffeescript.org/](http://coffeescript.org/)

### Language and Framework-Specific Guidelines

[JavaScript](javascript-specific-guidelines.html)  [Node.js](developing-node-js-applications.html)