# CoffeeScript

> For the complete documentation index, see [llms.txt](https://www.jetbrains.com/zh-cn/help/idea/llms.txt).

> **TL;DR**
> 所需插件：
>
>
>
> `CoffeeScript` ，  `File Watchers`  -  在   设置 | 插件   页面上安装插件。 插件仅在具有 Ultimate 订阅的 IntelliJ IDEA 中可用。

通过 IntelliJ IDEA，您可以使用 [CoffeeScript](http://coffeescript.org/) 编译成 JavaScript。 IntelliJ IDEA 能识别  `*.coffee`  文件，并用 ![CoffeeScript 图标](https://resources.jetbrains.com/help/img/idea/2026.3/coffeescript.org.coffeescript.images.coffeescript.svg) 标记它们。 您可以直接在 CoffeeScript 代码中设置断点，IntelliJ IDEA 使用编译期间生成的 source maps 来识别它们。

IntelliJ IDEA 通过为关键字、标签、变量、参数和函数提供自动完成建议，帮助您编写 CoffeeScript 代码。 您可以从符号跳转到其声明 `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)), `F12` (Visual Studio), `F12` (Visual Studio (macOS)), `Ctrl+B` (NetBeans), `F3` (Eclipse), `F3` (Eclipse (macOS)) 或实现 `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)), `Alt+End` (Visual Studio), `⌘ ⌥ Click` (Visual Studio (macOS)), `Ctrl+Alt+B` (NetBeans), `Ctrl+T` (Eclipse), `Ctrl+Alt+B` (Eclipse (macOS))，也可以通过名称查找任何符号 `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+T` (Visual Studio), `⌘ ⌥ ⇧ T` (Visual Studio (macOS)), `Ctrl+Alt+Shift+O` (NetBeans), `Ctrl+Alt+Shift+N` (Eclipse), `⌘ ⌥ O` (Eclipse (macOS))。

IntelliJ IDEA 与 [coffeescript](https://www.npmjs.com/package/coffeescript) 编译器集成，将 CoffeeScript 代码转换为 JavaScript。 该工具还会创建 [source maps](http://net.tutsplus.com/tutorials/tools-and-tips/source-maps-101/)，在您的 CoffeeScript 代码与生成的 JavaScript 代码行之间建立对应关系，以便 IntelliJ IDEA 调试器识别 CoffeeScript 代码中的断点并正确处理它们。

## 开始之前

Procedure:

1. 下载并安装 [Node.js](http://nodejs.org/#download)。

2. 安装  CoffeeScript  和  File Watchers  插件，位置在   设置 | 插件   页面，如 [从 JetBrains Marketplace 安装插件](managing-plugins.html#install_plugin_from_repo)中所述。 插件仅在具有 Ultimate 订阅的 IntelliJ IDEA 中可用。

> **Note:**
> 当您打开一个  `.coffee` 文件且未安装  CoffeeScript 插件时，IntelliJ IDEA 会显示一个窗格，建议您安装该插件。
>
>
>
> ![启用插件窗格](https://resources.jetbrains.com/help/img/idea/2026.3/ws_coffee_enable_plugin_pane.png)

## 将 CoffeeScript 编译为 JavaScript

要自动编译您的代码，您需要配置一个 [CoffeeScript File Watcher](#ws_coffee_compilation_create_fw)，它将跟踪文件的更改并运行编译器。

打开文件时，IntelliJ IDEA 会检查当前项目中是否有适用的文件关注者。 如果已配置此类文件关注者但其已禁用，IntelliJ IDEA 会显示一个弹出窗口，告知已配置的文件关注者并建议启用它。

如果当前项目中已配置并启用了适用的文件关注者，IntelliJ IDEA 会在 [新建关注者对话框](new-watcher-dialog.html) 中指定的事件发生时自动启动编译器。

* 如果选中 自动保存已编辑的文件以触发监视器 复选框，只要源代码发生任何更改，就会调用文件关注者。

* 如果清除 自动保存已编辑的文件以触发监视器 复选框，文件关注者会在保存时（ `文件 | 全部保存` 、 `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+Shift+S` (Visual Studio), `⌘ ⇧ S` (Visual Studio (macOS)), `Ctrl+S` (NetBeans), `Ctrl+S` (Eclipse), `⌘ S` (Eclipse (macOS))）或将焦点从 IntelliJ IDEA 移开时（帧停用时）启动。

有关更多信息，请参阅 [File Watchers](using-file-watchers.html)。

编译器将生成的输出存储在一个单独的文件中。 该文件的名称与源  CoffeeScript  文件相同，并且扩展名取决于编译器类型为  `.js`  或  `.js.map` 。 生成文件的位置在   要刷新的输出路径   字段中定义，该字段位于 [新建关注者对话框](new-watcher-dialog.html)。 根据此设置，IntelliJ IDEA 检测编译器输出。 但是，在   项目   工具窗口（ `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+Alt+L` (Visual Studio), `⌘ ⌥ L` (Visual Studio (macOS)), `Ctrl+1` (NetBeans), `Alt+1` (Eclipse), `Alt+1` (Eclipse (macOS))）中，它们显示在源  `咖啡`  文件下，该文件现在显示为一个节点。

### 安装 CoffeeScript 编译器

Procedure:

1. 在命令行 shell 或嵌入式   终端  （ `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)), `Ctrl+Alt+1` (Visual Studio), `⌘ ⌃ 1` (Visual Studio (macOS)), `Alt+F12` (NetBeans), `Alt+F12` (Eclipse), `⌥ F12` (Eclipse (macOS))）中，输入以下命令之一：

* `npm install --global coffeescript` 用于全局安装。

* `npm install --save-dev coffeescript` 将 CoffeeScript 安装为 [开发依赖项](https://docs.npmjs.com/getting-started/using-a-package.json#specifying-packages)。 请访问 [CoffeeScript 官方网站](http://coffeescript.org/#top) 了解更多信息。

### 创建 CoffeeScript 文件监视器

Procedure:

1. 按 `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` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS)) 打开设置，然后选择  `工具 | File Watchers` 。

2. 点击 !["添加"按钮](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.general.add.svg) 或按 `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)), `Ctrl+N` (Visual Studio), `⌘ N` (Visual Studio (macOS)), `Alt+Insert` (NetBeans), `Alt+Insert` (Eclipse), `⌘ N` (Eclipse (macOS)) 并从列表中选择   CoffeeScript   预定义模板。 您的代码将被转换为 JavaScript，并生成 [source maps](http://net.tutsplus.com/tutorials/tools-and-tips/source-maps-101/)。

3. 按照 [File Watchers](using-file-watchers.html) 中的说明进行操作。

> **Tip:**
> 还可以从命令行使用编译器，或 [将其配置为第三方工具](configuring-third-party-tools.html)。

### 自定义编译器的行为

使用 IntelliJ IDEA 时，您可以通过传递参数来调整编译器，就像在命令行模式下工作一样。 下面是自定义  CoffeeScript 编译器 默认输出位置的示例。

假设有一个项目，其文件夹结构如下：

![File Watchers 文件夹结构示例](https://resources.jetbrains.com/help/img/idea/2026.3/fileWatcherExampleImage1.png)

使用默认文件关注者时，生成的文件将显示为其原始文件的子项。

![默认文件关注者输出](https://resources.jetbrains.com/help/img/idea/2026.3/ws_coffee_example_default_fw_output.png)

可以更改此默认位置，并将生成的文件存储在单独的  `JavaScript`  文件夹中。

Procedure: 将所有生成的文件存储在输出 JavaScript 文件夹中

1. [创建 CoffeeScript 文件监视器](#ws_coffee_compilation_create_fw)。

![创建 CoffeeScript 文件监视器](https://resources.jetbrains.com/help/img/idea/2026.3/ws_coffee_example_create_file_watcher.png)

2. 在   参数   字段中，键入：

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

```

3. 在   要刷新的输出路径   字段中，键入：

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

```

因此，项目树如下所示：

![自定义输出，扁平结构](https://resources.jetbrains.com/help/img/idea/2026.3/fileWatcherExampleImage3.png)

还可以将生成的文件存储在  `app`  节点下重复原始结构的文件夹结构中。

Procedure: 在输出文件夹中保留原始文件夹结构

1. 创建 CoffeeScript 文件关注者。

2. 在   参数   字段中，键入：

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

```

3. 在   要刷新的输出路径   字段中，键入：

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

```

因此，项目树如下所示：

![自定义输出，文件夹结构保留](https://resources.jetbrains.com/help/img/idea/2026.3/ws_coffee_example_custom_fw_preserve_folder_structure.png)

### 在不运行编译器的情况下预览编译结果

IntelliJ IDEA 能够在不实际运行编译器的情况下执行 CoffeeScript 代码的静态分析，并在专用的只读查看器中显示预测的编译输出。

Procedure:

1. 在编辑器中打开所需的 CoffeeScript 文件，然后右键点击编辑器背景。

2. 从上下文菜单中选择  `预览已编译的 CoffeeScript 文件` 。 预览在专用的只读查看器中打开：左窗格显示原始 CoffeeScript 源代码，右窗格显示编译器运行时生成的 JavaScript 代码。

## 运行 CoffeeScript

要在 IntelliJ IDEA 中运行 CoffeeScript，有两种方法：

* 请手动编译 CoffeeScript 代码，然后像运行 Node.js 应用程序一样运行输出的 JavaScript 代码。

* 通过 Node.js 运行配置运行原始 CoffeeScript 代码，并让 IntelliJ IDEA 实时编译它。

Procedure: 手动编译 CoffeeScript 并运行生成的 JavaScript 代码

1. [将 CoffeeScript 代码编译成 Javascript](#ws_coffee_compilation)。

2. [开始创建 Node.js 运行配置](running-and-debugging-node-js.html#Node.js_run)，并使用以下必需设置：

1.

要使用的 Node.js 引擎。 默认情况下，该字段显示的是在 Node.js 配置期间于 [JavaScript 运行时](javascript-runtime.html) 页面指定的运行时路径。

2.

在   工作目录   字段中，指定要运行的起始 CoffeeScript 文件所引用文件的位置，例如  includes 。 如果该文件未引用任何其他文件，只需将此字段留空。

3.

在   Node App JS 文件路径   字段中，指定编译期间从原始 CoffeeScript 文件生成的 JavaScript 文件的完整路径。

3. 保存配置并在对话框中点击   运行  。

或者，从主工具栏的列表中选择新创建的运行配置，然后点击 ![运行按钮](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.run.run.svg)。

4. 按 [运行 Node.js 应用程序](running-and-debugging-node-js.html#running)时的方式继续。

Procedure: 运行时即时编译 CoffeeScript

1. 此模式要求  `register.js`  文件位于项目中，该文件是  `coffeescript`  软件包的一部分。 因此，请确保已在本地安装  `coffeescript`  软件包，如 [安装 CoffeeScript 编译器](#ws_coffee_installation)中所述。

2. 在编辑器中打开起始 CoffeeScript 文件，或在   项目   工具窗口（ `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+Alt+L` (Visual Studio), `⌘ ⌥ L` (Visual Studio (macOS)), `Ctrl+1` (NetBeans), `Alt+1` (Eclipse), `Alt+1` (Eclipse (macOS))）中选择该文件，然后从上下文菜单中选择  `运行 <CoffeeScript_file_name>` 。 IntelliJ IDEA 使用自动生成的运行/调试配置运行该文件。

或者，从上下文菜单中选择  `创建 <CoffeeScript_file_name>` ，并在打开的 [运行/调试配置：Node.js](run-debug-configuration-node-js.html)对话框中检查以下必选设置：

1.

要使用的 Node.js 运行时。 选择相应的运行时配置或新建一个配置。 默认情况下，该字段显示的是在 Node.js 配置期间于 [JavaScript 运行时](javascript-runtime.html) 页面指定的运行时路径。

对于 Linux 和 macOS，这一设置会被路径中的 Node.js CoffeeScript 编译器可执行文件覆盖。

2.

在   Node 参数  字段中，输入  `--require coffeescript/register` 。

3.

在   工作目录   字段中，指定应用程序的 [工作目录](http://en.wikipedia.org/wiki/Working_directory)。 默认情况下，该字段显示  项目根文件夹 。

4.

在   文件   字段中，指定要运行的 CoffeeScript 文件的完整路径。

3. 保存配置，然后点击工具栏上的 ![运行按钮](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.run.run.svg)。

或者，从主工具栏的列表中选择新创建的运行配置，然后点击 ![运行按钮](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.run.run.svg)。

4. 按 [运行 Node.js 应用程序](running-and-debugging-node-js.html#running)时的方式继续。

## CoffeeScript 调试

要在 IntelliJ IDEA 中调试 CoffeeScript，您需要生成 JavaScript 代码和  source maps 。 [Source maps](http://net.tutsplus.com/tutorials/tools-and-tips/source-maps-101/) 在您的 CoffeeScript 代码和生成的 JavaScript 代码之间建立对应关系，否则您的断点将无法被正确识别和处理。 JavaScript 和源映射是通过使用  CoffeeScript  类型的 File Watcher 手动编译 CoffeeScript 代码生成的。 之后，您可以像调试 Node.js 应用程序一样调试输出的 JavaScript 代码。

> **Note:**
> JavaScript 代码的调试仅在 [Google Chrome](http://www.google.com/chrome/)和其他 [Chromium-based browsers](https://www.chromium.org/)中受支持。

仅在  local 模式下支持调试 CoffeeScript。 这意味着 IntelliJ IDEA 本身根据运行配置启动 Node.js 引擎和目标应用程序，并完全控制会话。

有关调试 Node.js 应用程序的更多信息，请参阅 [运行和调试 Node.js](running-and-debugging-node-js.html)。

Procedure: 调试 CoffeeScript 代码

1. 在 CoffeeScript 代码中根据需要设置 [breakpoints](using-breakpoints.html)。

2. 使用类型为 [CoffeeScript](#ws_coffee_compilation_create_fw)的文件监视器将  CoffeeScript 代码编译成 Javascript。

3. [开始创建 Node.js 运行配置](running-and-debugging-node-js.html#Node.js_run)，并使用以下必需设置：

1.

要使用的 Node.js 引擎。 默认情况下，该字段显示的是在 Node.js 配置期间于 [JavaScript 运行时](javascript-runtime.html) 页面指定的运行时路径。

2.

在   工作目录   字段中，指定要运行的起始 CoffeeScript 文件所引用文件的位置，例如  includes 。 如果该文件未引用任何其他文件，只需将此字段留空。

3.

在   Node App JS 文件路径   字段中，指定编译期间从原始 CoffeeScript 文件生成的 JavaScript 文件的完整路径。

4. 保存配置，然后点击工具栏上的 ![调试按钮](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.run.debug.svg)。

5. 按 [在本地随 Node.js 应用程序一起启动调试器](running-and-debugging-node-js.html#debugLocal)时的方式继续。

## 重构 CoffeeScript

在 CoffeeScript 环境中，IntelliJ IDEA 支持复制、重命名、移动和安全删除文件及文件夹，了解详情请参阅 [代码重构](refactoring-source-code.html)。

Procedure:

* 要复制、重命名、移动或安全删除文件或文件夹，请在   项目   工具窗口中选择它，然后从上下文菜单中选择相关操作。

![重构 CoffeeScript - 从项目工具窗口调用操作](https://resources.jetbrains.com/help/img/idea/2026.3/ws_coffee_refactoring_steps_project_tw.png)

* 要移动或复制文件，请在编辑器中打开该文件，然后在上下文菜单中选择  `重构 | 复制文件`  或  `重构 | 复制文件` 。

![重构 CoffeeScript - 从编辑器调用操作](https://resources.jetbrains.com/help/img/idea/2026.3/ws_coffee_refactoring_steps_editor.png)

## 配置语法高亮

您可以根据您的偏好和习惯配置 CoffeeScript 语法高亮显示。

Procedure:

1. 在   设置   对话框（ `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` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))），转到  `编辑器 | 颜色方案 | CoffeeScript` 。

2. 选择配色方案，接受从默认设置继承的高亮设置，或按照 [颜色与字体](configuring-colors-and-fonts.html) 中的说明进行自定义。

## See also

### 外部链接

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

### 语言和框架特定指南

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