PhpStorm 8.0.0 Web Help

File | Settings | Tools | File Watchers


The page is available when the File Watchers plugin is enabled. The plugin is bundled with PhpStorm 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 PhpStorm File Watcher templates and thus enable transpilation in the project.

PhpStorm 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.
  • Translate TypeScript and CoffeeScript source code into JavaScript code, possibly also creating source maps to enable debugging.
  • Compress JavaScript and CSS code.
Note that PhpStorm does not contain built-in transpilers but only supports integration with the tools that you have to download and install outside PhpStorm.

In PhpStorm, these transpiler configurations are called File Watchers. For each supported transpiler, PhpStorm provides a predefined File Watcher template. Predefined File Watcher templates are available at the PhpStorm 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.

JavaScript files generated by File Watchers are excluded from code completion and refactoring.

Note

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, PhpStorm 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.

Item Tooltip/
and shortcut
Description
new.png Add
Alt+InsertAlt+InsertAlt+InsertAlt+InsertAlt+InsertAlt+InsertAlt+Insert or Ctrl+NAlt+InsertCommand N or Control EnterCommand 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 PhpStorm opens the New Watcher dialog box for customizing the predefined File Watcher according to the settings of the current project.
edit1 Edit
EnterEnterEnterEnterEnterEnterEnterEnterEnterEnterEnter
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 PhpStorm-level template.
delete Remove
Alt+DeleteAlt+DeleteAlt+DeleteAlt+DeleteAlt+DeleteAlt+DeleteAlt+DeleteAlt+DeleteCommand DeleteCommand DeleteCommand Delete
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 PhpStorm level.
arrowUp.png arrowDown.png 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. This determines the order of launching File Watchers, if more than one are enabled.
copy Copy Use this button to create a copy of the selected file watcher.
import_icon Import Click this button to import an existing file watcher and add it to the list of available file watchers.
export_icon Export Click this button to export the selected watchers to watchers.xml file, located under the user's home.

See Also

Procedures:

Reference:

Web Resources: