IntelliJ IDEA
 
2023.2
快捷方式：Windows
获取 IntelliJ IDEA
  1. 非 JVM 技术
  2. CoffeeScript

最终的
CoffeeScript

最后修改时间：2023年9月8日

所需插件：

CoffeeScript- 在设置 | 安装插件 插件页面，选项卡Marketplace。该插件仅在 IntelliJ IDEA Ultimate 中可用。

File Watchers- 在设置 | 安装插件 插件页面，选项卡Marketplace。

借助 IntelliJ IDEA，您可以使用编译为 JavaScript 的CoffeeScript 。 IntelliJ IDEA 可以识别*.coffee文件并用 .coffee 标记它们CoffeeScript 图标。您可以直接在 CoffeeScript 代码中设置断点，IntelliJ IDEA 使用编译期间生成的源映射来识别它们。

IntelliJ IDEA 通过建议关键字、标签、变量、参数和函数的补充来帮助您编写 CoffeeScript 代码。您可以从符号跳转到其声明或实现，也可以通过其名称查找任何符号。Ctrl0BCtrlAlt0BCtrlAltShift0N

IntelliJ IDEA 与CoffeeScript编译器集成，将 CoffeeScript 代码转换为 JavaScript。该工具还创建源映射，设置 CoffeeScript 代码中的行与生成的 JavaScript 代码中的行之间的对应关系，以便 IntelliJ IDEA 调试器识别 CoffeeScript 代码中的断点并正确处理它们。

在你开始之前

将 CoffeeScript 编译为 JavaScript

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

当您打开文件时，IntelliJ IDEA 会检查当前项目中是否有适用的文件观察器。如果此类文件观察器配置但被禁用，IntelliJ IDEA 将显示一个弹出窗口，通知您有关已配置的文件观察器并启用建议。

如果在当前项目中配置并启用了适用的文件观察器，IntelliJ IDEA 会根据“新建观察器”对话框中指定的事件自动启动编译器。

  • 如果选中“自动保存已编辑的文件以触发观察器”，则只需对源代码进行任何更改，即可调用文件观察器。

  • 如果清除自动保存已编辑的文件以触发观察器组成，则文件观察器将在保存时启动（文件 | 保存）全部保存，）或者当您从IntelliJ IDEA移动焦点时（在框架失效时）。Ctrl0S

观察者从文件中了解更多信息。

编译器将生成的输出存储在单独的文件中。该文件具有来源CoffeeScript文件的名称和扩展名.js或.js.map，具体取决于编译器类型。生成文件的位置在“新建观察程序”对话框中框的“刷新输出路径”字段中定义。基于此设置，IntelliJ IDEA 检测编译器输出。但是，在“项目”工具窗口中，它们显示在源咖啡文件下，该文件现在显示为节点。

安装 CoffeeScript 编译器

创建CoffeeScript文件观察器

自定义编译器的行为

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

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

文件观察器文件夹结构示例

使用默认的文件观察器，生成的文件将显示原始文件的子文件。

默认文件观察器输出

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

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

  1. 创建一个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 代码执行静态分析，而无需实际运行编译器，并在专用的只读查看器中显示预测的编译输出。

最终的
运行 CoffeeScript

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

  • 手动编译 CoffeeScript 代码，然后运行输出的 JavaScript 代码，就好像它是 Node.js 应用程序一样。

  • 通过 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 文件，或在“项目”工具窗口中进行选择，然后从上下文菜单中选择“运行 <CoffeeScript_file_name>” 。IntelliJ IDEA 使用自动生成的运行/调试配置运行该文件。

    或者，从上下文菜单中选择“创建 <CoffeeScript_file_name>” ，然后在打开的“运行/调试配置：Node.js”对话框中检查以下强制设置：

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

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

    2. 在节点参数字段中，输入--require coffeescript/register。

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

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

  3. 保存配置并单击运行按钮工具栏上的 。

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

  4. 继续运行 Node.js 应用程序。

调试 CoffeeScript

要在 IntelliJ IDEA 中调试 CoffeeScript，除了 JavaScript 代码之外，您还需要生成源映射。源映射设置 CoffeeScript 代码和生成的 JavaScript 代码中的行之间的对应关系，否则您的断点将无法被正确识别和处理。JavaScript 和源映射是通过使用CoffeeScript类型的文件观察器手动编译 CoffeeScript 代码来生成的。之后，您可以像调试 Node.js 应用程序一样调试输出 JavaScript 代码。

笔记

仅Google Chrome和其他基于 Chromium 的浏览器支持 JavaScript 代码的调试。

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

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

调试 CoffeeScript 代码

  1. 必要时在 CoffeeScript 代码中设置断点。

  2. 使用CoffeeScript类型的文件观察器将CoffeeScript代码编译为Javascript。

  3. 开始使用以下强制设置创建Node.js运行配置：

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

    2. 在“工作目录”字段中，指定要运行的初始 CoffeeScript 文件引用的文件的位置，例如，包含。如果该文件没有引用任何其他文件，则填写字段留空。

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

  4. 保存配置并单击调试按钮工具栏上的。

  5. 与在本地启动调试器和 Node.js 应用程序时一样进行。

配置语法高亮

您可以根据您的喜好和习惯配置CoffeeScript 语法突出显示。

也可以看看

特定于语言和框架的指南

外部链接