File | Settings | File Watchers
The page is available when the File Watchers plugin is enabled. The plugin is bundled with WebStorm and enabled by default. If it is not, enable the plugin on the Plugins page of the Settings dialog box.
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.
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 watchers (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.
Alt+InsertAlt+InsertAlt+InsertAlt+InsertAlt+InsertAlt+InsertAlt+Insert or Ctrl+NAlt+InsertCommand N or Control EnterControl N or Control EnterCommand N or Control Enter
|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.|
Alt+DeleteAlt+DeleteAlt+DeleteAlt+DeleteAlt+DeleteAlt+DeleteAlt+DeleteAlt+DeleteCommand Delete or Command BackspaceCommand DeleteCommand Delete or Command Backspace
|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.|
Up(Ctrl+Alt+UpCtrl+Alt+UpCtrl+Alt+UpCtrl+Alt+UpCtrl+Alt+UpCtrl+Alt+UpCtrl+Alt+UpCtrl+Alt+UpAlt Command UpAlt Command UpAlt Command Up)
Down (Ctrl+Alt+DownCtrl+Alt+DownCtrl+Alt+DownCtrl+Alt+DownCtrl+Alt+DownCtrl+Alt+DownCtrl+Alt+DownCtrl+Alt+DownAlt Command DownAlt Command DownAlt Command Down)
|Use these buttons to change the order of File Watcher in the list which determines the order in which File Watchers are launched if more than one of them are enabled.|