Question

Does JSLint, JSHint, or some other open-source static code analysis tool support adding custom rules for code compliance, or are there some ECMAScript compliant parsers that I can use to get the results as close as possible to the ones seen in the snippet below?

For example, I’d like to look into JavaScript code and list what functions are called, if it calls a library (or APIs provided by smartphones for HTML5 widgets) to register all that fall under the namespaces of that API, to make a tree of the objects and their properties to see if function is called out from what object can be traced back to, maybe with an output in XML, JSON or other structured format.

Say for example I have this JavaScript code (it does nothing and is just for the sake of the argument):

jobs = mylibrary.getJobs();
found = jobs.find("Python");
list = found.convert("html");

I want my analyzer tool to get this:

{
    "mylibrary": {
        "jobs": {"maker":"getJobs", "parent": "mylibrary"},
        "found": {"maker": "find", "parent": "jobs", "parameters": "Python"},
        "list": {"maker": "convert", "parent": "found"}
    }
}

Answer 1

You should be able to build something like this using substack’s burrito, which uses the parser from Uglify-JS and gives, I think, you all you need. A quick sample:

src.js:

var jobs, found, list;
jobs = mylibrary.getJobs();
found = jobs.find("Python");
list = found.convert("html");

ast.js:

var fs = require('fs'),
    burrito = require('burrito');

var src = fs.readFileSync('./src.js', 'utf8');

burrito(src, function (node) {
    console.log(node.name, node.value);
});

Exactly how you would build your requested structure, I’m not too sure (I’m not very well versed in AST parsing myself) but I’m sure it would entail some effort on your part. Perhaps you wouldn’t need a structure in-between, so to speak, but could just validate each node from burrito, where each call node would be validated against it’s values (function name, object name etc), with a warning raised if it doesn’t validate.

Here is the output from the burrito call above (note: every [Object] or such has been truncated by node.js’ console.log. Values are actually nodes in the parse tree from burrito, so each value has it’s associated state etc).

var [ [ [ 'jobs' ], [ 'found' ], [ 'list' ] ] ]
stat [ [ { name: 'assign', start: [Object], end: [Object] },
    true,
    [ [Object], 'jobs' ],
    [ [Object], [Object], [] ] ] ]
assign [ true,
  [ { name: 'name', start: [Object], end: [Object] }, 'jobs' ],
  [ { name: 'call', start: [Object], end: [Object] },
    [ 'dot', [Object], 'getJobs' ],
    [] ] ]
name [ 'jobs' ]
call [ [ 'dot', [ 'name', 'mylibrary' ], 'getJobs' ], [] ]
stat [ [ { name: 'assign', start: [Object], end: [Object] },
    true,
    [ [Object], 'found' ],
    [ [Object], [Object], [Object] ] ] ]
assign [ true,
  [ { name: 'name', start: [Object], end: [Object] }, 'found' ],
  [ { name: 'call', start: [Object], end: [Object] },
    [ 'dot', [Object], 'find' ],
    [ [Object] ] ] ]
name [ 'found' ]
call [ [ 'dot', [ 'name', 'jobs' ], 'find' ],
  [ [ [Object], 'Python' ] ] ]
string [ 'Python' ]
stat [ [ { name: 'assign', start: [Object], end: [Object] },
    true,
    [ [Object], 'list' ],
    [ [Object], [Object], [Object] ] ] ]
assign [ true,
  [ { name: 'name', start: [Object], end: [Object] }, 'list' ],
  [ { name: 'call', start: [Object], end: [Object] },
    [ 'dot', [Object], 'convert' ],
    [ [Object] ] ] ]
name [ 'list' ]
call [ [ 'dot', [ 'name', 'found' ], 'convert' ],
  [ [ [Object], 'html' ] ] ]
string [ 'html' ]

Update:

Another option is the newer(?) ES parser Esprima, which seems to be both more actively developed and better documented. It’s also reportedly faster than Uglify. You can try out e.g. parsing on the Parsing Demo page. You sould be able to build a good solution using this, methinks.