PhpStorm 2025.2 Help

文件监视器

File Watcher 是一个 一个 PhpStorm 系统,它跟踪文件的变化并运行第三方独立应用程序。 PhpStorm 提供了一些标准最受欢迎的的第三方工具(编译器 、压缩器、美化器等)的预定义文件监视器模板。

您还可以配置自定义 File Watcher 以运行其他任何第三方工具。

文件监视器有两个专用的 代码检查

  • 每个预定义的 File Watcher 适用的文件中都会运行 可用的 File Watcher检查。 如果项目没有配置相关的文件观察器,PhpStorm 建议添加一个。

  • 由正在运行的 File Watcher 调用的 File Watcher problems检查会突出显示特定于它的错误。

您可以使用现有的模板之一或从头开始配置 File Watcher。 配置好的 File Watcher 可以保存在您的项目设置或 IDE 设置中,并在不同的项目中使用。

有关特定工具的文件监视器的更多信息,请参阅相应页面:

请注意,在 PhpStorm 中使用其中的一些工具需要您在 设置 | 插件 页面上安装插件,如 从 JetBrains Marketplace 安装插件中所述。

开始之前

请确保在设置中启用了 File Watchers 插件。 按 Ctrl+Alt+S 打开设置,然后选择 Plugins。 点击 已安装 选项卡。 在搜索字段中输入 File Watchers。 有关插件的更多信息,请参阅 插件管理

创建文件观察器

  1. 设置 对话框(Ctrl+Alt+S )中,点击 文件监视器 下的 工具。 “ 文件监视器页面 ”打开,显示了该项目和 IDE 中已配置的文件监视器列表。

  2. 点击 "添加"按钮 并选择您要从中创建File Watcher的预定义模板。 选择取决于您将要使用的工具。 若要使用不在列表中的工具,请选择 自定义

    将 SCSS 编译为 CSS:创建一个 File Watcher

    New Watcher对话框打开。

  3. 名称 字段中,输入文件监视器的名称。 默认情况下,PhpStorm 会建议选定的预定义模板名称。

配置输入文件的预期类型和位置

请使用 要监视的文件 区域的控件定义您想要应用文件监视器的文件范围。

  1. 文件类型 列表中选择预期类型的输入文件。 文件监视器将只考虑这种类型的文件作为分析和处理的对象。 文件类型基于 文件类型与文件扩展名之间的关联进行识别。

    默认情况下,该字段根据所选的预定义模板显示文件类型。

  2. 请选择适用文件监视器的 范围

    SCSS 文件监视器:更改默认范围

    这些文件的更改将立即或在保存或窗口失去焦点时引发 File Watcher,这取决于 自动保存已编辑的文件以触发监视器 复选框的状态。

    从列表中选择一个预定义范围。 对于项目级文件监视器,您也可以点击 “浏览”按钮 ,在打开的 作用域 对话框中配置自定义范围。

    • 所有位置: 下述所有范围。

    • 项目文件: 项目内容根目录中的所有文件(请参阅 目录结构)。

    • 项目生产文件: 项目内容根目录内的所有文件,不包括测试源。

    • 项目测试文件: 项目测试源根目录中的所有文件。

    • 临时文件和控制台: 位于 临时文件与控制台 目录中的所有文件位于 Project 工具窗口。

    • 打开文件: 当前在编辑器中打开的所有文件。

    • 当前文件: 在活动编辑器选项卡中打开的文件。

    VCS 范围: 这些范围仅在您的 项目处于版本控制下时才可用。

    • 所有更改的文件: 所有已更改的文件,即与所有现有更改列表关联的所有文件。

    • 默认更改列表: 与变更列表相关的所有文件  默认.

    或者,点击 “浏览”按钮 并在打开的 自定义范围 对话框中配置 范围

  3. 可选地 :指定您希望 File Watcher 如何处理依赖项。 一个 root file 是一个未包括在(例如,通过 import指定范围内的任何其他文件中的文件。

    • 要仅针对根文件运行 File Watcher,请选择 仅跟踪根文件 复选框。

    • 清除该复选框以对调用它的文件以及在指定范围内递归包含此文件的所有文件运行 File Watcher。

    请注意, 范围 设置会覆盖 仅跟踪根文件 复选框设置:如果某个依赖超出了指定范围,文件监视器将不会应用于其。

配置与外部工具的交互

更改时运行的工具 区域,指定要使用的工具、传递给它的参数、预期的输出文件类型等。

  1. 程序(P) 字段中,指定工具的可执行文件的路径( .exe .cmd .bat 或其他,具体取决于具体的工具)。

  2. 实参(A) 字段中,定义传递给工具的参数。

    参数通常使用 指定,例如, $FileName$$FileNameWithoutExtension$ ,这些将被替换为实际的文件名。

    手动键入宏或点击 插入宏图标 ,然后在打开的 对话框中从列表中选择相关模式。

  3. 要刷新的输出路径(O) 字段中,指定工具存储其输出结果的文件:生成的源代码、源地图和依赖项。 基于这些设置,PhpStorm 识别通过编译生成的文件。

    通常使用 指定输出路径。 您可以手动输入它们或点击 插入宏图标 并在打开的对话框中从列表中选择相关项。

    要指定多个宏,请使用冒号 : 作为分隔符,例如, $FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map

  4. 展开 工作目录和环境变量 隐藏区域。

  5. 定义环境变量。 例如,为 您 正在配置但路径中未引用的工具指定 PATH 变量,其中包含启动该工具所需的工具。 在大多数情况下,它是 Node.jsruby.exe。 这种情况可能是由于使用自定义手动安装而非通过 Node Package Manager (npm) 或 gem manager 进行安装导致的。

  6. 工作目录(W) 字段中,指定工具将应用到的目录。

    因为该工具总是在文件的上下文中调用,所以默认工作目录是当前文件所在的目录。 所有预定义模板中都用 $FileDir$ 宏指定了默认工作目录。 若要指定自定义工作目录,请在字段中键入路径,或点击 浏览图标 并在 选择路径 对话框中选择目录,或点击 插入宏图标 并从 对话框的列表中选择所需的

配置高级选项

高级选项 区域,定制 File Watcher 的默认行为。

  1. 指定将触发 File Watcher 的事件:

    • 若要在对源代码进行任何更改后立即调用 File Watcher,请选中 自动保存已编辑的文件以触发监视器 复选框。

      清除复选框后,File Watcher 会在保存时启动(文件 | 全部保存 )或当您从 PhpStorm 移开焦点(在窗口失去焦点时)。

      自动保存已编辑文件关闭
    • 文件监视器默认在任何已保存的更改时唤醒,包括当您从版本控制系统收到更新时,例如检出分支。 要忽略此类更改并仅在您更新 PhpStorm 中的代码时调用 Watcher,请取消选中 在外部更改时触发监视器 复选框。

  2. 指定是否希望 File Watcher 与 PhpStorm 语法解析器进行交互:

    • 当选中 触发监视器,无论语法错误如何 复选框时,File Watcher 会在文件语法正确与否的情况下启动。 文件监视器将根据 自动保存已编辑的文件以触发监视器 复选框的状态在更新、保存或框架停用时启动。

    • 当清除 触发监视器,无论语法错误如何 复选框时,File Watcher 会忽略语法无效文件中的所有触发器,仅在无错误的文件中启动。

  3. 使用 从 stdout 创建输出文件 复选框来指定您希望如何生成输出文件。

    • 当选中复选框时,PhpStorm 会读取本机工具的输出 standard output stream (stdout) 并生成结果文件。

    • 选中复选框时,该工具会将其输出直接写入 要刷新的输出路径 字段中指定的文件。

  4. 显示控制台 列表中,选择您希望 File Watcher 何时打开控制台。

    • 始终: 启用此选项后,工具执行完成后控制台总会打开。

    • 出错时: 使用此选项,仅当 Exit code 不同于 0 时,控制台才会在工具执行后打开。

    • Never: 选择此选项可完全禁止打开控制台。

在编辑器中显示由 File Watcher 报告的信息

如果 File Watcher 中配置的工具报告了包含文件和特定行链接的代码错误或警告,您可以在编辑器中直接查看此信息:

  • 设置 | 编辑器 | 检查 中,启用检查 文件监视器问题

  • 输出过滤器 字段中, 编辑观察器 对话框描述您想匹配的输出格式。 请使用宏 $FILE_PATH$$LINE$$MESSAGE$。 您需要避免使用像大括号和点这样的特殊符号 \。 与 $MESSAGE$ 宏匹配的文本将显示在编辑器中。

示例

该工具以以下格式报告错误:

ERROR: /Users/Alice/WebstormProjects/angular-app/src/main.ts[6, 27]: " should be '

请使用以下正则表达式作为输出过滤器,以在编辑器中看到错误高亮:

ERROR: $FILE_PATH$\[$LINE$, $COLUMN$\]: $MESSAGE$

保存、启用与禁用 File Watchers

保存新的 File Watcher 后,您可以决定它是仅在当前项目中可用(从 Project 列表中选择 级别 )还是在所有项目中可用(选择 全局)。

全局文件监视器
  • 要启用或禁用 File Watcher,请打开 设置 对话框(Ctrl+Alt+S ),转到 工具 | 文件监视器 ,然后选中或清除其旁边的复选框。

  • 当您打开一个适用于预定义文件监视器的文件时,PhpStorm 会建议启用文件监视器:

    将 Less 编译为 CSS:从编辑器窗格中创建一个 File Watcher

    border-effect="line" />

  • 启用 File Watcher 后,只要选定范围内的选定类型文件被更改或保存,它就会自动启动,详见 配置高级选项

  • 如果在 File Watcher 运行时发生错误,File Watcher 会自动停用。 若要恢复状态,请手动启用 File Watcher。

在保存时自动运行文件监视器

您可以配置 IDE 在修改的文件中自动运行文件监视器,当您的更改 已保存时。

  1. Ctrl+Alt+S 打开设置,然后选择 工具 | 保存时的操作

  2. 启用 File Watcher 选项并应用更改。

为新项目启用全局文件监视器

Global 文件监视器可以在您将来创建的所有新项目中自动启用。

  • 打开 新项目设置 对话框 (文件 | 新建项目设置 | 新项目的 设置) ,转到 工具 | 文件监视器 ,并选中所需 File Watchers 旁边的复选框。

  • 或者,在 欢迎界面 上,从 配置 列表中选择 设置。 在打开的对话框中,选中相关 File Watchers 旁边的复选框。

自定义文件监视器中外部工具行为的示例

影响第三方工具的唯一方法是传递参数,就像您在命令行模式下工作一样。 这些参数是每个工具特有的。 下面是有关自定义默认输出位置的两个示例: SCSS compiler

自定义 SCSS 编译器

假设您的项目结构如下:

将 SCSS 编译成 CSS:项目结构

正如您所见, _grid.scss 被导入到 Page.scss 。 以下示例显示了如何在您手动或自动保存项目时,将 Page.scss 编译成 CSS,以及 _grid.scss 的更改如何反映在生成的 CSS 文件中。

  1. 创建一种类型为 SCSS 的 File Watcher:打开 设置 对话框(Ctrl+Alt+S ),转到 工具 | 文件监视器 ,单击工具栏上的 "添加"按钮 ,并从列表中选择 SCSS

    将 SCSS 编译为 CSS:创建一个 File Watcher
  2. 在打开的 新建 文件监视器 对话框中,所有必填字段都已填写。

    SCSS 文件监视器:设置

    其实,这些设置足以成功运行编译器。

  3. 让我们更改 grid.scss ,例如,将第 31 行的 margin-left: 0; 替换为 margin-left: 12px;。 这将触发我们的 File Watcher,编译器将处理 Page.scss 。 因此,会生成两个文件,并显示在 Page.scss 下:

    • Page.css 及编译后的 CSS 代码

    • Page.css.map 使用源映射,允许您在调试会话期间逐步执行应用程序。

    SCSS 文件监视器:生成的 CSS 文件

尽管默认设置足以成功运行编译器,但我们仍然仔细看看它们,以了解如何自定义 File Watcher 的行为。

更改触发文件观察者的操作

文件监视器会在您的项目被手动(文件 | 全部保存Ctrl+S )或自动保存后立即启动编译器。

通常,当您从 PhpStorm 移动焦点时(框架停用时),您的代码会自动保存。 使用 File Watchers 时,当您编辑 File Watcher 范围内的文件时,也会自动保存。 因此,转译器可能会在您输入时一直运行,这可能会导致性能问题。 要解决这个问题,请禁止自动保存编辑过的文件。

Ctrl+Alt+S 打开设置,然后选择 工具 | 文件监视器。 请选择所需的 File Watcher(SCSS 在我们的示例中),然后点击工具栏上的 编辑按钮。 在 编辑文件监视器 对话框中,展开 高级选项 区域,并清除 自动保存已编辑的文件以触发监视器 复选框。

自动保存已编辑文件关闭

默认情况下,即使从 PhpStorm 外部编辑其范围内的文件,File Watcher 仍会启动。 要覆盖此行为,并仅在内部编辑时转换文件,请清除 在外部更改时触发监视器 复选框。

外部更改触发 FileWatcher 已关闭

更改范围

默认情况下,PhpStorm 会监视整个项目中所有带有 .scss 扩展名的文件的更改。 这适用于我们的示例。 不过,您可以更改范围,例如,仅处理未提交的更改。 在大型项目中,这将节省时间。

Ctrl+Alt+S 打开设置,然后选择 工具 | 文件监视器。 请选择所需的 File Watcher(SCSS 在我们的示例中),然后点击工具栏上的 编辑按钮。 在 编辑文件监视器 对话框中,从列表中选择适用的范围。 从 文件范围与文件颜色 了解更多。

SCSS 文件监视器:更改默认范围

自定义输出位置

默认情况下,生成的 .css .css.map 文件存储在原始文件所在的文件夹中,并作为其子项显示在 Project 工具窗口 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 文件监视器,并将 css 文件夹作为输出位置。

Ctrl+Alt+S 打开设置,然后选择 工具 | 文件监视器。 然后创建一个 SCSS 文件监视器 如上所述

请按以下步骤更新默认设置:

  • 参数 字段中,键入:

    $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); ,PhpStorm会创建一个 css 文件夹,并将生成的 custom_output.css custom_output.css.map 文件存储在其中。

自定义设置:输出存储在单独的文件夹中

自定义输出位置:保留原始文件夹结构

现在让我们考虑一个示例,其中 .scss 文件存储在文件夹结构中,例如:

项目结构

默认的 File Watcher 会将生成的文件存储在原始 .scss 文件旁边。

自定义输出:生成的文件存储在源文件下

如果我们使用自定义 File Watcher 如上所述 ,所有生成的文件将存储在同一个 css 文件夹中:

自定义输出:生成的文件以简单的结构存储在单独的文件夹中

为了让 PhpStorm 保留文件夹结构,我们再创建一个自定义的 File Watcher。

Ctrl+Alt+S 打开设置,然后选择 工具 | 文件监视器。 然后创建一个 SCSS 文件监视器 如上所述

请按以下步骤更新默认设置:

  • 参数 字段中,键入:

    $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 ,PhpStorm 将创建一个 css 文件夹,子文件夹结构将保留 样式结构 的结构。

自定义设置:输出存储在单独的文件夹中,结构保留

自定义 CoffeeScript 编译器

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

File Watchers 文件夹结构示例

默认情况下,使用文件监视器生成的文件将显示为其原始文件的子文件。

默认 File Watcher 输出

您可以更改此默认位置,将生成的文件存储在单独的 JavaScript 文件夹中。

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

  1. 创建一个 CoffeeScript 文件监视器

    创建 CoffeeScript 文件监视器
  2. 参数 字段中,键入:

    --map --compile -o $ProjectFileDir$/JavaScript $FileName$
  3. 要刷新的输出路径 字段中,键入:

    $ProjectFileDir$/JavaScript/$FileNameWithoutExtension$.js:$ProjectFileDir$/JavaScript/$FileNameWithoutExtension$.map:$FileNameWithoutExtension$.js.map

因此,项目树如下所示:

自定义输出,扁平结构

您还可以将生成的文件存储在 应用程序 节点下的原始结构重复的文件夹结构中。

在输出文件夹中保留原始文件夹结构

  1. 创建 CoffeeScript File Watcher。

  2. 参数 字段中,键入:

    --map --compile -o $ProjectFileDir$/JavaScript/$FileDirRelativeToProjectRoot$ $FileName$
  3. 要刷新的输出路径 字段中,键入:

    $ProjectFileDir$/JavaScript/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.js:$ProjectFileDir$/JavaScript/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.map:$FileNameWithoutExtension$.js.map

因此,项目树如下所示:

自定义输出,文件夹结构保留

文件监视器故障排除

可能会显示一个弹出窗口,带有错误消息,同时通知您文件监视器已被禁用。

这里是可能出现的错误列表:

已报告的问题

问题描述

解决方法

Unknown Scope error

文件监视器使用在此项目中未定义的范围。

双击观察器并选择可用的作用域或创建一个新的。

Invalid executable

该项目使用了一个已被删除的全局 File Watcher。

使用 移除 按钮 移除 从列表中删除观察者,或编辑它以创建一个具有相同名称的新全局观察者。

PhpStorm 运行多个相同的 File Watcher 任务

在进行批量更新之后,例如来自您的 VCS,PhpStorm 会为每个保存的文件运行一个单独的 File Watcher 任务。

参数 字段中添加文件特定的宏(如 &FileNameWithoutExtension&), 请参阅 配置与外部工具的交互

最后修改日期: 2025年 9月 26日