Shared publicly  - 
 
I have added an experimental context coloring feature to JSLint.
It is intended to provide context coloring in text editors and
IDEs. Context coloring gives a different color to each level of
function nesting. Variables are displayed with the color in
which they were defined. Context coloring makes it easier to
see the structure of programs and the closure of variables.

A new function is provided, JSLINT.color(data). It requires the
use of a data argument that can be obtained from JSLINT.data().
JSLINT.color(data) returns an array of objects, each object
containing four properties: {
    line: a source file line number,
    level: a nesting level number (0 is global,
           deeper functions have higher numbers),
    from: a starting position on the line,
    thru: one past the end of a run of a single color
}.

For example:

function MONAD() {
    'use strict';
    return function unit(value) {
        var monad = Object.create(null);
        monad.bind = function (func) {
            return func(value);
        };
        return monad;
    };
}

[
    {"line": 1, "level": 1, "from": 1, "thru": 9},
    {"line": 1, "level": 0, "from": 10, "thru": 15},
    {"line": 1, "level": 1, "from": 15, "thru": 19},
    {"line": 2, "level": 1, "from": 5, "thru": 18},
    {"line": 3, "level": 1, "from": 5, "thru": 11},
    {"line": 3, "level": 2, "from": 12, "thru": 20},
    {"line": 3, "level": 1, "from": 21, "thru": 25},
    {"line": 3, "level": 2, "from": 25, "thru": 34},
    {"line": 4, "level": 2, "from": 9, "thru": 20},
    {"line": 4, "level": 0, "from": 21, "thru": 27},
    {"line": 4, "level": 2, "from": 27, "thru": 41},
    {"line": 5, "level": 2, "from": 9, "thru": 21},
    {"line": 5, "level": 3, "from": 22, "thru": 39},
    {"line": 6, "level": 3, "from": 13, "thru": 25},
    {"line": 6, "level": 2, "from": 25, "thru": 30},
    {"line": 6, "level": 3, "from": 30, "thru": 32},
    {"line": 7, "level": 3, "from": 9, "thru": 11},
    {"line": 8, "level": 2, "from": 9, "thru": 22},
    {"line": 9, "level": 2, "from": 5, "thru": 7},
    {"line": 10, "level": 1, "from": 1, "thru": 2}
]

Each level will have its own color. I have been using these:
0 white
1 green
2 yellow
3 blue
4 red
5 cyan
6 magenta
7 gray

It might be helpful to provide a convenient mechanism for
switching between context coloring and kindergarten coloring.

JSLINT.property is an object containing the counts of all of
the property names found in a file. It could be used to provide
property names for auto-completion.
114
22
Revath S Kumar's profile photoBenoit Kreins's profile photoMaxime Warnier's profile photoStefan Baalcke's profile photo
13 comments
 
Too cool. I'm so curious!
First one to get a screenshot of some reasonable colored output based on this wins.
 
Will try on the plane with Orion.  Barring that will force someone on the team to do my bidding... ;-)  Thanks Doug, It was really nice to meet you
 
Never mind, I see that it was pushed to master - sorry I should have checked first.
 
Sweet. Can't wait to play with this!
 
I remember you mentioned this kind of context coloring in your presentation of MONAD in YUIConf. Finally you made it by yourself, haha. Can't wait to play with it.
 
The colors used to represent the levels are arbitrary, you can set them to be whatever makes sense to you.