Monday, July 29, 2013

JavaScript syntax checking

I was working through the Crafty tutorial on the fourth part, "Adding a player-controlled avatar," when I get the blank screen below.



By now I know this means there's a typo in the code, specifically, components.js. I learn the PlayerCharacter component on the website does not have a comma, not like the Bush and Tree components:

Crafty.c('PlayerCharacter', {
  init: function() {
    this.requires('Actor, Fourway, Color')
      .fourway(4)
      .color('rgb(20, 75, 40)');
  }
});

So I put on in after the inner closing curly brace, }. Then the game runs fine.

I realized I'm up the creek, so to speak, if Chrome is this sensitive. There's a high chance I'm going to make this mistake, too.

I search around and find JSLint, JavaScript Lint, etc. I tested on JSLint and it gave so many goggledegook messages and not the one to catch the above problem. After checking stackoverflow, I come to the Google Closure Compiler. The interesting thing is it finds three errors related precisely to the commas--namely, the commas shouldn't be there!

After I remove the commas in Tree, Bush, and PlayerCharacter, GCC is happy. However, the GCC is designed for improving code performance by rewriting the code. What I would really like is for a tool to take an html file and follow the links, checking each file in turn for syntax and semantics.

But not today.

No comments:

Post a Comment