A File Watcher is a WebStorm system that tracks changes to your files and runs a third-party standalone application. WebStorm provides predefined File Watcher templates for a number of such standard popular third-party tools (compilers, compressors, prettifiers, and others). You can also configure a custom File Watcher to run any other third-party tool.
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, WebStorm 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.
When you open a file where a predefined File Watcher is applicable, WebStorm displays a pane where suggests activating it.
Click Yes to activate the File Watcher with the default configuration.
If you click No, WebStorm considers the suggested File Watcher suppressed. You can still create and enable it manually as described in Creating a File Watcher below.
Creating a File Watcher
In the Settings/Preferences dialog (Ctrl+Alt+S), click File Watchers under Tools. The File Watchers page opens showing a list of File Watchers that are already configured in this project and in the IDE.
Click 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. The New Watcher dialog opens.
In the Name field, type the name of the File Watcher. By default, WebStorm 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.
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.
By default, the field shows the file type in accordance with the chosen predefined template.
Select the Scope in which the File Watcher is applicable.
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.
All Places: all the scopes listed below.
Project Files: all the files within the project content roots (see Configuring Project Structure ).
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.
Changed Files: all changed files, that is, all files associated with all existing changelists.
Default Changelist: all the files associated with the changelist
Alternatively, click and configure a custom scope in the Scopes dialog that opens.
See Scope for details.
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.
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.
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.
In the Program field, specify the path to the executable file of the tool (.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 the Arguments field, define the arguments to pass to the tool.
Arguments are usually specified using macros, for example,/>
$FileNameWithoutExtension$, that will be replaced with actual file names.
Type the macros manually or click Insert Macro and select the relevant pattern fom the list in the Macros dialog that opens.
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, WebStorm recognizes the files generated through compilation.
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.
Output paths are usually specified using macros. Type the path manually o click Insert Macro and select the relevant pattern from the list.
Expand the Working Directory and Environment Variables hidden area.
Define the environment variables. For example, specify the
PATHvariable 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.
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 through a
$FileDir$macros. To specify a custom working directory, type the path to it in the field, or click and select the directory in the Select Path dialog, or click Insert Macro and select the desired macro from the list in the Macros dialog.
Configuring advanced options
In the Advanced Options area, customize the default behaviour of the File Watcher.
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 ( ) or when you move the focus from WebStorm (on frame deactivation).
By default, the File Watcher wakes up on any saved change, including the updates received from you version control system when you, for example, check out a branch. To ignore such changes and invoke the File Watcher only you update your code in WebStorm, clear the Trigger the watcher on external changes checkbox.
Specify whether you want the File Watcher to interact with the WebStorm 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.
Use the Create output file from stdout checkbox to specify how you want to generate the output file.
When the checkbox is selected, WebStorm 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.
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 codeis different from
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 File Watcher Problems., enable the inspection
In the Output Filters field of the Edit Watcher dialog, describe the format of the output you want to match. Use the macros
$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.
The tool reports errors in the following format:
Saving, enabling and disabling File Watchers
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 in the right column) or for all projects (select Global).
To enable or disable a File Watcher, select or clear the checkbox next to it indialog.
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.
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, see Configuring advanced options.
Troubleshooting File Watchers
There might be a red error message next to the File Watcher in the list in.
Here is a list of possible errors:
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.
The project uses a global File Watcher that was removed.
Delete the watcher from the list using the Remove button () or edit it to create a new global watcher with the same name.
WebStorm runs numerous identical File Watcher tasks
After a bulk update, for example, from your VCS, WebStorm runs a separate File Watcher task for each saved file.
Add a file-specific macro (like