CoffeeScript
通过 WebStorm，您可以使用 CoffeeScript 编译成 JavaScript。 WebStorm 能识别 *.coffee 文件，并用 
标记它们。 您可以直接在 CoffeeScript 代码中设置断点，WebStorm 使用编译期间生成的 source maps 来识别它们。
WebStorm 通过为关键字、标签、变量、参数和函数提供自动完成建议，帮助您编写 CoffeeScript 代码。 您可以从符号跳转到其声明 Ctrl+B 或实现 Ctrl+Alt+B ，也可以通过名称查找任何符号 Ctrl+Alt+Shift+N。
WebStorm 与 coffeescript 编译器集成，将 CoffeeScript 代码转换为 JavaScript。 该工具还会创建 source maps ，在您的 CoffeeScript 代码与生成的 JavaScript 代码行之间建立对应关系，以便 WebStorm 调试器识别 CoffeeScript 代码中的断点并正确处理它们。
开始之前
请确保您的计算机上安装了 Node.js。
按照 从 JetBrains Marketplace 安装插件 中的说明，在 设置 | 插件 页，选项卡 Marketplace 上安装并启用 CoffeeScript 插件。
请确保在设置中启用了 File Watchers 插件。 按 Ctrl+Alt+S 打开设置，然后选择 。 点击 已安装 选项卡。 在搜索字段中，输入 File Watchers。 有关插件的更多信息，请参阅 插件管理。
将 CoffeeScript 编译为 JavaScript
要自动编译您的代码，您需要配置一个 CoffeeScript File Watcher ，它将跟踪文件的更改并运行编译器。
当您打开文件时，WebStorm 会检查当前项目中是否有适用的文件监视器。 如果已配置此类文件监视器但被禁用，WebStorm 会显示一个弹出窗口，告知您已配置的文件监视器，并建议您启用它。
如果在当前项目中配置并启用了适用的文件监视器，WebStorm 会在 新建监视器对话框 中指定的事件发生时自动启动编译器。
如果选中 自动保存已编辑的文件以触发监视器 复选框，只要对源代码进行任何更改，文件监视器就会立即启动。
如果清除 自动保存已编辑的文件以触发监视器 复选框，文件监视器会在保存时（、 Ctrl+S ）或当您将焦点从 WebStorm 移开时（在帧停用时）启动。
有关更多信息，请参阅 文件监视器。
编译器将生成的输出存储在一个单独的文件中。 该文件的名称与源 CoffeeScript 文件相同，并且扩展名取决于编译器类型为 .js 或 .js.map 。 生成文件的位置是在 要刷新的输出路径 字段的 “New Watcher”对话框中定义的。 根据此设置，WebStorm 检测编译器输出。 但是，在 项目 工具窗口 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。按照 文件监视器 中的说明进行操作。
自定义编译器的行为
使用 WebStorm 时，您可以通过传递参数来调整编译器，就像在命令行模式下工作一样。 下面是自定义 CoffeeScript 编译器 默认输出位置的示例。
假设您有一个项目，其文件夹结构如下：
使用默认的文件监视器，生成的文件将显示为其原始文件的子项。
您可以将默认位置更改，并将生成的文件存储在一个单独的 JavaScript 文件夹中。
将所有生成的文件存储在输出 JavaScript 文件夹中
在 参数 字段中，键入：
--map --compile -o $ProjectFileDir$/JavaScript $FileName$在 要刷新的输出路径 字段中，键入：
$ProjectFileDir$/JavaScript/$FileNameWithoutExtension$.js:$ProjectFileDir$/JavaScript/$FileNameWithoutExtension$.map:$FileNameWithoutExtension$.js.map
因此，项目树如下所示：
您还可以将生成的文件存储在 app 节点下与原始结构一致的文件夹结构中。
在输出文件夹中保留原始文件夹结构
创建 CoffeeScript 文件监视器。
在 参数 字段中，键入：
--map --compile -o $ProjectFileDir$/JavaScript/$FileDirRelativeToProjectRoot$ $FileName$在 要刷新的输出路径 字段中，键入：
$ProjectFileDir$/JavaScript/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.js:$ProjectFileDir$/JavaScript/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.map:$FileNameWithoutExtension$.js.map
因此，项目树如下所示：
在不运行编译器的情况下预览编译结果
WebStorm 能够在不实际运行编译器的情况下执行 CoffeeScript 代码的静态分析，并在专用的只读查看器中显示预测的编译输出。
在编辑器中打开所需的 CoffeeScript 文件，然后右键点击编辑器背景。
从上下文菜单中选择 。 预览在专用的只读查看器中打开：左窗格显示原始 CoffeeScript 源代码，右窗格显示编译器运行时生成的 JavaScript 代码。
运行 CoffeeScript
要在 WebStorm 中运行 CoffeeScript，有两种方法：
请手动编译 CoffeeScript 代码，然后像运行 Node.js 应用程序一样运行输出的 JavaScript 代码。
通过 Node.js 运行配置运行原始 CoffeeScript 代码，并让 WebStorm 实时编译它。
手动编译 CoffeeScript 并运行生成的 JavaScript 代码
开始创建一个 Node.js 运行配置 ，并设置以下必需的设置：
要使用的 Node.js 引擎。 默认情况下，该字段显示的是在 Node.js 配置期间于 JavaScript 运行时 页面指定的运行时路径。
在 工作目录 字段中，指定要运行的起始 CoffeeScript 文件所引用文件的位置，例如， includes。 如果该文件不引用任何其他文件，只需将该字段留空。
在 Node App JS 文件路径 字段中，指定在编译期间由原始 CoffeeScript 文件生成的 JavaScript 文件的完整路径。
保存配置并在对话框中点击 运行。
或者，从主工具栏的列表中选择新创建的运行配置，然后点击
。按 运行 Node.js 应用程序 时的方式进行。
运行时即时编译 CoffeeScript
此模式要求 register.js 文件（其属于
coffeescript软件包）位于您的项目中。 因此，请确保您已按照 安装 CoffeeScript 编译器 中的说明在本地安装了coffeescript软件包。在编辑器中打开起始 CoffeeScript 文件，或者在 项目 工具窗口 Alt+1 中选择该文件，并从上下文菜单中选择 。 WebStorm 使用自动生成的运行/调试配置运行该文件。
或者，从上下文菜单中选择 ，并在打开的 运行/调试配置：Node.js对话框中检查以下必选设置：
要使用的 Node.js 运行时。 选择相应的运行时配置或新建一个配置。 默认情况下，该字段显示的是在 Node.js 配置期间于 JavaScript 运行时 页面指定的运行时路径。
对于 Linux 和 macOS，这一设置会被路径中的 Node.js CoffeeScript 编译器可执行文件覆盖。
在 Node.js 参数 字段中，输入
--require coffeescript/register。在 工作目录 字段中，指定应用程序的 工作目录。 默认情况下，该字段显示 项目根文件夹。
在 文件 字段中，指定要运行的 CoffeeScript 文件的完整路径。
保存配置，然后点击工具栏上的
。或者，从主工具栏的列表中选择新创建的运行配置，然后点击
。按 运行 Node.js 应用程序 时的方式进行。
CoffeeScript 调试
要在 WebStorm 中调试 CoffeeScript，您需要生成 JavaScript 代码和 source maps。 Source maps 在您的 CoffeeScript 代码和生成的 JavaScript 代码之间建立对应关系，否则您的断点将无法被正确识别和处理。 JavaScript 和源映射是通过使用 CoffeeScript 类型的 File Watcher 手动编译 CoffeeScript 代码生成的。 之后，您可以像调试 Node.js 应用程序一样调试输出的 JavaScript 代码。
仅在 local模式下支持调试 CoffeeScript。 这意味着 WebStorm 本身根据运行配置启动 Node.js 引擎和目标应用程序，并完全控制会话。
有关调试 Node.js 应用程序的更多信息，请参阅 运行和调试 Node.js。
调试 CoffeeScript 代码
在 CoffeeScript 代码中根据需要设置 breakpoints。
使用类型为 CoffeeScript的文件监视器将 CoffeeScript代码编译成 Javascript。
开始创建一个 Node.js 运行配置 ，并设置以下必需的设置：
要使用的 Node.js 引擎。 默认情况下，该字段显示的是在 Node.js 配置期间于 JavaScript 运行时 页面指定的运行时路径。
在 工作目录 字段中，指定要运行的起始 CoffeeScript 文件所引用文件的位置，例如， includes。 如果该文件不引用任何其他文件，只需将该字段留空。
在 Node App JS 文件路径 字段中，指定在编译期间由原始 CoffeeScript 文件生成的 JavaScript 文件的完整路径。
保存配置，然后点击工具栏上的
。按 在本地与 Node.js 应用程序一起启动调试器 时的方式进行。
配置语法高亮
您可以根据您的偏好和习惯配置 CoffeeScript 语法高亮显示。
在 设置 对话框（Ctrl+Alt+S ），转到 。
选择配色方案，接受从默认设置继承的高亮设置，或按照 颜色与字体 中的说明进行自定义。