# File Watchers

> For the complete documentation index, see [llms.txt](https://www.jetbrains.com/zh-cn/help/idea/llms.txt).

> **TL;DR**
> 必需插件  :
>
>
>
> `[File Watchers](https://plugins.jetbrains.com/plugin/7177-file-watchers)`  -  在   设置 | 插件   页面上安装插件。 该插件仅在拥有 Ultimate 订阅的 IntelliJ IDEA 中可用。

文件监视器  是 一个 IntelliJ IDEA 的工具，允许您在 IDE 中更改或保存文件时自动运行命令行工具，例如编译器、格式化工具或代码检查工具。

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

* 文件关注者可用 检查会在每个适用预定义文件关注者的文件中运行。 如果项目未配置相关的文件关注者，IntelliJ IDEA 会建议添加一个。

* 文件关注者问题 检查由正在运行的文件关注者调用，并高亮显示其特定错误。

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

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

* [压缩 JavaScript (terser)](minifying-javascript.html)

* [压缩 CSS (CSSO Optimizer)](compressing-css.html)

* [Sass、Less 和 SCSS](transpiling-sass-less-and-scss-to-css.html#less_sass_scss_compiling_to_css)

* [Compass 应用程序中的 Sass 和 SCSS](transpiling-compass-to-css.html#compass_compiling_sass_scss)

* [Stylus](transpiling-stylus-to-css.html#stylus_compilation)

* [CoffeeScript](coffeescript.html#ws_coffee_compilation)

请注意，在 IntelliJ IDEA 中使用其中的一些工具需要您在   设置 | 插件   页面上安装插件，如 [从 JetBrains Marketplace 安装插件](managing-plugins.html#install_plugin_from_repo)中所述。

## 开始之前

安装并启用  File Watchers  插件，在   设置 | 插件   页面上操作，如 [从 JetBrains Marketplace 安装插件](managing-plugins.html#install_plugin_from_repo)中所述。 该插件仅在拥有 Ultimate 订阅的 IntelliJ IDEA 中可用。

## 创建文件观察器

Procedure:

1. 在   设置   对话框（ `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))）中，点击   File Watchers   下的   工具  。 [File Watchers 页面](settings-tools-file-watchers.html)会打开，显示此项目和 IDE 中已配置的 File Watchers 列表。

2. 点击 !["添加"按钮](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.general.add.svg)并选择您要从中创建File Watcher的预定义模板。 选择取决于您将要使用的工具。 若要使用不在列表中的工具，请选择   自定义  。

![将 SCSS 编译为 CSS：创建文件关注者](https://resources.jetbrains.com/help/img/idea/2026.3/ws_scss_example_create_file_watcher.png)

[新建 Watcher](new-watcher-dialog.html) 对话框打开。

3. 在   名称   字段中，输入文件关注者的名称。 默认情况下，IntelliJ IDEA 会建议所选预定义模板的名称。

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

使用   要观察的文件   区域中的控件来定义要应用文件关注者的文件范围。

Procedure:

1. 从   文件类型  列表中选择预期类型的输入文件。 文件关注者将仅把此类型的文件视为分析和处理对象。 文件类型基于 [文件类型与文件扩展名之间的关联](creating-and-registering-file-types.html#register-new-association)进行识别。

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

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

![SCSS 文件关注者：更改默认作用域](https://resources.jetbrains.com/help/img/idea/2026.3/ws_scss_example_file_watcher_settings_change_scope.png)

这些文件中的更改会根据   自动保存已编辑的文件以触发监视器   复选框的状态，立即或在保存或框架停用时调用文件关注者。

从列表中选择一个预定义作用域。 对于项目级文件关注者，还可以点击 ![浏览按钮](https://resources.jetbrains.com/help/img/idea/2026.3/app.general.ellipsis.svg) 在打开的   作用域   对话框中配置自定义作用域。

* 所有位置： 以下列出的所有作用域。

* 项目文件： 项目内容根目录中的所有文件（请参阅 [内容根](content-roots.html)）。

* 项目生产文件： 项目内容根中的所有文件，不包括测试源。

* 项目测试文件： 项目测试源根目录中的所有文件。

* 临时文件和控制台： 位于 项目 工具窗口中的 临时文件和控制台 目录中的所有文件。

* 打开的文件： 当前在编辑器中打开的所有文件。

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

VCS 范围：   这些范围仅在您的 [项目处于版本控制下](enabling-version-control.html#associate_project_with_VCS)时才可用。

* 所有更改的文件： 所有已更改的文件，即与所有现有更改列表关联的所有文件。

* 默认更改列表： 与更改列表  `默认` 关联的所有文件。

或者，点击 ![浏览按钮](https://resources.jetbrains.com/help/img/idea/2026.3/app.general.ellipsis.svg)，并在打开的  作用域  对话框中配置  自定义作用域 。

3. 可选地 ：指定您希望 File Watcher 如何处理依赖项。  根文件 是未（例如通过  `import` ）包含在 [指定作用域内](new-watcher-dialog.html#scope)的任何其他文件中的文件。

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

* 清除此复选框可针对调用文件关注者的文件，以及在指定作用域内递归包含此文件的所有文件运行文件关注者。

请注意，   范围   设置会重写   仅跟踪根文件   复选框设置：如果依赖项位于指定作用域之外，则不会对其应用文件关注者。

> **Note:**
> 此选项仅适用于  Babel 、  Closure 编译器 、  Jade 、  Less 、  Sass /  SCSS 、  Stylus  和  UglifyJS (terser) 。

## 配置与外部工具的交互

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

Procedure:

1. 在   程序   字段中，指定工具的可执行文件的路径（  `.exe` 、  `.cmd` 、  `.bat`  或其他，具体取决于具体的工具）。

> **Tip:**
> * 要使用程序文件名而不是其完整路径，请将其文件夹的路径添加到 `路径` 环境变量中。
>
> * 在 Windows 上，可以省略 `.com` 、 `.exe` 、 `.cmd` 或 `.bat` 扩展程序。
>
> * 要使用 `jar` 归档，请指定其绝对路径。 或者，为了使用相对路径，请将其父文件夹添加到 [IntelliJ IDEA 路径变量](absolute-path-variables.html) 中，在 外观 & 行为 | 路径变量 设置页面 `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))。

2. 在   参数  字段中，定义传递给工具的参数。

参数通常使用 [宏](built-in-macros.html)指定，例如，  `$FileName$` 或  `$FileNameWithoutExtension$` ，这些将被替换为实际的文件名。

手动输入宏，或点击 ![插入宏图标](https://resources.jetbrains.com/help/img/idea/2026.3/app.general.inlineAddHover.svg)，并在打开的   宏   对话框的列表中选择相关模式。

> **Tip:**
> 指定实参时，请遵循以下规则：
>
> * 使用空格作为分隔符。
>
> * 如果实参包含空格，请将其或整个实参用双引号括起来： `some" "arg` 或 `"some arg"` 。
>
> * 如果实参包含双引号，请使用反斜杠对其进行转义： `-Dmy.prop="quoted_value"\` 。

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

通常使用 [宏](built-in-macros.html) 指定输出路径。 可以手动输入它们，或点击 ![插入宏图标](https://resources.jetbrains.com/help/img/idea/2026.3/app.general.inlineAddHover.svg)，并在打开的对话框的列表中选择相关项。

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

> **Note:**
> 更改   要刷新的输出路径   字段中的值不会让工具将其输出存储到其他位置。 如果仍需要这样做，请在   参数   字段中指定所需的自定义输出位置：使用冒号作为分隔符输入输出路径，并使用宏。

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

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

6. 在   工作目录  字段中，指定工具将应用到的目录。

由于工具始终在文件上下文中调用，因此默认工作目录是当前文件的目录。 默认工作目录在所有预定义模板中通过  `$FileDir$`  宏指定。 要指定自定义工作目录，请在字段中输入其路径，或点击 ![浏览图标](https://resources.jetbrains.com/help/img/idea/2026.3/app.general.openDiskHover.svg) 并在   选择路径   对话框中选择目录，或点击 ![插入宏图标](https://resources.jetbrains.com/help/img/idea/2026.3/app.general.inlineAddHover.svg) 并选择所需的 [宏](built-in-macros.html)（位于   宏   对话框的列表中）。

> **Tip:**
> 如果您将   工作目录   字段留空，IntelliJ IDEA 将使用调用 File Watcher 的文件目录。

## 配置高级选项

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

Procedure:

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

* 若要在对源代码进行任何更改后立即调用 File Watcher，请选中 自动保存已编辑的文件以触发监视器 复选框。 清除此复选框后，文件关注者会在保存（ `文件 | 全部保存` ）时或当焦点从 IntelliJ IDEA 移开时（框架停用）启动。 ![已关闭自动保存已编辑的文件](https://resources.jetbrains.com/help/img/idea/2026.3/ws_scss_example_file_watcher_autosave_on_edit_off.png)

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

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

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

* 当清除 无论是否存在语法错误都触发关注者 复选框时，File Watcher 会忽略语法无效文件中的所有触发器，仅在无错误的文件中启动。

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

* 当选中复选框时，IntelliJ IDEA 会读取本机工具的输出 `标准输出流 (stdout)` 并生成结果文件。

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

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

* 始终： 使用此选项时，工具执行完成后始终打开控制台。

* 出错时： 使用此选项时，仅当 `退出代码` 不同于 `0` 时，工具执行后才会打开控制台。

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

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

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

* 在 `设置 | 编辑器 | 检查` 中，启用检查 文件监视器问题 。

* 在 输出过滤器 字段（位于 [编辑关注者](new-watcher-dialog.html) 对话框）中，描述要匹配的输出格式。 请使用宏 `$FILE_PATH$` 、 `$LINE$` 和 `$MESSAGE$` 。 您需要避免使用像大括号和点这样的特殊符号 `\` 。 与 `$MESSAGE$` 宏匹配的文本将显示在编辑器中。

### 示例

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

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

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

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

> **Tip:**
> 您还可以使用 Output filter 使监视器的输出中的路径可点击。

## 保存、启用与禁用 File Watchers

> **Warning:**
> 在  安全模式 下打开项目时，File Watchers 不会启动。 更多信息请参阅 [项目安全](project-security.html)。

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

![全局文件监视器](https://resources.jetbrains.com/help/img/idea/2026.3/ws_enable_global_watcher.png)

Procedure:

* 要启用或禁用 File Watcher，请打开   设置   对话框（ `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))），转到  `工具 | File Watchers` ，然后选中或清除其旁边的复选框。

* 当您打开一个适用于预定义 File Watcher 的文件时，IntelliJ IDEA 会建议启用该 File Watcher：

![将 Less 编译为 CSS：从编辑器窗格中创建一个 File Watcher](https://resources.jetbrains.com/help/img/idea/2026.3/ws_less_example_create_file_watcher_from_pane.png)

* 启用文件关注者后，只要所选类型且位于所选作用域内的文件被更改或保存，它就会自动启动，请参阅 [配置高级选项](#ws_filewatcher_advanced_options)。

* 如果文件关注者运行时发生错误，该文件关注者会被自动禁用。 若要恢复状态，请手动启用 File Watcher。

Procedure: 为新项目启用全局 File Watchers

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

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

* 或者，在 [欢迎界面](null) 上，从   配置   列表中选择   设置  。 在打开的对话框中，选中相关 File Watchers 旁边的复选框。

## 自定义 File Watcher 中外部工具行为的示例

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

### 自定义 SCSS 编译器

假设您的项目结构如下：

![将 SCSS 编译成 CSS：项目结构](https://resources.jetbrains.com/help/img/idea/2026.3/ws_scss_example_project_structure.png)

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

Procedure:

1. 创建一种类型为   SCSS   的 File Watcher：打开   设置   对话框（ `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))），转到  `工具 | File Watchers` ，点击工具栏上的 !["添加"按钮](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.general.add.svg)，并从列表中选择   SCSS  。

![将 SCSS 编译为 CSS：创建文件关注者](https://resources.jetbrains.com/help/img/idea/2026.3/ws_scss_example_create_file_watcher.png)

2. 在打开的   新建文件关注者   对话框中，所有必填字段都已填写。

![SCSS 文件监视器：设置](https://resources.jetbrains.com/help/img/idea/2026.3/ws_scss_example_file_watcher_settings.png)

实际上，这些设置足以成功运行编译器。

3. 让我们更改  `grid.scss` ，例如，将第 31 行的  `margin-left: 0;` 替换为  `margin-left: 12px;` 。 这会触发我们的文件关注者，编译器会处理  `Page.scss` 。 结果，将生成两个文件，并以嵌套形式显示在  `Page.scss`  下：

* 包含已编译 CSS 代码的 `Page.css`

* 包含源代码映射的 `Page.css.map` ，可在调试会话期间逐步执行应用。

![SCSS 文件关注者：已生成 CSS 文件](https://resources.jetbrains.com/help/img/idea/2026.3/ws_scss_example_file_watcher_css_filed_generated.png)

虽然默认设置足以成功运行编译器，但仍可仔细查看这些设置，了解如何自定义文件关注者的行为。

#### 更改触发文件监视器的操作

项目手动（  `文件 | 全部保存`  或 `Ctrl+S` (Windows), `⌘ S` (macOS), `⌘ S` (IntelliJ IDEA Classic (macOS)), `⌘ S` (macOS System Shortcuts), `Ctrl+S` (XWin), `Ctrl+S` (GNOME), `Ctrl+S` (KDE), `Ctrl+X, Ctrl+S` (Emacs), `Ctrl+S` (Sublime Text), `⌘ S` (Sublime Text (macOS)), `Ctrl+Shift+S` (Visual Studio), `⌘ ⇧ S` (Visual Studio (macOS)), `Ctrl+S` (NetBeans), `Ctrl+S` (Eclipse), `⌘ S` (Eclipse (macOS))）或自动保存后，文件关注者会立即唤醒并启动转译器。

一般来说，当焦点从 IntelliJ IDEA 移开时（帧停用时），代码会自动保存。 使用 File Watchers 时，编辑属于文件关注者作用域的文件时也会执行自动保存。 因此，在输入时，转译器可能会一直运行，这可能导致性能问题。 为解决该问题，请抑制自动保存已编辑的文件。

按 `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS)) 打开设置，然后选择  `工具 | File Watchers` 。 选择所需的文件关注者（本示例中为   SCSS  ），然后点击工具栏上的 ![编辑按钮](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.general.edit.svg)。 在   编辑文件关注者   对话框中，展开   高级选项   区域并清除   自动保存已编辑的文件以触发监视器   复选框。

![已关闭自动保存已编辑的文件](https://resources.jetbrains.com/help/img/idea/2026.3/ws_scss_example_file_watcher_autosave_on_edit_off.png)

默认情况下，即使从 IntelliJ IDEA 外部编辑其作用域内的文件，文件关注者也会唤醒。 要重写此行为并仅在内部编辑时转译文件，请清除   在外部更改时触发监视器   复选框。

![“外部更改时触发文件关注者”已关闭](https://resources.jetbrains.com/help/img/idea/2026.3/ws_scss_example_file_watcher_on_external_changes_off.png)

#### 更改范围

默认情况下，IntelliJ IDEA 会监视整个项目中所有具有  `.scss`  扩展程序的文件的更改。 这适用于我们的示例。 不过，可以更改要处理的作用域，例如仅处理未提交的更改。 在大型项目中，这将节省时间。

按 `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS)) 打开设置，然后选择  `工具 | File Watchers` 。 选择所需的文件关注者（本示例中为   SCSS  ），然后点击工具栏上的 ![编辑按钮](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.general.edit.svg)。 在   编辑文件关注者   对话框中，从列表中选择适用的作用域。 了解详情，请参阅 [文件范围与文件颜色](configuring-scopes-and-file-colors.html)。

![SCSS 文件关注者：更改默认作用域](https://resources.jetbrains.com/help/img/idea/2026.3/ws_scss_example_file_watcher_settings_change_scope.png)

#### 自定义输出位置

默认情况下，生成的  `.css`  和  `.css.map`  文件存储在原始文件所在的文件夹中，并作为其子项显示在   项目   工具窗口（ `Alt+1` (Windows), `⌘ 1` (macOS), `⌘ 1` (IntelliJ IDEA Classic (macOS)), `⌘ 1` (macOS System Shortcuts), `Alt+1` (XWin), `Alt+1` (GNOME), `Alt+1` (KDE), `Alt+1` (Emacs), `Alt+1` (Sublime Text), `⌘ 1` (Sublime Text (macOS)), `Ctrl+Alt+L` (Visual Studio), `⌘ ⌥ L` (Visual Studio (macOS)), `Ctrl+1` (NetBeans), `Alt+1` (Eclipse), `Alt+1` (Eclipse (macOS))）中。 您可以更改此默认行为，将所有生成的  `.css` 和  `.css.map` 文件存储在单独的文件夹中。

先从一个简单的情况开始。 假设项目根目录中有一个  `custom_output.scss`  文件。

![项目结构](https://resources.jetbrains.com/help/img/idea/2026.3/ws_scss_example_custom_output_project_structure_plain.png)

我们来编辑  `custom_output.scss` ，例如，将第 6 行的  `fill-opacity: abs(50);`  替换为  `fill-opacity: abs(60);` 。 使用默认文件关注者配置时，生成的文件  `custom_output.css`  和  `custom_output.css.map`  将存储在项目根目录中，并显示为  `custom_output.scss`  的子项。

![默认设置：输出存储在项目根目录](https://resources.jetbrains.com/help/img/idea/2026.3/ws_scss_example_custom_output_result_with_default_settings.png)

将所有输出存储在单独的文件夹中会更方便，例如  `css` 。 创建一个自定义   SCSS_custom_output   文件关注者，并将  `css`  文件夹作为输出位置。

按 `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS)) 打开设置，然后选择  `工具 | File Watchers` 。 然后创建一个 SCSS File Watcher [如上所述](#ws_scss_example_create_fw)。

按如下方式更新默认设置：

* 在 参数 字段中，键入： ```PLAINTEXT $FileName$:$ProjectFileDir$/css/$FileNameWithoutExtension$.css ```

* 在 要刷新的输出路径 字段中，键入： ```PLAINTEXT $ProjectFileDir$/css/$FileNameWithoutExtension$.css:$ProjectFileDir$/css/$FileNameWithoutExtension$.css.map ```

![带自定义输出路径的新文件关注者](https://resources.jetbrains.com/help/img/idea/2026.3/ws_scss_example_custom_output_default_fw_updated.png)

保存新的文件关注者，并确保已启用。

![带自定义输出路径的新文件关注者已保存并启用](https://resources.jetbrains.com/help/img/idea/2026.3/ws_scss_example_custom_output_fw_saved.png)

现在，如果编辑  `custom_output.scss` ，例如，将第 6 行的  `fill-opacity: abs(50);`  替换为  `fill-opacity: abs(60);` ，IntelliJ IDEA 会创建一个  `css`  文件夹，并将生成的  `custom_output.css`  和  `custom_output.css.map`  文件存储在其中。

![自定义设置：输出存储在单独的文件夹中](https://resources.jetbrains.com/help/img/idea/2026.3/ws_scss_example_custom_output_result_with_custom_settings.png)

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

现在来看一个示例，其中  `.scss`  文件存储在文件夹结构中，例如：

![项目结构](https://resources.jetbrains.com/help/img/idea/2026.3/ws_scss_example_custom_output_project_structure_tree.png)

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

![自定义输出：生成的文件存储在源文件下](https://resources.jetbrains.com/help/img/idea/2026.3/ws_scss_example_custom_output_result_with_default_fw.png)

如果我们使用自定义 File Watcher [如上所述](#ws_sass_less_scss_example_scss_custom_output_location)，所有生成的文件将存储在同一个  `css`  文件夹中：

![自定义输出：生成的文件以扁平结构存储在单独的文件夹中](https://resources.jetbrains.com/help/img/idea/2026.3/ws_scss_example_custom_output_result_with_custom_fw_plain.png)

要让 IntelliJ IDEA 保留文件夹结构，请创建另一个自定义文件关注者。

按 `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS)) 打开设置，然后选择  `工具 | File Watchers` 。 然后创建一个 SCSS File Watcher [如上所述](#ws_scss_example_create_fw)。

按如下方式更新默认设置：

* 在 参数 字段中，键入： ```PLAINTEXT $FileName$:$ProjectFileDir$/css/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.css ```

* 在 要刷新的输出路径 字段中，键入： ```PLAINTEXT $ProjectFileDir$/css/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.css:$ProjectFileDir$/css/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.css.map ```

![带文件夹结构的自定义输出：文件关注者已更新](https://resources.jetbrains.com/help/img/idea/2026.3/ws_scss_example_custom_output_structured_fw_updated.png)

保存新的文件关注者，并确保已启用。

![带文件夹结构的自定义输出：文件关注者已保存并启用](https://resources.jetbrains.com/help/img/idea/2026.3/ws_scss_example_custom_output_structured_fw_saved.png)

现在，如果编辑  `custom_output_body.scss` 、  `custom_output_header.scss`  或  `custom_output_footer.scss` ，IntelliJ IDEA 会创建一个  `css`  文件夹，其子文件夹结构会保留  `styles_structured`  的结构。

![自定义设置：输出存储在单独的文件夹中，结构保留](https://resources.jetbrains.com/help/img/idea/2026.3/ws_scss_example_custom_output_result_structured.png)

### 自定义 CoffeeScript 编译器

假设有一个项目，其文件夹结构如下：

![File Watchers 文件夹结构示例](https://resources.jetbrains.com/help/img/idea/2026.3/fileWatcherExampleImage1.png)

使用默认文件关注者时，生成的文件将显示为其原始文件的子项。

![默认文件关注者输出](https://resources.jetbrains.com/help/img/idea/2026.3/ws_coffee_example_default_fw_output.png)

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

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

1. [创建 CoffeeScript 文件监视器](coffeescript.html#ws_coffee_compilation_create_fw)。

![创建 CoffeeScript 文件监视器](https://resources.jetbrains.com/help/img/idea/2026.3/ws_coffee_example_create_file_watcher.png)

2. 在   参数   字段中，键入：

```SHELL
--map --compile -o $ProjectFileDir$/JavaScript $FileName$

```

3. 在   要刷新的输出路径   字段中，键入：

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

```

因此，项目树如下所示：

![自定义输出，扁平结构](https://resources.jetbrains.com/help/img/idea/2026.3/fileWatcherExampleImage3.png)

还可以将生成的文件存储在  `app`  节点下重复原始结构的文件夹结构中。

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

1. 创建 CoffeeScript 文件关注者。

2. 在   参数   字段中，键入：

```SHELL
--map --compile -o $ProjectFileDir$/JavaScript/$FileDirRelativeToProjectRoot$ $FileName$

```

3. 在   要刷新的输出路径   字段中，键入：

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

```

因此，项目树如下所示：

![自定义输出，文件夹结构保留](https://resources.jetbrains.com/help/img/idea/2026.3/ws_coffee_example_custom_fw_preserve_folder_structure.png)

## 文件监视器故障排除

可能会显示一个弹出窗口，其中包含错误消息，同时通知您 File Watcher 已被禁用

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

|  已报告的问题  |  问题描述  |  解决方法  |
| --- | --- | --- |
|   `未知范围错误`   |  该文件关注者使用了此项目中未定义的作用域。  |  双击观察器并选择可用的作用域或创建一个新的。  |
|   `Invalid executable`   |  该项目使用了一个已被删除的全局 File Watcher。  |  使用   移除  按钮 ![移除](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.general.remove.svg)从列表中删除观察者，或编辑它以创建一个具有相同名称的新全局观察者。  |
|     IntelliJ IDEA 运行多个相同的 File Watcher 任务     |     在进行批量更新之后，例如来自您的 VCS，IntelliJ IDEA 会为每个保存的文件运行一个单独的 File Watcher 任务。     |  在   参数   字段中添加文件特定的宏（如  `&FileNameWithoutExtension&`  ）, 请参阅 [配置与外部工具的交互](#transpilerBehaviour)。  |

## See also

### 标记语言和样式表

[压缩 CSS](compressing-css.html) [Sass、SCSS、Less 和 PostCSS](transpiling-sass-less-and-scss-to-css.html) [在 Compass 应用程序中的 Sass 和 SCSS](transpiling-compass-to-css.html)

### 语言和框架特定指南

[CoffeeScript](coffeescript.html) [TypeScript](typescript-support.html) [压缩 JavaScript](minifying-javascript.html)

### 参考

[File Watchers](settings-tools-file-watchers.html) [新建监视器对话框](new-watcher-dialog.html) [内置 IDE 宏](built-in-macros.html)