File | Settings | Tools | File Watchers
The page is available when the File Watchers plugin is enabled. The plugin is bundled with WebStorm and activated by default. If not, enable it as described in Enabling and Disabling Plugins.
Use this page to create project File Watchers based on predefined WebStorm File Watcher templates and thus enable transpilation in the project.
WebStorm supports integration with various third-party transpilers that run in the background and perform the following:
- Translate Less, Sass, and SCSS source code into CSS code.
In WebStorm, these transpiler configurations are called File Watchers. For each supported transpiler, WebStorm provides a predefined File Watcher template. Predefined File Watcher templates are available at the WebStorm level. To run a transpiler against your project files you need to create a project-specific File Watcher based on the relevant template, at least, specify the path to the transpiler to use on your machine.
You can download a transpiler of your choice and set it up as a File Watcher. However, in this case no predefined template is available so you will have to specify all the settings manually.
To be applicable, a File Watcher must be enabled by selecting the check box next to it on the File Watchers page of the Settings dialog box, see Enabling and Disabling File Watchers. After that the File Watcher will be invoked automatically upon any changes made to the source code or upon save, depending on whether the Immediate File Synchronization check box is selected or cleared, see New Watcher Dialog.
The output of a File Watcher is stored in a separate file. The predefined templates suggest the type of the file depending on the transpiler type. By default the output file is created in the same folder as the input file when the File Watcher is invoked for the first time, whereupon this file is only updated. You can customize all these settings during File Watcher creation.
In the Project tree view, the output file is shown under the original file which is shown as a node. This is done to improve visibility so you can easier locate necessary files.
File watchers have two dedicated code inspections:
- The File watcher available inspection is invoked in every file that is recognized as subject for applying a predefined file watcher (Sass, Less, SCSS, TypeScript, or CoffeeScript). If none of the applicable predefined File Watchers is associated with the current project, WebStorm suggests to add one.
- The File watcher problems inspection is invoked by a running File Watcher and highlights errors specific for it.
The File Watchers page consists of two parts:
- A list of File Watchers available in the current project. To activate a File Watcher, select the check box next to it. If an error occurs while a File Watcher is running, the File Watcher is automatically disabled.
- A toolbar to manage this list.
|Click this button to open the Choose template pop-up list and choose the relevant type of File Watcher. After that WebStorm opens the New Watcher dialog box for customizing the predefined File Watcher according to the settings of the current project.|
|Click this button to update the settings of the selected File Watcher in the Edit Watcher dialog box. The update is applied to the current project File Watcher only, it does not affect the predefined WebStorm-level template.|
|Click this button to remove the selected File Watcher. The File Watcher is no longer applied to the files in the current project. Note that this action does not affect the corresponding predefined template which is still available at the WebStorm level.|
|Use these buttons to change the order of File Watcher in the list. This determines the order of launching File Watchers, if more than one are enabled.|
|Copy||Use this button to create a copy of the selected file watcher.|
|Import||Click this button to import an existing file watcher and add it to the list of available file watchers.|
|Export||Click this button to export the selected watchers to