咖啡脚本
使用 PhpStorm,您可以使用可编译为 JavaScript 的CoffeeScript。PhpStorm 识别*.coffee文件并用 .coffee 标记它们。您可以直接在 CoffeeScript 代码中设置断点,PhpStorm 会使用编译期间生成的源映射来识别它们。
PhpStorm 通过建议关键字、标签、变量、参数和函数的补全来帮助您编写 CoffeeScript 代码。你可以从一个符号跳转到它的声明Ctrl+B或实现Ctrl+Alt+B,也可以通过它的名字找到任何符号Ctrl+Alt+Shift+N。
PhpStorm 与将 CoffeeScript 代码转换为 JavaScript 的coffeescript编译器集成。该工具还创建源映射,设置 CoffeeScript 代码和生成的 JavaScript 代码中的行之间的对应关系,以便 PhpStorm 调试器识别 CoffeeScript 代码中的断点并正确处理它们。
在你开始前
将 CoffeeScript 编译成 JavaScript
要自动编译您的代码,您需要配置一个CoffeeScript 文件观察器,它将跟踪您的文件的更改并运行 coffeescript 编译器。
当您打开文件时,PhpStorm 会检查当前项目中是否有可用的文件观察器。如果此类 File Watcher 已配置但已禁用,PhpStorm 会显示一个弹出窗口,通知您已配置的 File Watcher 并建议启用它。
如果在当前项目中配置并启用了适用的 File Watcher,PhpStorm 会在New Watcher 对话框中指定的事件时自动启动编译器。
如果选中自动保存编辑的文件以触发观察程序复选框,则只要对源代码进行任何更改,就会调用文件观察程序。
如果清除了自动保存编辑的文件以触发观察程序复选框,则文件观察程序在保存时启动( ,Ctrl+S)或当您从 PhpStorm 移动焦点时(在帧停用时)。
从File Watchers了解更多信息。
编译器将生成的输出存储在单独的文件中。该文件具有源CoffeeScript文件的名称和扩展名.js或.js.map,具体取决于编译器类型。生成文件的位置在New Watcher 对话框的Output paths to refresh字段中定义。基于此设置,PhpStorm 检测编译器输出。但是,在项目工具窗口中,它们显示在源咖啡文件下,该文件现在显示为一个节点。
安装 CoffeeScript 编译器
在嵌入式终端( Alt+F12) 中,键入以下命令之一:
npm install --global coffeescript
用于全局安装。npm install --save-dev coffeescript
将 CoffeeScript 安装为开发依赖项。从CoffeeScript 官方网站了解更多信息。
创建 CoffeeScript 文件观察器
自定义编译器行为的示例
使用 PhpStorm,您可以通过将参数传递给它来调整编译器,就像您在命令行模式下工作一样。下面是自定义CoffeeScript 编译器默认输出位置的两个示例。
假设您有一个具有以下文件夹结构的项目:
默认情况下,生成的文件将存储在原始文件所在的文件夹中。您可以更改此默认位置并将生成的文件存储在js文件夹中。此外,您可以将它们存储在平面列表中或排列在重复app
节点下原始结构的文件夹结构中。
将所有生成的文件存储在输出js文件夹中
在参数字段中,键入:
--output $ProjectFileDir$\js\$FileDirRelativeToProjectRoot$\ --compile --map $FileName$在要刷新的输出路径字段中,键入:
$ProjectFileDir$\js\$FileDirRelativeToProjectRoot$\$FileNameWithoutExtension$.js:$ProjectFileDir$\js\$FileDirRelativeToProjectRoot$\$FileNameWithoutExtension$.map结果,项目树如下所示:
无需运行编译器即可预览编译结果
PhpStorm 可以在不实际运行编译器的情况下对 CoffeeScript 代码执行静态分析,并在专用的只读查看器中显示预测的编译输出。
在编辑器中打开所需的 CoffeeScript 文件,然后右键单击编辑器背景。
从上下文菜单中,选择
。预览在专用的只读查看器中打开:左侧窗格显示原始 CoffeeScript 源代码,右侧窗格显示编译器运行时将生成的 JavaScript 代码。
运行 CoffeeScript
在 PhpStorm 中运行 CoffeeScript 有两种方法:
手动编译 CoffeeScript 代码,然后像运行 Node.js 应用程序一样运行输出的 JavaScript 代码。
通过 Node.js 运行配置运行原始 CoffeeScript 代码,并让 PhpStorm 即时编译它。
手动编译 CoffeeScript 并运行生成的 JavaScript 代码
使用以下强制性设置开始创建 Node.js 运行配置:
要使用的 Node.js 引擎。默认情况下,该字段显示Node.js 配置期间在Node.js页面上指定的解释器的路径。
在工作目录字段中,指定从要运行的起始 CoffeeScript 文件引用的文件的位置,例如,包括. 如果此文件不引用任何其他文件,则将该字段留空。场地
在Node App JS 文件的路径字段中,指定在编译期间从原始 CoffeeScript 文件生成的 JavaScript 文件的完整路径。
保存配置并单击工具栏上的 。
在运行期间即时编译 CoffeeScript
此模式要求作为包一部分的register.js
coffeescript
文件位于您的项目中。因此,请确保您已按照安装 CoffeeScript 编译器coffeescript
中的说明在本地安装了该软件包。在编辑器中打开开始的 CoffeeScript 文件或在Project工具窗口中选择并从上下文菜单中选择 PhpStorm 使用自动生成的运行/调试配置运行文件。
或者,从上下文菜单中选择Run/Debug Configuration: Node.js对话框中检查以下强制性设置:
保存配置并单击工具栏上的 。
调试 CoffeeScript
要在 PhpStorm 中调试 CoffeeScript,除了 JavaScript 代码之外,您还需要生成源映射。源映射设置 CoffeeScript 代码和生成的 JavaScript 代码中的行之间的对应关系,否则将无法正确识别和处理断点。JavaScript 和源映射是通过使用 CoffeeScript 类型的 File Watcher 手动编译 CoffeeScript 代码生成的。之后,您可以像调试 Node.js 应用程序一样调试输出的 JavaScript 代码。
仅在本地模式下支持调试 CoffeeScript。这意味着 PhpStorm 本身会根据运行配置启动 Node.js 引擎和目标应用程序,并完全控制会话。
有关调试 Node.js 应用程序的更多详细信息,请参阅运行和调试 Node.js。
调试 CoffeeScript 代码
必要时在 CoffeeScript 代码中设置断点。
使用 CoffeeScript 类型的 File Watcher将CoffeeScript代码编译成 Javascript。
使用以下强制性设置开始创建 Node.js 运行配置:
要使用的 Node.js 引擎。默认情况下,该字段显示Node.js 配置期间在Node.js页面上指定的解释器的路径。
在工作目录字段中,指定从要运行的起始 CoffeeScript 文件引用的文件的位置,例如,包括. 如果此文件不引用任何其他文件,则将该字段留空。
在Node App JS 文件的路径字段中,指定在编译期间从原始 CoffeeScript 文件生成的 JavaScript 文件的完整路径。
保存配置并单击工具栏上的 。
配置语法高亮
您可以根据自己的喜好和习惯配置可识别 CoffeeScript 的语法高亮。
在Settings/Preferences对话框 ( Ctrl+Alt+S) 中,转到 。
选择配色方案,接受从默认值继承的突出显示设置,或按照颜色和字体中的说明自定义它们。