Skip to end of metadata
Go to start of metadata

Redirection Notice

This page will redirect to in about 2 seconds.


In this tutorial, we will work with File Watchers in PhpStorm to automatically run a command line tool whenever a file in our project is modified.

A very powerful tool in PhpStorm is the File Watchers plugin. It instructs the IDE to monitor changes to specific files or file types and automatically runs a command line tool upon change. For example, we could automatically minimize a CSS or JavaScript file whenever it is saved, or transpile CoffeeScript or TypeScript into JavaScript when updates to a script have been made.

The following are some popular tools but note PhpStorm can monitor any file type and run any command line tool based on changes.

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.

  1. From the settings dialog (Ctrl+Alt+S / Command+, on Mac OS X) navigate to IDE Settings | Plugins.
  2. 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:


Next to automatically configuring File Watchers for known file types, PhpStorm also supports configuring custom File Watchers. Check this blog post for an example on how to do that.

From the File Watcher configuration, we can see it will do the following:

  1. Watch for changes on all LESS files (within project files).
  2. Convert them to CSS using lessc.cmd (the LESS compiler) whenever they are changed.
  3. 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.


Many File Watchers make use of tools that are not bundled with PhpStorm and have to be installed separately. Search web help for more information on how to install these. Here is an example for installing the CoffeeScript compiler using NPM.

3. Editing file types configured with File Watchers

While editing a file type that has a File Watcher configured, files will be generated. LESS files will be converted into CSS, TypeScript and CoffeeScript will generate a JavaScript file and a source map and so on. PhpStorm will group these files in the Project Tool Window, keeping our project organized while still giving access to the original file and files generated through the File Watcher plugin.

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.

  • No labels