IntelliJ IDEA 2025.1 Help

CoffeeScript

通过 IntelliJ IDEA,您可以使用 CoffeeScript 编译成 JavaScript。 IntelliJ IDEA 能识别 *.coffee 文件,并用 CoffeeScript 图标 标记它们。 您可以直接在 CoffeeScript 代码中设置断点,IntelliJ IDEA 使用编译期间生成的 source maps 来识别它们。

IntelliJ IDEA 通过为关键字、标签、变量、参数和函数提供自动完成建议,帮助您编写 CoffeeScript 代码。 您可以从符号跳转到其声明 Ctrl+B 或实现 Ctrl+Alt+B ,也可以通过名称查找任何符号 Ctrl+Alt+Shift+N

IntelliJ IDEA 与 coffeescript 编译器集成,将 CoffeeScript 代码转换为 JavaScript。 该工具还会创建 source maps ,在您的 CoffeeScript 代码与生成的 JavaScript 代码行之间建立对应关系,以便 IntelliJ IDEA 调试器识别 CoffeeScript 代码中的断点并正确处理它们。

开始之前

  1. 下载并安装 Node.js

  2. 按照 从 JetBrains Marketplace 安装插件 中的说明,在 设置 | 插件 页,选项卡 Marketplace 上安装并启用 CoffeeScript 插件。

  3. 安装并启用 File Watchers插件,在 设置 | 插件 页面, Marketplace 选项卡中,如 从 JetBrains Marketplace 安装插件中所述。

将 CoffeeScript 编译为 JavaScript

要自动编译您的代码,您需要配置一个 CoffeeScript File Watcher ,它将跟踪文件的更改并运行编译器。

当您打开一个文件时,IntelliJ IDEA 会检查当前项目中是否有可用的 File Watcher。 如果已配置此 File Watcher 但被禁用,IntelliJ IDEA 会显示一个弹出窗口,通知您已配置的 File Watcher 并建议启用它。

如果在当前项目中配置并启用了适用的 File Watcher,则 IntelliJ IDEA 会在 New Watcher 对话框 中指定的事件发生时自动启动编译器。

  • 如果选中了 自动保存编辑的文件以触发观察程序 复选框,则在对源代码进行任何更改后立即调用文件监视器。

  • 如果清除 自动保存编辑的文件以触发观察程序 复选框,File Watcher 会在保存时(文件 | 全部保存Ctrl+S )或当您将焦点从 IntelliJ IDEA 移开时(在界面失活时)启动。

了解更多 File Watchers

编译器将生成的输出存储在一个单独的文件中。 该文件的名称与源 CoffeeScript 文件相同,并且扩展名取决于编译器类型为 .js .js.map 。 生成文件的位置是在 要刷新的输出路径 字段的 “New Watcher”对话框中定义的。 根据此设置,IntelliJ IDEA 检测编译器输出。 但是,在 项目 工具窗口 Alt+1 中,它们显示在源文件 coffee 下,该文件现在显示为一个节点。

安装 CoffeeScript 编译器

  1. 在嵌入式 终端 (Alt+F12) 中,输入以下命令之一:

创建 CoffeeScript 文件监视器

  1. Ctrl+Alt+S 打开设置,然后选择 工具 | 文件观察器

  2. 点击 "添加"按钮 或按 Alt+Insert 并从列表中选择 CoffeeScript 预定义模板。 您的代码将被转换为 JavaScript,并生成 source maps

  3. 按照 File Watchers 中的描述进行操作。

自定义编译器的行为

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

假设您有一个具有以下文件夹结构的项目:

文件监听器示例文件夹结构

默认的 File Watcher 生成的文件将显示为其原始文件的子文件。

默认文件观察器输出

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

将所有生成的文件存储在 output JavaScript 文件夹中。

  1. 创建 CoffeeScript 文件监视器

    创建 CoffeeScript 文件监视器
  2. 实参 字段中,输入:

    --map --compile -o $ProjectFileDir$/JavaScript $FileName$
  3. 要刷新的输出路径 字段中,输入:

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

因此,项目树如下所示:

定制输出,扁平结构

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

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

  1. 创建一个 CoffeeScript 文件监视器。

  2. 实参 字段中,输入:

    --map --compile -o $ProjectFileDir$/JavaScript/$FileDirRelativeToProjectRoot$ $FileName$
  3. 要刷新的输出路径 字段中,输入:

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

因此,项目树如下所示:

自定义输出,文件夹结构保留

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

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

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

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

运行 CoffeeScript

要在 IntelliJ IDEA 中运行 CoffeeScript,有两种方法:

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

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

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

  1. 将 CoffeeScript 代码编译成 Javascript

  2. 开始创建一个 Node.js 运行配置 ,并设置以下必需的设置:

    1. 要使用的 Node.js 引擎。 默认情况下,该字段显示在 Node.js 配置期间在 Node.js 页面上指定的解释器路径。

    2. 工作目录 字段中,指定要运行的起始 CoffeeScript 文件中引用文件的位置,例如 includes。 如果此文件没有引用任何其他文件,请将该字段留空。

    3. Node App JS 文件路径 字段中,指定在编译过程中从原始 CoffeeScript 文件生成的 JavaScript 文件的完整路径。

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

    或者,从主工具栏的列表中选择新创建的运行配置,然后点击 运行按钮

  4. 运行 Node.js 应用程序 时一样。

运行时即时编译 CoffeeScript

  1. 这种模式要求 register.js 文件(属于 coffeescript 包)位于您的项目内。 因此,请确保您已在本地安装了 coffeescript 软件包,如 安装 CoffeeScript 编译器中所述。

  2. 在编辑器中打开起始 CoffeeScript 文件,或者在 项目 工具窗口 Alt+1 中选择该文件,并从上下文菜单中选择 运行 <CoffeeScript_file_name>。 IntelliJ IDEA 使用自动生成的运行/调试配置运行该文件。

    或者,从上下文菜单中选择 创建 <CoffeeScript_file_name> ,并在打开的 运行/调试配置:Node.js对话框中检查以下必选设置:

    1. 要使用的 Node 解释器。 选择相关的解释器配置或创建一个新的。 默认情况下,该字段显示在 Node.js 配置期间在 Node.js 页面上指定的解释器路径。

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

    2. Node 形参 字段中,输入 --require coffeescript/register

    3. 工作目录 字段中,指定应用程序的 工作目录。 默认情况下,该字段显示 项目根文件夹

    4. 文件 字段中,指定要运行的 CoffeeScript 文件的完整路径。

  3. 保存配置,然后点击工具栏上的 运行按钮

    或者,从主工具栏的列表中选择新创建的运行配置,然后点击 运行按钮

  4. 运行 Node.js 应用程序 时一样。

CoffeeScript 调试

要在 IntelliJ IDEA 中调试 CoffeeScript,您需要生成 JavaScript 代码和 source mapsSource maps 在您的 CoffeeScript 代码和生成的 JavaScript 代码之间建立对应关系,否则您的断点将无法被正确识别和处理。 JavaScript 和源映射是通过使用 CoffeeScript 类型的 File Watcher 手动编译 CoffeeScript 代码生成的。 之后,您可以像调试 Node.js 应用程序一样调试输出的 JavaScript 代码。

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

有关调试 Node.js 应用程序的更多信息,请参阅 运行和调试 Node.js

调试 CoffeeScript 代码

  1. 在 CoffeeScript 代码中根据需要设置 breakpoints

  2. 使用类型为 CoffeeScript的文件监视器将 CoffeeScript代码编译成 Javascript。

  3. 开始创建一个 Node.js 运行配置 ,并设置以下必需的设置:

    1. 要使用的 Node.js 引擎。 默认情况下,该字段显示在 Node.js 配置期间在 Node.js 页面上指定的解释器路径。

    2. 工作目录 字段中,指定要运行的起始 CoffeeScript 文件中引用文件的位置,例如 includes。 如果此文件没有引用任何其他文件,请将该字段留空。

    3. Node App JS 文件路径 字段中,指定在编译过程中从原始 CoffeeScript 文件生成的 JavaScript 文件的完整路径。

  4. 保存配置,然后点击工具栏上的 “调试”按钮

  5. 请按照 本地启动调试器与 Node.js 应用程序一起 的方式进行操作。

配置语法高亮

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

  1. 设置 对话框(Ctrl+Alt+S )中,前往 编辑器 | 颜色方案 | CoffeeScript

  2. 选择配色方案,接受从默认值继承的高亮设置,或按照 颜色和字体 中所述自定义它们。

最后修改日期: 2025年 4月 24日