File | Settings | File Watchers
The dialog box 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 transpiling tool. So in most cases, all you need is specify the path to the transpiler executable.
The dialog box consists of the following areas:
|Name||In this text box, type the name of the File Watcher. By default, WebStorm suggests the name of the selected predefined template.|
|Description||In this text box, describe the functionality of the File Watcher. Predefined templates already contain general information regarding the accepted input and produced output. Expand or update the description, if, for example, you have two File Watcher that apply to the same source code but differ from each other in some configuration settings.|
In this area, configure the behaviour of the File Watcher.
Click this button to open the Output Filters dialog
where you can manage the list of filters to distinguish the output of the File Watcher from other output.
These filters make the basis for:
|Immediate file synchronization||
|Track only root files||
When the File Watcher is invoked on a file, WebStorm detects all the files in which this file is included.
For each of these files, in its turn, WebStorm again detects the files into which it is included. This operation is repeated recursively until WebStorm reaches the files
that are not included anywhere within the specified scope. These files are referred to as root files (do not confuse with content roots).
This choice is available only for CSS, SASS/SCSS, LESS, Compass, Stylus, Typescript, and Dart.
Use this drop-down list to define when you want the File Watcher open its dedicated console with messages.
The available options are:
|Check file for syntax errors||
In this area, configure interaction with the transpiling tool: specify the executable file to use, the arguments to pass to it, and customize the default template settings for input and output.
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.
By default, the field shows the file type in accordance with the chosen predefined File Watcher template.
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 Immediate file synchronization check box.
You can choose one of the predefined scopes from the drop-down list:
VCS Scopes: these scopes are only available if your project is under version control.
The Scope setting overrides the Track only root files check box setting: if a dependency is outside the specified scope, the File Watcher is not applied to it.
In this text box, specify the location of the transpiler's executable file (.exe, .cmd, .bat,
or other depending on the specific tool. .jar archives are also acceptable but defining path variables for them is not supported.)
Do one of the following:
In this text box, define the arguments to pass to the transpiler in one of the following ways:
When specifying the arguments, follow these rules:
In this text box, specify the directory to which the transpiler 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. This setting is specified in all predefined templates
through a macros $FileDir$. To update this default settings, do one of the following:
If the field is left blank, WebStorm uses the directory of the file where the File Watcher is invoked.
|Environment variables||Use this text box to specify a the path variable for a tool that is required for starting the transpiler but is not referenced in the path to it.|
In this text box, specify the files where the transpiler stores its output: the resulting source code, source maps,
and dependencies. Based on this settings, WebStorm detects files generated through transpilation.
Do one of the following:
|Create output from stdout||
Some transpilers generate a standard output stream (stdout) file, others do not, which may lead to errors. Therefore it is strongly recommended to preserve the default setting.