PyCharm 2025.2 Help

CoffeeScript

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

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

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

开始之前

  1. 请确保您的计算机上安装了 Node.js

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

  3. 请确保在设置中启用了 File Watchers 插件。 按下 Ctrl+Alt+S 打开设置,然后选择 插件。 点击 已安装 选项卡。 在搜索字段中,输入 File Watchers。 有关插件的更多信息,请参阅 插件管理

将 CoffeeScript 编译为 JavaScript

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

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

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

  • 如果选中了 自动保存已编辑的文件以触发监视器 复选框,一旦对源代码进行了任何更改,就会调用 File Watcher。

  • 如果 自动保存已编辑的文件以触发监视器 复选框被清除,File Watcher 会在保存时(文件 | 全部保存Ctrl+S )或当您将焦点从 PyCharm 移开时(当框架失去焦点时)启动。

请从 文件监视器 了解更多。

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

安装 CoffeeScript 编译器

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

    • npm install --global coffeescript 以全局安装。

    • npm install --save-dev coffeescript 将 CoffeeScript 安装为 开发依赖项

      请访问 CoffeeScript 官方网站 了解更多信息。

创建 CoffeeScript 文件监视器

  1. 按下 Ctrl+Alt+S 打开设置,然后选择 工具 | 文件监视器

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

自定义编译器的行为

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

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

File Watchers 文件夹结构示例

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

默认 File Watcher 输出

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

将所有生成的文件存储在输出 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 File Watcher。

  2. 参数 字段中,键入:

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

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

因此,项目树如下所示:

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

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

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

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

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

运行 CoffeeScript

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

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

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

手动编译 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>。 PyCharm 使用自动生成的运行/调试配置运行该文件。

    或者,从上下文菜单中选择 创建 <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 调试

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

仅在 local模式下支持调试 CoffeeScript。 这意味着 PyCharm 本身根据运行配置启动 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年 9月 26日