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.
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 |
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.)
If you are configuring a global file watcher for a tool installed inside a project (for example Prettier), you need to specify the path to it using a macro. To use one of the available macros in the path, press the Insert Macro button. For example, with the path $ProjectFileDir$/node_modules/.bin/prettier, the File Watcher will use prettier installed in the project’s node_module folder.
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 Insert Macro 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 Insert Macro 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.