WebStorm 2021.1 Help

咖啡脚本

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

WebStorm 通过建议关键字、标签、变量、参数和函数的补全来帮助您编写 CoffeeScript 代码。你可以从一个符号跳转到它的声明Ctrl+B或实现Ctrl+Alt+B,也可以通过它的名字找到任何符号Ctrl+Alt+Shift+N

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

在你开始前

  1. 确保您的计算机上有Node.js。

  2. 确保在Settings/Preferences |上启用CoffeeScriptFile Watchers所需的插件。插件页面,选项卡Installed,有关详细信息,请参阅管理插件

将 CoffeeScript 编译成 JavaScript

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

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

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

  • 如果选中自动保存编辑的文件以触发观察程序复选框,则只要对源代码进行任何更改,就会调用文件观察程序。

  • 如果清除了自动保存编辑的文件以触发观察程序复选框,则文件观察程序会在保存时启动(文件 | 全部保存Ctrl+S)或当您从 WebStorm 移动焦点时(在帧停用时)。

从File Watchers了解更多信息。

编译器将生成的输出存储在单独的文件中。该文件具有源CoffeeScript文件的名称和扩展名.js.js.map,具体取决于编译器类型。生成文件的位置在New Watcher 对话框的Output paths to refresh字段中定义。基于此设置,WebStorm 检测编译器输出。但是,在项目工具窗口中,它们显示在源咖啡文件下,该文件现在显示为一个节点。

安装 CoffeeScript 编译器

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

创建 CoffeeScript 文件观察器

  1. Ctrl+Alt+S打开 IDE 设置并选择工具 | 文件观察者

  2. 单击添加按钮或按下Alt+Insert并从列表中选择CoffeeScript预定义模板。您的代码将被翻译成 JavaScript 并提供生成的源映射

  3. 程序字段中,指定coffee.cmd文件的路径。手动键入路径或单击浏览按钮并在打开的对话框中选择文件位置。

  4. 按照文件观察程序中的说明进行操作。

自定义编译器行为的示例

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

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

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

默认情况下,生成的文件将存储在原始文件所在的文件夹中。您可以更改此默认位置并将生成的文件存储在js文件夹中。此外,您可以将它们存储在平面列表中或排列在重复app节点下原始结构的文件夹结构中。

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

  1. 参数字段中,键入:

    --output $ProjectFileDir$\js\$FileDirRelativeToProjectRoot$\ --compile --map $FileName$
  2. 要刷新的输出路径字段中,键入:

    $ProjectFileDir$\js\$FileDirRelativeToProjectRoot$\$FileNameWithoutExtension$.js:$ProjectFileDir$\js\$FileDirRelativeToProjectRoot$\$FileNameWithoutExtension$.map

    结果,项目树如下所示:

    例子

无需运行编译器即可预览编译结果

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

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

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

运行 CoffeeScript

在 WebStorm 中运行 CoffeeScript 有两种方法:

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

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

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

  1. 将 CoffeeScript 代码编译成 Javascript

  2. 使用以下强制性设置开始创建 Node.js 运行配置:

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

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

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

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

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

在运行期间即时编译 CoffeeScript

  1. 此模式要求作为包一部分的register.jscoffeescript文件位于您的项目中。因此,请确保您已按照安装 CoffeeScript 编译器coffeescript中的说明在本地安装了该软件包。

  2. 在编辑器中打开开始的 CoffeeScript 文件或在Project工具窗口中选择并从上下文菜单中选择Run <CoffeeScript_file_name> 。WebStorm 使用自动生成的运行/调试配置运行文件。

    或者,从上下文菜单中选择Create <CoffeeScript_file_name>并在打开的Run/Debug Configuration: Node.js对话框中检查以下强制性设置:

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

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

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

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

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

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

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

调试 CoffeeScript

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

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

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

调试 CoffeeScript 代码

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

  2. 使用 CoffeeScript 类型的 File Watcher将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 的语法高亮。

  1. Settings/Preferences对话框 ( Ctrl+Alt+S) 中,转到Editor | 配色方案 | 咖啡脚本

  2. 选择配色方案,接受从默认值继承的突出显示设置,或按照颜色和字体中的说明自定义它们。

最后修改:2021 年 11 月 10 日