IntelliJ IDEA 2017.3 Help

File Watchers in IntelliJ IDEA

This feature is supported in the Ultimate edition only.

What this tutorial is about

This tutorial aims to walk you step by step through using file watchers in IntelliJ IDEA.

The basics of file watchers, in particular, usage of LESS and CoffeeScript, are out of scope of this tutorial.

Prerequisites

Make sure that:

  • You are working with IntelliJ IDEA.
  • Node.js is downloaded and installed. It is advisable, depending on your particular operating system, to add the path to Node.js executable to the Path environment variable.
  • Before you start working with file watchers, make sure that the File Watchers plugin is enabled. The plugin is bundled with IntelliJ IDEA and is activated by default. If the plugin is not activated, enable it on the Plugins settings page of the Settings / Preferences Dialog as described in Enabling and Disabling Plugins.

  • It is advisable to familiarize yourself with the matter in advance. Please read the section Using File Watchers.
  • In this tutorial, we'll work with Less and CoffeeScript files. So, before you start your workout, perform some preliminary steps.

Installing Node.js plugin

First, download and install Node.js plugin. It is not bundled; so to have it installed, open the Plugins settings page (click /help/img/idea/2017.3/settings.png on the main toolbar, remember ?) and look for this plugin in the Jetbrains repository:

/help/img/idea/2017.3/py_nodejs_plugin.png

For the changes to take effect, restart IntelliJ IDEA. After restart, you will notice a new page under the Languages and Frameworks node in the Settings/Preferences dialog - Node.js and NPM.

Installing LESS and CoffeeScript compilers

Open Settings/Preferences(/help/img/idea/2017.3/settings.png), and open then the pageNode.js and NPM.On this page, specify the Node interpreter (its version is determined automatically), and then click /help/img/idea/2017.3/add.png - one time to install less, and the other time to install coffee-script.

As you've noticed already, LESS and CoffeeScript are installed locally, so the corresponding compiler files are written under the project root:

/help/img/idea/2017.3/py_nodejs_project_view.png

These files will be required a little bit later. Now, it's time to start!

Configuring file watchers

When IntelliJ IDEA detects that you are working with a file it can "watch," it prompts to set up a File Watcher.

Configuring file watcher for LESS files

For example, when you open for editing a LESS file, IntelliJ IDEA shows a notification banner:

/help/img/idea/2017.3/py_nodejs_less_watcher.png

Click the link Add watcher. IntelliJ IDEA shows the following dialog box, where you have to specify your file watcher type (Less here), executable (lessc.cmd here), and select the option to generate output from stdout:

/help/img/idea/2017.3/py_nodejs_less_watcher_new.png

Looking at this configuration, you can easily figure out what the file watcher actually does:

  • Watches for changes on all Less files within your project.
  • Compiles files with the extension .less into the files with the extension .css, using the compiler lessc.cmd, specified in the field Program.

Configuring file watcher for CoffeeScript

Next, open for editing a CoffeeScript file. IntelliJ IDEA immediately prompts you to configure a file watcher for it:

/help/img/idea/2017.3/py_nodejs_coffeescript_watcher.png

Again, click Add watcher and specify the file watcher settings, in particular, the CoffeeScript executable:

/help/img/idea/2017.3/py_nodejs_coffeescript_watcher_new.png

What does this file watcher do?

  • It also tracks changes in all CoffeeScript files in your project.
  • If compiles files with the extension .coffee into the files with the extension .js, using the compiler coffee.cmd, specified in the field Program.
  • It compiles files with the extension .coffee into the files with the extension .map, using the compiler coffee.cmd, specified in the field Program.

Editing file watchers

OK, here we are. Open for editing the file my.less, and change something, for example, rename the variable @myColor to @Color, and change its value. The file watcher immediately processes the changed source file, and produces an output file with the extension .css:

/help/img/idea/2017.3/py_nodejs_less_watcher_edit.png

Next, open for editing a CoffeeScript file and change something there. The configured file watcher generates a JavaScript file and a source mapping file:

/help/img/idea/2017.3/py_nodejs_coffeescript_watcher_edit.png

Note that in either case IntelliJ IDEA shows generated files in the Project Tool Window under the source files.

Troubleshooting, or if an error occurs?

If a command line tool executed by the File Watcher fails, IntelliJ IDEA shows its output in the Run tool window:

/help/img/idea/2017.3/py_nodejs_error.png

Helpful for troubleshooting, isn't it?

Last modified: 11 October 2017

See Also