New Watcher Dialog
The dialog opens when you click the Add or Edit button on the File Watchers page. Use the dialog to create a project File Watcher based on a predefined WebStorm File Watcher template or to edit an existing project File Watcher.
Each template contains the settings that are optimal for the selected tool. So in most cases, all you need is specify the path to the tool's executable.
In the Name field, type the name of the File Watcher. By default, WebStorm suggests the name of the selected predefined template.
Files to watch
Use this list to specify 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.
Use this list to define the range of files the File Watcher can be applied to.
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 to configure a custom scope in the Scopes dialog that opens.
VCS Scopes: these scopes are only available if your project is under version control.
Alternatively, click and configure a custom scope in the Scopes dialog that opens.
Track only root files
A root file is a file that is not included (for example via
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.
Example Suppose you have two files root.scss and another.scss where root.scss imports another.scss. With the Track only root files checkbox selected, editing another.scss invokes the File Watcher only on root.scss. Otherwise, if the checkbox is cleared, the File Watcher processes both of these files.
Tool to run on changes
In this area, configure interaction with the tool: specify the executable file to use, the arguments to pass to it, and where WebStorm should look for the tool's output.
In this field, specify the path to the tool's executable file (.com, .exe, .cmd, .bat, or other depending on the specific tool.)
In this field, define the arguments to pass to the tool and thus influence its behaviour.
Arguments are usually specified using macros, for example,
Type the macros manually or click and select the relevant pattern fom the list in the Macros dialog that opens.
Output paths to refresh
In this field, tell WebStorm where it should search for the tool's output: the resulting source code, source maps, dependencies, or the file itself. The location of the output is tool-specific.
Output paths are usually specified using macros. You can type them manually or click and select the relevant one from the list in the dialog that opens.
Note, that 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.
Working Directory and Environment Variables
In this 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 through a
In this field, specify the environment variables that the tool requires but that are not specified at the operating system level.
Auto-save edited files to trigger the watcher
Trigger the watcher on external changes
Trigger watcher regardless of syntax errors
Create output file from stdout
From this list, select when you want the File Watcher to open the console.
In this field, specify the output filters associated with the tool. Based on these filters, absolute file paths and line numbers in the tool's output are converted into hyperlinks. Clicking those links opens the corresponding files in the editor.
For example, to get useful error messages displayed, type