January 29, 2012

File watching for fun and profit.

Let’s say you want to write some javascript. You’re a good programmer, but you’re not so cocky that you feel infallible. Good news! Just because you are writing in an interpreted language, doesn’t mean you have to cross your fingers when you go to execute your script. JSHint is here to the rescue. Copy-pasting your code into the web page there would be annoying in about 10 seconds, but fortunately there are better options.

JSHint is also available as an executable you can run from the command-line. Simply follow these steps and continue on to the javascript party:

  1. Install node.js: If you’re on OSX, it’s as easy as sudo brew install node
  2. Install npm: sudo brew install npm
  3. Install JSHint: npm install jshint
  4. Run JSHint: jshint SOME_JAVASCRIPT_FILE

Now JSHint can show you potential errors and problems in our code! But that’s not quite good enough. You probably want this information as you work, not just when you think to run the program. This is going to take a little more effort.

Now you could install some extra bundle/plugin/script into your editor
of choice to have a hotkey for JSHint or automatically execute it when you save a file, but that’s less awesome. With a few more steps, it doesn’t matter which editor you use and you can also automatically check whenever you svn up or git pull or whatever as well. A few more steps to joy brought to you by Guard:

  1. Install guard: OSX already has rubygems, so just sudo gem install guard
  2. Add a guardfile to your project: touch guardfile
  3. Run guard: guard -c -n f from inside our project

Your guard file should look something like this:

# Super simple Guardfile

guard :shell do
watch(/.\*.js/) { `jshint *.js` }
end

Now you’ll see a screen showing the output of the last time JSHint was executed. Full documentation can be found on Guard’s website in case you want to do something a little more elaborate when your files change. Like so:

profile-test.js: line 23, col 4, Expected an identifier and instead saw ‘export’ (a reserved word).

My version is probably some of the most basic applications Guard can be used for. Hopefully this helps you make something awesome with a little more ease and/or speed.