This morning I decided to try out JetBrain’s WebStorm.  I am a huge fan of ReSharper and RubyMine and have been hearing some good things about WebStorm so I thought I would give it a try.  It’s very early on in that process so I haven’t formed my opinion completely yet but I have a sour taste in my mouth after spending over an hour setting up automatic compilation of LESS in the tool.  I was unable to find any documentation on the JetBrain’s site or otherwise on how to do it, so in the hopes of saving at least one person the headache I thought it would be wise to blog it.

Step 1: Find a LESS Compiler

You need to have a less compiler that you can tell the File Watcher to run and compiles the LESS to CSS.  Fortunately I have been using LESS for awhile and have had need for the standalone compiler so I knew where to find one - https://github.com/duncansmart/less.js-windows.  You can either clone the repo or download and extract the zip.

Step 2: Setup the File Watcher in WebStorm

1. File –> Settings or Ctrl + Alt + S 
2. Click on File Watchers
3. If you have a LESS watcher listed double click it otherwise click the green “+” in the upper right and select “LESS”
4. In the New Watcher window
   1. Check “Track only root files”
   2. In the “Program” field click the ellipsis(“…”) and select the LESS compiler you downloaded in Step 1.  If you used less.js-windows select “lessc.cmd”.
   3. In the “Arguments” filed enter $FileName$ $FileNameWithoutExtension$.css
   4. Uncheck “Create output file from stdout”
   5. Click “OK”…twice

Step 3: Watch it Work

1. Add a new file…give it the “.less” extension.
2. Add a style to the new file and you’ll see the corresponding .css file created under the .less file.

Hopefully this helps you out and if I missed something and this process could have been easier let me know.