CoffeeScript
通过 CLion,您可以使用 CoffeeScript 编译成 JavaScript。 CLion 能识别 *.coffee 文件,并用 标记它们。 您可以直接在 CoffeeScript 代码中设置断点,CLion 使用编译期间生成的 source maps 来识别它们。
CLion 通过为关键字、标签、变量、参数和函数提供自动完成建议,帮助您编写 CoffeeScript 代码。 您可以从符号跳转到其声明 Ctrl+B 或实现 Ctrl+Alt+B ,也可以通过名称查找任何符号 Ctrl+Alt+Shift+N。
CLion 与 coffeescript 编译器集成,将 CoffeeScript 代码转换为 JavaScript。 该工具还会创建 source maps ,在您的 CoffeeScript 代码与生成的 JavaScript 代码行之间建立对应关系,以便 CLion 调试器识别 CoffeeScript 代码中的断点并正确处理它们。
在开始之前
下载并安装 Node.js。
按照 从 JetBrains Marketplace 安装插件 中的说明,在 设置 | 插件 页,选项卡 Marketplace 上安装并启用 CoffeeScript 插件。
安装并启用 File Watchers插件,在 设置 | 插件 页面, Marketplace 选项卡中,如 从 JetBrains Marketplace 安装插件中所述。
将 CoffeeScript 编译为 JavaScript
要自动编译您的代码,您需要配置一个 CoffeeScript File Watcher ,它将跟踪文件的更改并运行编译器。
当您打开一个文件时,CLion会检查当前项目中是否有适用的 File Watcher。 如果此类 File Watcher 已配置但已禁用,CLion 会显示一个弹出窗口,通知您已配置的 File Watcher 并建议启用它。
如果在当前项目中配置并启用了适用的 File Watcher,则 CLion 会在 新建监视器对话框 中指定的事件发生时自动启动编译器。
如果选中了 自动保存已编辑的文件以触发监视器 复选框,一旦对源代码进行了任何更改,就会调用 File Watcher。
如果 自动保存已编辑的文件以触发监视器 复选框被清除,File Watcher 会在保存时(, Ctrl+S )或当您将焦点从 CLion 移开时(当框架失去焦点时)启动。
请从 文件监视器 了解更多。
编译器将生成的输出存储在一个单独的文件中。 该文件的名称与源 CoffeeScript 文件相同,并且扩展名取决于编译器类型为 .js 或 .js.map 。 生成文件的位置是在 要刷新的输出路径 字段的 “New Watcher”对话框中定义的。 根据此设置,CLion 检测编译器输出。 然而,在 Project 工具窗口 Alt+1 中,它们显示在源 咖啡 文件下,该文件现在显示为一个节点。
安装 CoffeeScript 编译器
在嵌入式 终端 (Alt+F12) 中,输入以下命令之一:
npm install --global coffeescript以全局安装。npm install --save-dev coffeescript将 CoffeeScript 安装为 开发依赖项。请访问 CoffeeScript 官方网站 了解更多信息。
创建 CoffeeScript 文件监视器
按下 Ctrl+Alt+S 以打开设置,然后选择 。
点击
或按 Alt+Insert 并从列表中选择 CoffeeScript 预定义模板。 您的代码将被转换为 JavaScript,并生成 source maps。
自定义编译器的行为
使用 CLion 时,您可以通过传递参数来调整编译器,就像在命令行模式下工作一样。 下面是自定义 CoffeeScript 编译器 默认输出位置的一个示例。
假设,您有一个具有以下文件夹结构的项目:

默认情况下,使用文件监视器生成的文件将显示为其原始文件的子文件。

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

在 参数 字段中,键入:
--map --compile -o $ProjectFileDir$/JavaScript $FileName$在 要刷新的输出路径 字段中,键入:
$ProjectFileDir$/JavaScript/$FileNameWithoutExtension$.js:$ProjectFileDir$/JavaScript/$FileNameWithoutExtension$.map:$FileNameWithoutExtension$.js.map
因此,项目树如下所示:

您还可以将生成的文件存储在 app 节点下的原始结构重复的文件夹结构中。
在输出文件夹中保留原始文件夹结构
创建 CoffeeScript File Watcher。
在 参数 字段中,键入:
--map --compile -o $ProjectFileDir$/JavaScript/$FileDirRelativeToProjectRoot$ $FileName$在 要刷新的输出路径 字段中,键入:
$ProjectFileDir$/JavaScript/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.js:$ProjectFileDir$/JavaScript/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.map:$FileNameWithoutExtension$.js.map
因此,项目树如下所示:

在不运行编译器的情况下预览编译结果
CLion 能够在不实际运行编译器的情况下执行 CoffeeScript 代码的静态分析,并在专用的只读查看器中显示预测的编译输出。
在编辑器中打开所需的 CoffeeScript 文件,然后右键点击编辑器背景。
从上下文菜单中选择 。 预览在专用的只读查看器中打开:左窗格显示原始 CoffeeScript 源代码,右窗格显示编译器运行时生成的 JavaScript 代码。
运行 CoffeeScript
要在 CLion 中运行 CoffeeScript,有两种方法:
请手动编译 CoffeeScript 代码,然后像运行 Node.js 应用程序一样运行输出的 JavaScript 代码。
通过 Node.js 运行配置运行原始 CoffeeScript 代码,并让 CLion 实时编译它。
手动编译 CoffeeScript 并运行生成的 JavaScript 代码
开始创建一个 Node.js 运行配置 ,并设置以下必需的设置:
要使用的 Node.js 引擎。 默认情况下,该字段显示在 Node.js 配置期间在 Node.js 页面上指定的解释器路径。
在 工作目录 字段中,指定要运行的起始 CoffeeScript 文件引用的文件位置,例如, includes。 如果此文件不引用任何其他文件,则将字段留空。
在 Node App JS 文件路径 字段中,指定在编译过程中由原始 CoffeeScript 文件生成的 JavaScript 文件的完整路径。
保存配置并在对话框中点击 运行。
或者,从主工具栏的列表中选择新创建的运行配置并点击
。
按照 运行 Node.js 应用程序 的方式继续操作。
运行时即时编译 CoffeeScript
这种模式要求 register.js 文件(属于
coffeescript软件包)位于您的项目内。 因此,请确保您已按照 安装 CoffeeScript 编译器中的说明,在本地安装了coffeescript包。在编辑器中打开起始 CoffeeScript 文件,或在 Project 工具窗口 Alt+1 中选择它,然后从上下文菜单中选择 。 CLion 使用自动生成的运行/调试配置运行该文件。
或者,从上下文菜单中选择 ,并在打开的 运行/调试配置:Node.js对话框中检查以下必选设置:
保存配置,然后点击工具栏上的
。
或者,从主工具栏的列表中选择新创建的运行配置并点击
。
按照 运行 Node.js 应用程序 的方式继续操作。
CoffeeScript 调试
要在 CLion 中调试 CoffeeScript,您需要生成 JavaScript 代码和 source maps。 Source maps 在您的 CoffeeScript 代码和生成的 JavaScript 代码之间建立对应关系,否则您的断点将无法被正确识别和处理。 JavaScript 和源映射是通过使用 CoffeeScript 类型的 File Watcher 手动编译 CoffeeScript 代码生成的。 之后,您可以像调试 Node.js 应用程序一样调试输出的 JavaScript 代码。
仅在 local模式下支持调试 CoffeeScript。 这意味着 CLion 本身根据运行配置启动 Node.js 引擎和目标应用程序,并完全控制会话。
有关调试 Node.js 应用程序的更多信息,请参阅 运行和调试 Node.js。
调试 CoffeeScript 代码
在 CoffeeScript 代码中根据需要设置 breakpoints。
使用类型为 CoffeeScript的文件监视器将 CoffeeScript代码编译成 Javascript。
开始创建一个 Node.js 运行配置 ,并设置以下必需的设置:
要使用的 Node.js 引擎。 默认情况下,该字段显示在 Node.js 配置期间在 Node.js 页面上指定的解释器路径。
在 工作目录 字段中,指定要运行的起始 CoffeeScript 文件引用的文件位置,例如, includes。 如果此文件不引用任何其他文件,则将字段留空。
在 Node App JS 文件路径 字段中,指定在编译过程中由原始 CoffeeScript 文件生成的 JavaScript 文件的完整路径。
保存配置,然后点击工具栏上的
。
配置语法高亮
您可以根据您的偏好和习惯配置 CoffeeScript 语法高亮显示。
在 设置 对话框(Ctrl+Alt+S )中,转到 。
选择颜色方案,接受从默认设置继承的高亮设置,或按照 颜色和字体 中的描述自定义它们。