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
- File –> Settings or Ctrl + Alt + S
- Click on File Watchers
- If you have a LESS watcher listed double click it otherwise click the green “+” in the upper right and select “LESS”
- In the New Watcher window
- Check “Track only root files”
- 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”.
- In the “Arguments” filed enter $FileName$ $FileNameWithoutExtension$.css
- Uncheck “Create output file from stdout”
- Click “OK”…twice
Step 3: Watch it Work
- Add a new file…give it the “.less” extension.
- 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.