文件监视器
一个 File Watcher 是 一个 WebStorm 系统，用于跟踪文件更改并运行第三方独立应用程序。 WebStorm 提供多个预定义的文件监视器模板，适用于多种常见标准第三方工具（如 编译器 、压缩器、美化器等）。
您还可以配置自定义 File Watcher 来运行任何其他第三方工具。
File Watcher 具有两个专用 代码检查：
File Watcher available 检查会在每个适用的文件中运行预定义的文件监视器。 如果项目中尚未配置相关文件监视器，WebStorm 将建议添加一个。
File Watcher problems 检查由正在运行的文件监视器触发，突出显示其专属错误。
您可以使用现有模板之一，或从头开始配置 File Watcher。 配置好的 File Watcher 可以保存在项目设置或 IDE 设置中，并在不同项目中使用。
有关特定工具文件监视器的更多信息，请参阅相关页面：
请注意，在 WebStorm 中使用这些工具中的某些工具需要按照 从 JetBrains Marketplace 安装插件 中的说明，在 设置 | 插件 页面上安装插件。
开始之前
请确保在设置中启用了 File Watchers 插件。 按 Ctrl+Alt+S 打开设置，然后选择 。 单击 已安装 选项卡。 在搜索字段中输入 File Watchers。 如需了解有关插件的更多信息，请参阅 管理插件。
创建文件监视器
在 设置 对话框（Ctrl+Alt+S ）中，在 工具 下单击 文件监视器。 File Watchers 页面 将打开，并显示已在此项目和 IDE 中配置的 File Watcher 列表。
单击
，并从中选择要用于创建 File Watcher 的预定义模板。 所选内容取决于您要使用的工具。 如需使用列表中未列出的工具，请选择 自定义。
新建 Watcher 对话框将打开。
在 名称 字段中输入 File Watcher 的名称。 默认情况下，WebStorm 会建议使用所选预定义模板的名称。
配置输入文件的预期类型和位置
使用 要监视的文件 区域中的控件定义要应用 File Watcher 的文件范围。
从 文件类型 列表中选择输入文件的预期类型。 File Watcher 只会将此类型的文件视为需分析和处理的对象。 文件类型是根据 文件类型与文件扩展名之间的关联 识别的。
默认情况下，该字段会根据所选预定义模板显示文件类型。
选择适用于 File Watcher 的 作用域。
这些文件的更改将立即、保存时或窗口失焦时触发 File Watcher，具体取决于 自动保存已编辑文件以触发监视器 复选框的状态。
从列表中选择一个预定义作用域。 对于项目级别的 File Watcher，您还可以单击
，在随后打开的 范围 对话框中配置自定义作用域。所有位置： 以下列出的所有作用域。
项目文件： 项目内容根目录中的所有文件（请参阅 配置项目结构）。
项目生产文件： 项目内容根目录中除测试源之外的所有文件。
项目测试文件： 项目测试源根目录中的所有文件。
草稿与控制台：项目 工具窗口中的 草稿与控制台 目录中的所有文件。
打开的文件： 所有当前在编辑器中打开的文件。
当前文件： 当前活动编辑器标签中打开的文件。
版本控制范围： 这些作用域仅在 项目处于版本控制状态 时可用。
所有已更改文件： 所有已更改的文件，即与所有现有变更列表关联的所有文件。
默认变更列表： 与变更列表
Default相关联的所有文件。
或者，单击
，在打开的 Scopes 对话框中配置 自定义作用域。可选 ：指定 File Watcher 如何处理依赖项。 根文件是未被包含在其他文件中的文件（例如通过
import），并且位于 指定作用域内。若只需针对根文件运行 File Watcher，请选中 仅跟踪根文件 复选框。
取消选中该复选框，将对被调用的文件及该文件在指定作用域内所递归包含的所有文件运行 File Watcher。
请注意， 范围 设置会覆盖 仅跟踪根文件 复选框设置：如某个依赖项不在指定作用域内，则不会对其应用 File Watcher。
配置与外部工具的交互
在 变更时运行的工具 区域中指定要使用的工具、传递的参数、预期输出文件类型等。
在 程序(P) 字段中指定工具的可执行文件路径（ .exe 、 .cmd 、 .bat 或其他，具体取决于所用工具）。
在 实参(A) 字段中，定义传递给工具的参数。
参数通常通过使用 宏 来指定，例如
$FileName$或$FileNameWithoutExtension$，这些将会被实际的文件名所替换。手动输入宏，或单击
并在打开的 宏 对话框中从列表中选择相关模式。在 要刷新的输出路径(O) 字段中，指定工具存储其输出内容的文件：生成的源代码、source map 和依赖。 根据这些设置，WebStorm 能识别通过编译生成的文件。
输出路径通常使用 宏 指定。 您可以手动输入它们，或单击
，并在打开的对话框中从列表中选择所需的项。如需指定多个宏，请使用冒号
:作为分隔符，例如$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map。展开 工作目录与环境变量 隐藏区域。
定义环境变量。 例如，为启动配置工具所需但在路径中未引用的工具指定
PATH变量。 在大多数情况下，它是 Node.js 或 ruby.exe。 这种情况可能源于通过自定义手动安装，而非通过 Node Package Manager（npm）或 gem manager 进行的安装。在 工作目录(W) 字段中，指定要应用该工具的目录。
因为工具总是在文件的上下文中被调用，默认工作目录为当前文件所在的目录。 默认工作目录在所有预定义模板中由
$FileDir$宏指定。 要指定自定义工作目录，请在字段中输入路径，或单击
并在 选择路径 对话框中选择目录，或单击 并在 宏 对话框中从列表中选择所需的 宏。
配置高级选项
在 高级选项 区域中，自定义 File Watcher 的默认行为。
指定将触发 File Watcher 的事件：
要在源代码发生任何更改后立即触发 File Watcher，请选中 自动保存已编辑文件以触发监视器 复选框。
取消选中该复选框时，File Watcher 会在保存（ ）时或将焦点移出 WebStorm 时（即取消激活框架）启动。
默认情况下，File Watcher 会在任何保存的更改后被唤醒，包括例如检出分支时从版本控制系统接收的更新。 如需忽略此类更改，仅在您在 WebStorm 中更新代码时才触发 File Watcher，请取消选中 在外部更改时触发监视器 复选框。
指定是否希望 File Watcher 与 WebStorm 语法解析器进行交互：
选中 无论是否存在语法错误均触发监视器 复选框时，File Watcher 会忽略文件的语法正确性而启动。 File Watcher 将在更新、保存或取消激活框架时启动，具体取决于 自动保存已编辑文件以触发监视器 复选框的状态。
取消选中 无论是否存在语法错误均触发监视器 复选框时，File Watcher 将忽略语法无效文件中的所有触发器，仅在无错误的文件中启动。
使用 从标准输出创建输出文件 复选框指定希望如何生成输出文件。
选中该复选框时，WebStorm 读取原生工具的输出
standard output stream (stdout)，并由其生成结果文件。取消选中该复选框时，工具会将其输出直接写入 要刷新的输出路径 字段中指定的文件。
在 显示控制台 列表中选择希望 File Watcher 何时打开控制台。
始终： 此选项表示在工具执行完成后始终打开控制台。
出错时： 此选项表示仅当
Exit code与0不同时才在工具执行后打开控制台。从不： 选择此选项以完全不打开控制台。
在编辑器中显示文件监视器报告的信息
如果 File Watcher 中配置的工具报告了代码中的错误或警告，并包含对文件和特定行的链接，您可以在编辑器中直接查看此信息：
在 中启用检查 文件监视器问题。
在 编辑 File Watcher 对话框的 输出过滤器 字段中，描述您要匹配的输出格式。 为此使用宏
$FILE_PATH$、$LINE$和$MESSAGE$。 使用\时需要避免使用如大括号和点号之类的特殊符号。 与$MESSAGE$宏匹配的文本将在编辑器中显示。
示例
该工具按以下格式报告错误：
请使用以下正则表达式作为输出过滤器，以在编辑器中高亮显示错误：
保存、启用和禁用文件监视器
保存新的 File Watcher 后，您可以决定其仅在当前项目中可用（从 级别 列表中选择 项目 ），或在所有项目中可用（选择 全局）。
要启用或禁用 File Watcher，请打开 设置 对话框（Ctrl+Alt+S ），转到 ，然后选择或取消选中其旁边的复选框。
当您打开应用了预定义 File Watcher 的文件时，WebStorm 会建议启用该 File Watcher：
border-effect="line" />
启用 File Watcher 后，将在所选类型和范围的文件发生更改或保存时自动启动，请参阅 配置高级选项。
如果在运行 File Watcher 时发生错误，该 File Watcher 会自动被禁用。 要恢复状态，请手动启用 File Watcher。
保存时自动运行文件监视器
您可以配置 IDE，使其在您的更改被 保存 时，自动在已修改的文件中运行文件监视器。
按 Ctrl+Alt+S 打开设置，然后选择 。
启用 File Watcher 选项并应用更改。
为新项目启用全局文件监视器
全局 File Watcher 可在今后创建的所有新项目中自动启用。
打开 新项目的设置 对话框（ ），转到 ，然后选中所需 File Watcher 旁边的复选框。
或者，在 欢迎界面 中，从 配置 列表中选择 设置。 在打开的对话框中，选中相关 File Watcher 旁边的复选框。
自定义文件监视器中外部工具的行为示例
影响第三方工具的唯一方式是向其传递参数，就像在命令行模式下工作一样。 这些参数特定于每个工具。 以下是自定义 SCSS 编译器 默认输出位置的两个示例。
自定义 SCSS 编译器
假设您的项目结构如下：
如您所见， _grid.scss 被导入到 Page.scss 中。 以下示例展示了当您手动或自动保存项目时，如何将 Page.scss 编译为 CSS，以及对 _grid.scss 的更改如何反映在生成的 CSS 文件中。
创建 SCSS 类型的 File Watcher：打开 设置 对话框（Ctrl+Alt+S ），转到 ，点击工具栏上的
，然后从列表中选择 SCSS。打开的 新建 File Watcher 对话框中，所有必填字段已填写完毕。
实际上，这些设置已足以成功运行编译器。
让我们修改一下 grid.scss ，例如，将第 31 行中的
margin-left: 0;替换为margin-left: 12px;。 这将触发我们的 File Watcher，使编译器处理 Page.scss 。 由此会生成两个文件，并显示为嵌套在 Page.scss 下：Page.css ，包含编译后的 CSS 代码
Page.css.map ，包含可在调试过程中逐步执行应用的 source map。
尽管默认设置足以成功运行编译器，但我们仍然仔细查看这些设置，以了解如何自定义 File Watcher 行为。
更改触发文件监视器的操作
每当项目被手动（ 或 Ctrl+S ）或自动保存时，File Watcher 会唤醒并启动转译器。
通常，移动焦点离开 WebStorm（失去窗口焦点）时，代码会被自动保存。 使用 File Watcher 时，在编辑其范围内的文件时也会触发自动保存。 结果是每次键入都会不断触发转译器运行，可能导致性能问题。 为解决该问题，可禁止自动保存所编辑的文件。
按 Ctrl+Alt+S 打开设置，然后选择 。 选择所需的 File Watcher（在本示例中为 SCSS ），然后点击工具栏中的 
。 在 编辑 File Watcher 对话框中，展开 高级选项 区域，并取消选中 自动保存已编辑的文件以触发监视器 复选框。
默认情况下，即使作用域中的文件在 WebStorm 外部被编辑，File Watcher 也会激活。 若要更改此行为，仅在内部编辑时转译文件，请取消选中 在外部更改时触发监视器 复选框。
更改作用域
默认情况下，WebStorm 会监视整个项目中所有 .scss 扩展名文件的更改。 这在我们的示例中适用。 不过，您可以更改范围，例如仅处理未提交的更改。 在大型项目中这样做可以节省时间。
按下 Ctrl+Alt+S 打开设置，然后选择 。 选择所需的 File Watcher（在本示例中为 SCSS ），然后点击工具栏中的 。 在 编辑 File Watcher 对话框中，从列表中选择适用的范围。 请参阅 范围与文件颜色 了解更多信息。
自定义输出位置
默认情况下，生成的 .css 和 .css.map 文件将存储在原始文件所在的文件夹中，并在 项目 工具窗口 Alt+1 中作为其子项显示。 您可以更改此默认行为，将所有生成的 .css 和 .css.map 文件存储到单独的文件夹中。
我们从一个简单案例开始。 假设项目根目录中有一个 custom_output.scss 文件。
我们来编辑 custom_output.scss ，例如，将第 6 行的 fill-opacity: abs(50); 替换为 fill-opacity: abs(60);。 使用默认的 File Watcher 配置时，生成的文件 custom_output.css 和 custom_output.css.map 将存储在项目根目录中，并显示为 custom_output.scss 的子项。
将所有输出存储在单独的文件夹中会更为方便，例如 css 。 我们来创建一个自定义 SCSS_custom_output File Watcher，并将输出位置设置为 css 文件夹。
按下 Ctrl+Alt+S 打开设置，然后选择 。 然后 按照上述说明创建 SCSS File Watcher。
按照以下方式更新默认设置：
在 参数 字段中输入：
$FileName$:$ProjectFileDir$/css/$FileNameWithoutExtension$.css在 要刷新的输出路径 字段中输入：
$ProjectFileDir$/css/$FileNameWithoutExtension$.css:$ProjectFileDir$/css/$FileNameWithoutExtension$.css.map
保存新的 File Watcher 并确保已启用。
现在，如果编辑 custom_output.scss ，例如，将第 6 行的 fill-opacity: abs(50); 替换为 fill-opacity: abs(60); ，WebStorm 会创建一个 css 文件夹，并将生成的 custom_output.css 和 custom_output.css.map 文件保存其中。
自定义输出位置：保留原始文件夹结构
我们现在来看一个示例，其中 .scss 文件存储在目录结构内，例如：
使用默认的 File Watcher 时，生成的文件将存储在原始 .scss 文件旁边。
如果我们使用 如上所述 的自定义 File Watcher，所有生成的文件都将存储在同一个 css 文件夹中：
为了让 WebStorm 保留文件夹结构，我们将创建另一个自定义 File Watcher。
按下 Ctrl+Alt+S 打开设置，然后选择 。 然后 按照上述说明创建 SCSS File Watcher。
按照以下方式更新默认设置：
在 参数 字段中输入：
$FileName$:$ProjectFileDir$/css/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.css在 要刷新的输出路径 字段中输入：
$ProjectFileDir$/css/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.css:$ProjectFileDir$/css/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.css.map
保存新的 File Watcher 并确保已启用。
现在，如果您编辑 custom_output_body.scss 、 custom_output_header.scss 或 custom_output_footer.scss ，WebStorm 会创建一个 css 文件夹，其子文件夹结构保留了 styles_structured 的结构。
自定义 CoffeeScript 编译器
假设您有一个如下结构的项目：
使用默认的 File Watcher 时，生成的文件将显示为其原始文件的子项。
您可以更改此默认位置，将生成的文件存储到一个独立的 JavaScript 文件夹中。
将所有生成的文件存储在输出 JavaScript 文件夹中
创建一个 CoffeeScript File Watcher。
在 参数 字段中输入：
--map --compile -o $ProjectFileDir$/JavaScript $FileName$在 要刷新的输出路径 字段中输入：
$ProjectFileDir$/JavaScript/$FileNameWithoutExtension$.js:$ProjectFileDir$/JavaScript/$FileNameWithoutExtension$.map:$FileNameWithoutExtension$.js.map
最终，项目树如下所示：
您还可以将生成的文件存储在 app 节点下与原始结构相同的文件夹结构中。
在输出文件夹中保留原始文件夹结构
创建一个 CoffeeScript File Watcher。
在 参数 字段中输入：
--map --compile -o $ProjectFileDir$/JavaScript/$FileDirRelativeToProjectRoot$ $FileName$在 要刷新输出路径 字段中输入：
$ProjectFileDir$/JavaScript/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.js:$ProjectFileDir$/JavaScript/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.map:$FileNameWithoutExtension$.js.map
结果，项目树如下所示：
文件监视器故障排除
可能会显示一个弹出窗口，其中包含错误消息，同时告知您 File Watcher 已被禁用
以下是可能出现的错误列表：
报告的问题 | 问题描述 | 解决方法 |
|---|---|---|
| File Watcher 使用了此项目中未定义的范围。 | 双击该 watcher，并选择一个可用范围或创建一个新范围。 |
| 项目使用的是已被移除的全局 File Watcher。 | 使用 移除 按钮 |
WebStorm 运行了多个相同的 File Watcher 任务 | 例如，在从 VCS 执行批量更新后，WebStorm 会为每个已保存的文件分别运行一个 File Watcher 任务。 | 在 参数 字段中添加特定于文件的宏（例如 |
从列表中删除该 watcher，或对其进行编辑以创建具有相同名称的新全局 watcher。