What this tutorial is about
This tutorial aims to walk you step by step through using file watchers in PyCharm.
What this tutorial is not about
The basics of file watchers, in particular, LESS and CoffeeScript are out of scope of this tutorial.
Before you start
Make sure that:
- You are working with Professional edition of PyCharm version 3.1 or higher
- The File Watchers plugin is enabled. This plugin comes bundled with PyCharm and should be enabled by default:
If it it not, enable the plugin. Refer to the product documentation for details.
- 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 page of the IDE settings (click on the main toolbar, remember ?) and look for this plugin in the Jetbrains repository:
For the changes to take effect, restart PyCharm. After restart, you will notice a new page in the project settings/preferences - Node.js and NPM.
Installing LESS and CoffeeScript compilers
There are two ways to install the compilers.
- First, you can do it manually: open local terminal (click the Terminal tool window button, located at the lower border of PyCharm window), and install LESS and CoffeeScript, using npm commands:
- Second, use PyCharm's charming UI: click on the main toolbar, and in the Node.js and NPM page click :
In the Available Packages dialog, find the package you want to install (in our case, this package is less) and click Install Package:
As you've noticed already, LESS and CoffeeScript are installed locally, so the corresponding compiler files are written under the project root:
You'll need these files a little bit later. Now, it's time to start!
Configuring File Watchers
When PyCharm 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, PyCharm shows a notification banner:
Click the link Add watcher. PyCharm shows the following dialog box, where you have to specify your file watcher executable (LESS here), and select the option to generate output from stdout:
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 watchers for CofeeScript
Next, open for editing a CoffeeScript file. PyCharm immediately prompts you to configure a file watcher for it:
Again, click Add watcher and specify the file watcher settings, in particular, the CoffeeScript executable:
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 watched files
OK, here we are. Open for editing a LESS file, 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:
Note that in either case PyCharm shows generated files in the Project tool window, together with the source files.
And if an error occurs?
If a command line tool executed by the File Watcher fails, PyCharm shows its output in the Run tool window:
Helpful for troubleshooting, isn't it?