# File Watchers

> **TL;DR**
> Required plugin:
>
>
>
> `[File Watchers](https://plugins.jetbrains.com/plugin/7177-file-watchers)` -    install the plugin on the Settings | Plugins page, tab Marketplace.
>
> The plugin is available only in IntelliJ IDEA with the Ultimate subscription.

A File Watcher is an IntelliJ IDEA tool that allows you to automatically run a command-line tool like compilers, formatters, or linters when you change or save a file in the IDE.

File Watchers have two dedicated code inspections:

* The File Watcher available inspection is run in every file where a predefined File Watcher is applicable. If the project has no relevant File Watcher configured, IntelliJ IDEA suggests to add one.

* The File Watcher problems inspection is invoked by a running File Watcher and highlights errors specific to it.

You can use one of the available templates or configure a File Watcher from scratch. A configured File Watcher can be saved in your project settings or in the IDE settings and used in different projects.

For more information about File Watchers for specific tools, see the corresponding pages:

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

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

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

* [Sass and SCSS in Compass applications](transpiling-compass-to-css.html#compass_compiling_sass_scss)

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

* [CoffeeScript](coffeescript.html#ws_coffee_compilation)

Note that using some of these tools in IntelliJ IDEA requires that you install plugins on the Settings | Plugins page as described in [Installing plugins
from JetBrains Marketplace](managing-plugins.html#install_plugin_from_repo).

## Before you start

Install and enable the File Watchers plugin on the Settings | Plugins page, tab Marketplace, as described in [Installing plugins from
JetBrains Marketplace](managing-plugins.html#install_plugin_from_repo).     The plugin is available only in IntelliJ IDEA with the Ultimate subscription.

## Creating a File Watcher

Procedure:

1. In the Settings dialog (`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` (NetBeans), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))), click File Watchers under Tools. The [File Watchers page](settings-tools-file-watchers.html) opens showing a list of File Watchers that are already configured in this project and in the IDE.

2. Click ![the Add button](https://resources.jetbrains.com/help/img/idea/2026.2/app.expui.general.add.svg) and choose the predefined template from which you want to create a File Watcher. The choice depends on the tool you are going to use. To use a tool that is not on the list, choose Custom.

![Compiling SCSS into CSS: creating a File Watcher](https://resources.jetbrains.com/help/img/idea/2026.2/ws_scss_example_create_file_watcher.png)

The [New Watcher](new-watcher-dialog.html) dialog opens.

3. In the Name field, type the name of the File Watcher. By default, IntelliJ IDEA suggests the name of the selected predefined template.

## Configuring the expected type and location of input files

Use the controls in the Files to watch area to define the range of files where you want to apply the File Watcher.

Procedure:

1. From the File type list, choose the expected type of input files.  The File Watcher will consider only files of this type as subject for analyzing and processing. File types are recognised based on [associations between file
types and file extensions](creating-and-registering-file-types.html#register-new-association).

By default, the field shows the file type in accordance with the chosen predefined template.

2. Select the Scope in which the File Watcher is applicable.

![SCSS File Watcher: change default scope](https://resources.jetbrains.com/help/img/idea/2026.2/ws_scss_example_file_watcher_settings_change_scope.png)

Changes in these files will invoke the File Watcher either immediately or upon save or frame deactivation, depending on the status of the Auto-save edited files to trigger the watcher checkbox.

Select one of the predefined scopes from the list. For a project-level File Watcher, you can also click ![the Browse button](https://resources.jetbrains.com/help/img/idea/2026.2/app.general.ellipsis.svg) to configure a custom scope in the Scopes dialog that opens.

* All Places: all the scopes listed below.

* Project Files: all the files within the project content roots (refer to [Content roots](content-roots.html) ).

* Project Production Files: all the files within the project content roots excluding test sources.

* Project Test Files: all the files within the project test source roots.

* Scratches and Consoles: all the files from the Scratches and Consoles directory located in the Project tool window.

* Open Files: all the files that are currently opened in the editor.

* Current File: the file opened in the active editor tab.

VCS Scopes: these scopes are only available if your [project is under version control](enabling-version-control.html#associate_project_with_VCS).

* All Changed Files: all changed files, that is, all files associated with all existing changelists.

* Default Changelist: all the files associated with the changelist  `Default`.

Alternatively, click ![the Browse button](https://resources.jetbrains.com/help/img/idea/2026.2/app.general.ellipsis.svg) and configure a custom scope in the Scopes dialog that opens.

3. Optionally:  specify how you want the File Watcher to deal with dependencies.  A root file is a file that is not included (for example via `import`) in any other file [within the specified scope](new-watcher-dialog.html#scope).

* To run the File Watcher only against root files, select the Track only root files checkbox.

* Clear the checkbox to run the File Watcher against the file from which it is invoked and against all the files in which this file is recursively included within the specified scope.

Note that the Scope setting overrides the Track only root files checkbox setting: if a dependency is outside the specified scope, the File Watcher is not applied to it.

> **Note:**
> This option is available only for Babel, Closure Compiler, Jade, Less, Sass/SCSS, Stylus, and UglifyJS (terser).

## Configuring interaction with the external tool

In the Tool to run on changes area, specify the tool to use, the arguments to pass to it, the expected output file types, and so on.

Procedure:

1. In the Program field, specify the path to the executable file of the tool (`.exe`, `.cmd`, `.bat`, or other depending on the specific tool).

> **Tip:**
> * To use the program filename instead of its full path, add the path to its folder to the `PATH` environment variable.
>
> * On Windows, you can skip the `.com`, `.exe`, `.cmd` or `.bat` extension.
>
> * To use a `jar` archive, specify the absolute path to it. Alternatively, to use a relative path, add its parent folder to the [IntelliJ IDEA path variables](absolute-path-variables.html) on the Appearance & Behavior | Path Variables settings page `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` (NetBeans), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS)) .

2. In the Arguments field, define the arguments to pass to the tool.

Arguments are usually specified using [macros](built-in-macros.html), for example, `$FileName$` or `$FileNameWithoutExtension$`, that will be replaced with the actual filenames.

Type the macros manually or click ![the Insert Macros icon](https://resources.jetbrains.com/help/img/idea/2026.2/app.general.inlineAddHover.svg) and select the relevant pattern fom the list in the Macros dialog that opens.

> **Tip:**
> When specifying the arguments, follow these rules:
>
> * Use spaces as separators.
>
> * If an argument contains spaces, enclose them or the entire argument in double quotes: `some" "arg` or `"some arg"`.
>
> * If an argument contains double quotes, use backslashes to escape them: `-Dmy.prop=\"quoted_value"\`.

3. In the Output paths to refresh field, specify the files where the tool stores its output: the resulting source code, source maps, and dependencies. Based on these settings, IntelliJ IDEA recognizes the files generated through compilation.

Output paths are usually specified using [macros](built-in-macros.html). You can type them manually or click ![the Insert Macros icon](https://resources.jetbrains.com/help/img/idea/2026.2/app.general.inlineAddHover.svg) and select the relevant one from the list in the dialog that opens.

To specify several macros, use colons `:` as separators, for example, `$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map`.

> **Note:**
> Changing the value in the Output paths to refresh field does not make the tool store its output in another place. If you still need to do that, specify the desired custom output location in the Arguments field: type the output paths with colons as separators and use macros.

4. Expand the Working Directory and Environment Variables hidden area.

5. Define the environment variables. For example, specify the `PATH` variable for the tools that are required for starting the tool you are configuring but are not referenced in the path to it.  In most cases, it is Node.js or ruby.exe. Such situation may result from custom manual installation instead of installation through the Node Package Manager (npm) or gem manager.

6. In the Working directory field, specify the directory to which the tool will be applied.

Because the tool is always invoked in the context of a file, the default working directory is the directory of the current file. The default working directory is specified in all predefined templates with the `$FileDir$` macro. To specify a custom working directory, type the path to it in the field, or click  ![the Browse icon](https://resources.jetbrains.com/help/img/idea/2026.2/app.general.openDiskHover.svg) and select the directory in the Select Path  dialog, or click ![the Insert Macros icon](https://resources.jetbrains.com/help/img/idea/2026.2/app.general.inlineAddHover.svg) and select the desired [macro](built-in-macros.html) from the list in the Macros dialog.

> **Tip:**
> If you leave the Working Directory field empty, IntelliJ IDEA uses the directory of the file where the File Watcher is invoked.

## Configuring advanced options

In the Advanced Options area, customize the default behaviour of the File Watcher.

Procedure:

1. Specify the events that will invoke the File Watcher:

* To invoke the File Watcher as soon as any changes are made to the source code, select the Auto-save edited files to trigger the watcher checkbox. When the checkbox is cleared, the File Watcher starts upon save (`File | Save All`) or when you move the focus from IntelliJ IDEA (on frame deactivation). ![Auto-save edited files off](https://resources.jetbrains.com/help/img/idea/2026.2/ws_scss_example_file_watcher_autosave_on_edit_off.png)

* By default, the File Watcher wakes up on any saved change, including the updates received from your version control system when you, for example, check out a branch. To ignore such changes and invoke the File Watcher only when you update your code in IntelliJ IDEA, clear the Trigger the watcher on external changes checkbox.

2. Specify whether you want the File Watcher to interact with the IntelliJ IDEA syntax parser:

* When the Trigger watcher regardless of syntax errors checkbox is selected, the File Watcher start regardless of the syntactical correctness of a file. The File Watcher will start upon update, save, or frame deactivation, depending on the status of the Auto-save edited files to trigger the watcher checkbox.

* When the Trigger watcher regardless of syntax errors checkbox is cleared, the File Watcher ignores all triggers in files that are syntactically invalid and starts only in error-free files.

3. Use the Create output file from stdout checkbox to specify how you want to generate the output file.

* When the checkbox is selected, IntelliJ IDEA reads the native tool's output `standard output stream (stdout)` and generates the resulting files from it.

* When the checkbox is cleared, the tool writes its output directly to the files specified in the Output paths to refresh field.

4. In the Show console list, choose when you want the File Watcher to open the console.

* Always: with this option, the console always opens after the tool execution is completed.

* On error: with this option, the console opens after the tool execution only when the `Exit code` is different from `0`.

* Never: choose this option to suppress opening the console at all.

## Showing information reported by File Watcher in the editor

If the tool configured in the File Watcher reports errors or warnings about your code with the links to the files and specific lines, you can see this information right in the editor:

* In `Settings | Editor | Inspections`, enable the inspection File Watcher Problems.

* In the Output Filters field of the [Edit Watcher](new-watcher-dialog.html) dialog, describe the format of the output you want to match. Use the macros `$FILE_PATH$`, `$LINE$`, and `$MESSAGE$` for that. You need to avoid using special symbols like braces and dot with `\`. The text matched with the `$MESSAGE$` macro will be shown in the editor.

### Example

The tool reports errors in the following format:

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

Use the following regex as an output filter to see the error highlighted in the editor:

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

> **Tip:**
> You can also use the Output filter to make paths in the watcher’s output clickable.

## Saving, enabling, and disabling File Watchers

> **Warning:**
> File Watchers do not start when you open a project in the Safe Mode. For more information, refer to [Project security](project-security.html).

Once you’ve saved the new File Watcher,  you can decide if it’s going to be available only in the current project (select Project from the Level list) or for all projects (select Global).

![Global File Watcher](https://resources.jetbrains.com/help/img/idea/2026.2/ws_enable_global_watcher.png)

Procedure:

* To enable or disable a File Watcher,   open the Settings dialog (`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` (NetBeans), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))), go to `Tools | File Watchers`, and select or clear the checkbox next to it.

* When you open a file to which a predefined File Watcher is applicable, IntelliJ IDEA suggests enabling the File Watcher:

![Compiling Less to CSS: creating a File Watcher from the pane in the editor](https://resources.jetbrains.com/help/img/idea/2026.2/ws_less_example_create_file_watcher_from_pane.png)

* When a File Watcher is enabled, it starts automatically as soon as a file of the selected type and in the selected scope is changed or saved, refer to [Configuring advanced options](#ws_filewatcher_advanced_options).

* If an error occurs while a File Watcher is running, the File Watcher is automatically disabled. To restore the status, enable the File Watcher manually.

Procedure: Enable global File Watchers for new projects

Global File Watchers can be automatically enabled in all new projects that you create in the future.

* Open the Settings for New Projects dialog (`File | New Projects Setup | Settings for New Projects`) , go to `Tools | File Watchers`, and select the checkboxes next to the required File Watchers.

* Alternatively, on the [Welcome Screen](null), select Settings from the Configure list. In the dialog that opens, select the checkboxes next to the relevant File Watchers.

## Examples of customizing the behavior of an external tool in a File Watcher

The only way to influence a third-party tool is to pass arguments to it just as if you were working in the command-line mode. These arguments are specific to each tool. Below are two examples of customizing the default output location for the SCSS compiler.

### Customize the SCSS compiler

Suppose your project is structured as follows:

![Compiling SCSS into CSS: project structure](https://resources.jetbrains.com/help/img/idea/2026.2/ws_scss_example_project_structure.png)

As you can see, `_grid.scss` is imported in `Page.scss`. The example below shows how `Page.scss` is compiled into CSS when you save your project manually or automatically and how the changes to `_grid.scss` are reflected in the generated CSS file.

Procedure:

1. Create a File Watcher of the type SCSS:   open the Settings dialog (`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` (NetBeans), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))), go to `Tools | File Watchers`, click ![the Add button](https://resources.jetbrains.com/help/img/idea/2026.2/app.expui.general.add.svg) on the toolbar, and select SCSS from the list.

![Compiling SCSS into CSS: creating a File Watcher](https://resources.jetbrains.com/help/img/idea/2026.2/ws_scss_example_create_file_watcher.png)

2. In the New File Watcher dialog that opens, all the mandatory fields are already filled in.

![SCSS File Watcher: settings](https://resources.jetbrains.com/help/img/idea/2026.2/ws_scss_example_file_watcher_settings.png)

Actually, these settings are sufficient to run the compiler successfully.

3. Let's change `grid.scss`, for example, replace `margin-left: 0;` at line 31 with `margin-left: 12px;`. This triggers our File Watcher and the compiler processes `Page.scss`. As a result, two files are generated and shown nested under `Page.scss`:

* `Page.css` with compiled CSS code

* `Page.css.map` with source maps that let you step through your app during a debugging session.

![SCSS File Watcher: a CSS file generated](https://resources.jetbrains.com/help/img/idea/2026.2/ws_scss_example_file_watcher_css_filed_generated.png)

Although the default settings are sufficient to run the compiler successfully, let's still take a closer look at them to see how the File Watcher's behavior can be customized.

#### Change the action that triggers the File Watcher

The File Watcher wakes up and launches the transpiler as soon as your project is saved manually (`File | Save All` or `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+S` (NetBeans), `Ctrl+Shift+S` (Visual Studio), `⌘ ⇧ S` (Visual Studio (macOS)), `Ctrl+S` (Eclipse), `⌘ S` (Eclipse (macOS))) or automatically.

In general, your code is saved automatically when you move the focus from IntelliJ IDEA (on frame deactivation). With File Watchers, auto-save is also performed when you edit a file from the File Watcher's scope. As a result, the transpiler may be running all the time you type, which may cause performance issues. To solve the problem, suppress saving edited files automatically.

Press `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` (NetBeans), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS)) to open settings and then select `Tools | File Watchers`.  Select the required File Watcher (SCSS in our example) and click ![the Edit button](https://resources.jetbrains.com/help/img/idea/2026.2/app.expui.general.edit.svg) on the toolbar. In the Edit File Watcher dialog, expand the Advanced Options area and clear the Auto-save edited files to trigger the watcher checkbox.

![Auto-save edited files off](https://resources.jetbrains.com/help/img/idea/2026.2/ws_scss_example_file_watcher_autosave_on_edit_off.png)

By default, the File Watcher wakes up even when a file from its scope is edited from outside IntelliJ IDEA. To override this behavior and transpile files only on editing internally, clear the Trigger the watcher on external changes checkbox.

![Trigger the File Watcher on external changes is off](https://resources.jetbrains.com/help/img/idea/2026.2/ws_scss_example_file_watcher_on_external_changes_off.png)

#### Change the scope

By default, IntelliJ IDEA monitors changes in all files with the `.scss` extension in the entire project. This works for our example. However, you can change the scope to process, for example, only uncommitted changes. In a large project, this will save time.

Press `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` (NetBeans), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS)) to open settings and then select `Tools | File Watchers`.  Select the required File Watcher (SCSS in our example) and click ![the Edit button](https://resources.jetbrains.com/help/img/idea/2026.2/app.expui.general.edit.svg) on the toolbar. In the Edit File Watcher dialog, select the applicable scope from the list. Learn more from [Scopes and file colors](configuring-scopes-and-file-colors.html).

![SCSS File Watcher: change default scope](https://resources.jetbrains.com/help/img/idea/2026.2/ws_scss_example_file_watcher_settings_change_scope.png)

#### Custom output location

By default, the generated `.css` and `.css.map` files are stored in the folder where the original file is and are shown as its children in the   Project tool window  (`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+1` (NetBeans), `Ctrl+Alt+L` (Visual Studio), `⌘ ⌥ L` (Visual Studio (macOS)), `Alt+1` (Eclipse), `Alt+1` (Eclipse (macOS))) . You can change this default behavior to store all generated `.css` and `.css.map` files in a separate folder.

Let's start with a simple case. Suppose you have  a `custom_output.scss` file in the project root.

![Project structure](https://resources.jetbrains.com/help/img/idea/2026.2/ws_scss_example_custom_output_project_structure_plain.png)

Let's edit `custom_output.scss`, for example, replace `fill-opacity: abs(50);` at line 6 with `fill-opacity: abs(60);`. With the default File Watcher configuration, the generated files `custom_output.css` and `custom_output.css.map` will be stored in the project root and shown as children of `custom_output.scss`.

![Default settings: the output is stored in the project root](https://resources.jetbrains.com/help/img/idea/2026.2/ws_scss_example_custom_output_result_with_default_settings.png)

It would be convenient to store all the output in a separate folder, for example, `css`. Let's create a custom SCSS_custom_output File Watcher with the `css` folder as the output location.

Press `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` (NetBeans), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS)) to open settings and then select `Tools | File Watchers`.  Then create a SCSS File Watcher [as
described above](#ws_scss_example_create_fw).

Update the default settings as follows:

* In the Arguments field, type: ```PLAINTEXT $FileName$:$ProjectFileDir$/css/$FileNameWithoutExtension$.css ```

* In the Output paths to refresh field, type: ```PLAINTEXT $ProjectFileDir$/css/$FileNameWithoutExtension$.css:$ProjectFileDir$/css/$FileNameWithoutExtension$.css.map ```

![New File Watcher with custom output path](https://resources.jetbrains.com/help/img/idea/2026.2/ws_scss_example_custom_output_default_fw_updated.png)

Save the new File Watcher and make sure it is enabled.

![New File Watcher with custom output path saved and enabled](https://resources.jetbrains.com/help/img/idea/2026.2/ws_scss_example_custom_output_fw_saved.png)

Now, if you edit `custom_output.scss`, for example, replace `fill-opacity: abs(50);` at line 6 with `fill-opacity: abs(60);`, IntelliJ IDEA creates a `css` folder and stores the generated  `custom_output.css` and `custom_output.css.map` files in it.

![Custom settings: the output is stored in a separate folder](https://resources.jetbrains.com/help/img/idea/2026.2/ws_scss_example_custom_output_result_with_custom_settings.png)

#### Custom output location: preserve the original folder structure

Let's now consider an example where `.scss` files are stored in a folder structure, for example:

![Project structure](https://resources.jetbrains.com/help/img/idea/2026.2/ws_scss_example_custom_output_project_structure_tree.png)

With the default File Watcher, the generated files will be stored next to the original `.scss` files.

![Custom output:the generated files are stored under the source files](https://resources.jetbrains.com/help/img/idea/2026.2/ws_scss_example_custom_output_result_with_default_fw.png)

If we use the custom File Watcher [as
described above](#ws_sass_less_scss_example_scss_custom_output_location), all the generated files will be stored in one same `css` folder:

![Custom output: the generated files are stored in a separate folder in a plain structure](https://resources.jetbrains.com/help/img/idea/2026.2/ws_scss_example_custom_output_result_with_custom_fw_plain.png)

To have IntelliJ IDEA preserve the folder structure, let's create another custom File Watcher.

Press `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` (NetBeans), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS)) to open settings and then select `Tools | File Watchers`.  Then create a SCSS File Watcher [as
described above](#ws_scss_example_create_fw).

Update the default settings as follows:

* In the Arguments field, type: ```PLAINTEXT $FileName$:$ProjectFileDir$/css/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.css ```

* In the Output paths to refresh field, type: ```PLAINTEXT $ProjectFileDir$/css/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.css:$ProjectFileDir$/css/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.css.map ```

![Custom output with folder structure: File Watcher updated](https://resources.jetbrains.com/help/img/idea/2026.2/ws_scss_example_custom_output_structured_fw_updated.png)

Save the new File Watcher and make sure it is enabled.

![Custom output with folder structure: File Watcher saved and enabled](https://resources.jetbrains.com/help/img/idea/2026.2/ws_scss_example_custom_output_structured_fw_saved.png)

Now, if you edit `custom_output_body.scss`, `custom_output_header.scss`, or `custom_output_footer.scss`, IntelliJ IDEA creates a `css` folder with the subfolders' structure that preserves the structure of `styles_structured`.

![Custom settings: the output is stored in a separate folder, the structure preserved](https://resources.jetbrains.com/help/img/idea/2026.2/ws_scss_example_custom_output_result_structured.png)

### Customize the CoffeeScript compiler

Suppose, you have a project with the following folder structure:

![File Watchers example of folder structure](https://resources.jetbrains.com/help/img/idea/2026.2/fileWatcherExampleImage1.png)

With the default File Watcher, the generated files will be shown as children of their original files.

![Default File Watcher output](https://resources.jetbrains.com/help/img/idea/2026.2/ws_coffee_example_default_fw_output.png)

You can change this default location and have the generated files stored in a separate `JavaScript` folder.

Procedure: Store all the generated files in the output JavaScript folder

1. [Create a CoffeeScript File
Watcher](coffeescript.html#ws_coffee_compilation_create_fw).

![Create a CoffeeScript File Watcher](https://resources.jetbrains.com/help/img/idea/2026.2/ws_coffee_example_create_file_watcher.png)

2. In the Arguments field, type:

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

3. In the Output paths to refresh field, type:

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

As a result, the project tree looks as follows:

![Custom output, flat structure](https://resources.jetbrains.com/help/img/idea/2026.2/fileWatcherExampleImage3.png)

You can also have the generated files stored in the folder structure that repeats the original structure under the `app` node.

Procedure: Preserve the original folder structure in the output folder

1. Create a CoffeeScript File Watcher.

2. In the Arguments field, type:

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

3. In the Output paths to refresh field, type:

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

As a result, the project tree looks as follows:

![Custom output, folder structure preserved](https://resources.jetbrains.com/help/img/idea/2026.2/ws_coffee_example_custom_fw_preserve_folder_structure.png)

## Troubleshooting File Watchers

There might be displayed a popup with an error message also informing you that the File Watcher was disabled

Here is a list of possible errors:

| Reported Problem | Problem Description | Workaround |
| --- | --- | --- |
| `Unknown Scope error` | The File Watcher uses a scope that is not defined in this project. | Double-click the watcher and select an available scope or create a new one. |
|  `Invalid executable`  | The project uses a global File Watcher that was removed. | Delete the watcher from the list using the Remove button ![Remove](https://resources.jetbrains.com/help/img/idea/2026.2/app.expui.general.remove.svg) or edit it to create a new global watcher with the same name. |
|     IntelliJ IDEA runs numerous identical File Watcher tasks     |     After a bulk update, for example, from your VCS, IntelliJ IDEA runs a separate File Watcher task for each saved file.     |  Add a file-specific macro (like `&FileNameWithoutExtension&`) in the Arguments field, refer to [Configuring interaction with the external                     tool](#transpilerBehaviour).  |

## See also

### Markup languages and style sheets

[Minifying CSS](compressing-css.html) [Sass, SCSS, Less, and PostCSS](transpiling-sass-less-and-scss-to-css.html) [Sass and SCSS in Compass applications](transpiling-compass-to-css.html)

### Language and Framework-Specific Guidelines

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

### Reference

[File Watchers](settings-tools-file-watchers.html) [New Watcher Dialog](new-watcher-dialog.html) [Built-in IDE macros](built-in-macros.html)