Loading ...
Sorry, an error occurred while loading the content.

Context Coloring

Expand Messages
  • douglascrockford
    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
    Message 1 of 1 , Feb 16, 2013
    • 0 Attachment
      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.
    Your message has been successfully submitted and would be delivered to recipients shortly.