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