PyCharm 2025.3 Help

CoffeeScript

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

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

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

开始之前

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

  2. 设置 | 插件 页面 的 Marketplace 选项卡中安装并启用 CoffeeScript 插件,具体步骤请参见 从 JetBrains Marketplace 安装插件

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

将 CoffeeScript 编译为 JavaScript

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

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

如果在当前项目中配置并启用了适用的文件监视器,PyCharm 会在 New Watcher dialog 中指定的事件发生时自动启动编译器。

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

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

了解详情,请参阅 文件监视器

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

安装 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,并附带生成的 源映射

自定义编译器的行为

借助 PyCharm,您可以像在命令行模式下一样,通过向编译器传递参数来调整其行为。 下面是自定义 CoffeeScript 编译器 默认输出位置的示例。

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

文件监视器的文件夹结构示例

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

默认文件监视器输出

您可以更改此默认位置,将生成的文件存储在单独的 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 文件监视器。

  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 配置期间的 JavaScript Runtime 页面上指定的运行时路径。

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

    3. Node 应用 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.js 运行时。 选择相关的运行时配置或创建新的配置。 默认情况下,该字段显示在 Node.js 配置期间的 JavaScript Runtime 页面上指定的运行时路径。

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

    2. Node 参数 字段中,键入 --require coffeescript/register

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

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

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

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

  4. 按照 运行 Node.js 应用程序 时的方式继续操作。

调试 CoffeeScript

要在 PyCharm 中调试 CoffeeScript,除了 JavaScript 代码外,您还需要生成 源映射源映射 在您的 CoffeeScript 代码与生成的 JavaScript 代码之间建立行对应关系,否则您的断点将无法被识别并正确处理。 使用类型为 CoffeeScript 的文件监视器手动编译 CoffeeScript 代码,以生成 JavaScript 和源映射。 之后,您可以像调试 Node.js 应用程序一样调试输出的 JavaScript 代码。

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

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

调试 CoffeeScript 代码

  1. 在需要的位置设置 CoffeeScript 代码中的 断点

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

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

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

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

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

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

  5. 按照 在本地与 Node.js 应用程序一起启动调试器 时的方式继续操作。

配置语法高亮显示

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

  1. 设置 对话框(Ctrl+Alt+S )中,转到 编辑器 | 配色方案 | CoffeeScript

  2. 选择配色方案,接受继承自默认设置的高亮显示设置,或按照 颜色与字体 中的说明进行自定义。

最后修改日期: 2025年 12月 2日