The following are some popular tools but note PhpStorm can monitor any file type and run any command line tool based on changes.
- YUI Compressor
- Closure Compiler
- TypeScript compiler
- CoffeeScript compiler (and redux for sourcemaps)
- Less compiler
- Sass / Scss compiler
Let's see how we can work with File Watchers.
1. Enable the File Watchers plugin
Depending on the PhpStorm version you are using, it may be required to enable the File Watchers plugin.
- From the settings dialog (Ctrl+Alt+S / Command+, on Mac OS X) navigate to IDE Settings | Plugins.
- Make sure the File Watchers plugin is enabled. If it isn't listed in the list of plugins, click the Install JetBrains plugin... button to find it.
2. Configuring File Watchers
When PhpStorm detects that you are working in a type of file it can "watch," it will prompt us to set up a File Watcher. Here's an example when working in a .less file:
Enabling the File Watcher will add the following configuration to the Project Settings | File Watchers:
From the File Watcher configuration, we can see it will do the following:
- Watch for changes on all LESS files (within project files).
- Convert them to CSS using lessc.cmd (the LESS compiler) whenever they are changed.
- Uses command line arguments to tell the tool about the source file.
File Watchers will trigger while we type in our IDE. By deselecting the Immediate File Synchronization checkbox, we can change this to only trigger when files are saved.
3. Editing file types configured with File Watchers
When the command line tool executed by the File Watcher fails, output will be shown in the IDE. This can be very useful for troubleshooting or for discovering syntax errors.