New Watcher Dialog
The dialog opens when you click the Add or Edit button on the File Watchers page. Use the dialog box 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 text box, type the name of the File Watcher. By default, WebStorm suggests the name of the selected predefined template.
Files to watch
Use this drop-down 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 drop-down 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. |
Choose one of the predefined scopes from the drop-down list. For a project-level File Watcher, you can also click to configure a custom scope in the Scopes dialog that opens.
Track only root files
| A root file is a file that is not included (e.g. 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 text box, specify the path to the tool's executable file (|
If you are configuring a global file watcher for a tool installed inside a project (e.g. 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 text box, define the arguments to pass to the tool and thus influence its behaviour. Arguments are usually specified using macros, for example,
Output paths to refresh
|In this text box, 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.
Please note, that changing the value in the Output paths to refresh text box 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 text box: type the output paths with colons as separators and use macros.
Working Directory and Environment Variables
In this text box, 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 text box, 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 drop-down list, choose when you want the File Watcher to open the console. |
In this text box, 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.