What is Context Coloring?

I made a plugin for the Vim text editor to highlight JavaScript code according to its scope. This was inspired by an idea by Douglas Crockford in his presentation at YUIConf 2012. See from around the 16 minute mark onwards. I can’t really claim to understand monads – apparently the curse is still in effect! – but this idea for highlighting functions in JS struck me as a really good idea, and something that I could do in Vim. Well, I finally got around to doing it. This is what it looks like in action:

Notice how functions defined inside other functions are progressively colored differently, making their scope clear. Also, closure variables are colored according to scope they were defined in. I find that this can help make such code easier to read and understand. It is particularly helpful when writing/reading code in a ‘functional’ style. The example code here is from a book I’m reading: Functional JavaScript by Michael Fogus.

Other Editors/Implementations

See this discussion on Google Plus for information on other implementations for other editors.

Installation

Check the README on the Github page