JavaScript Scope Context Coloring

https://github.com/daniellmb/JavaScript-Scope-Context-Coloring

by templaedhel • 13 years ago

122 33 13 years ago

github.com

druska• 13 years ago

Now we just need a Sublime Text plugin for this.

LAMike• 13 years ago

Let's make a Kickstarter

dag11• 13 years ago

This is great.

Idea: Implement loose "syntax" highlighting over the scope highlighting by bolding syntax keywords instead of highlighting them. Perhaps also slightly change the brightness of certain syntax keywords.

crazygringo• 13 years ago

Great idea. Bolding language-specific words, and then making strings and comments less bright, would probably achieve 90% of the usefulness of normal syntax highlighting, and combine well with this.

scjr• 13 years ago

It might be better to use variations in the background color. It may feel more natural to do so and it would allow normal syntax highlighting alongside scope highlighting.

solox3• 13 years ago

It is a good idea indeed. I believe Notepad++ does background scope highlighting already, just not accurate enough for JavaScript specifically.

archangel_one• 13 years ago

I was just thinking the same; when all my syntax highlighting in a region looks backwards, I normally assume I've got a mismatched quote just before it. I think I'd be thinking that with this all the time.

Subtle changes in the background colour would be a nice alternative.

seanp2k22• 13 years ago

Yes; highlight BG lighter grey. This would be an awesome plugin for ST.

Zecc• 13 years ago

Make the background color become less contrasting with the foreground color the more you nest. The larger the number of nested scopes, the harder it's going to be to read it anyway!

I'm actually serious by the way.

ufo• 13 years ago

Another possibility might be just colloring variables and assignments (since thats where the scoping actually matters)

Mahn• 13 years ago

Exactly my thoughts, this could work really well if implemented properly.

necolas• 13 years ago

Ever since watching that Crockford talk, I've wanted to try this out as a Vim plugin.

curiousdannii• 13 years ago

It doesn't seem to handle comments correctly. I need to delete all mine to make it work.

nadinengland• 13 years ago

I noticed that too. It also only highlights variables from other scope once per function which is a tad odd but for experimental you can't complain!

ebiester• 13 years ago

I think this would make a lot of sense for Lisp or Clojure, at least when starting out.

wavesounds• 13 years ago

Really great idea, would be super useful, it looks like its still got a ways to go though, it doesn't seem to recognize global variables yet for one

http://stackoverflow.com/questions/235360/what-is-the-scope-...

Kudos• 13 years ago

If you're using strict Javascript (and you should be) there are no implicit global variables.

riffraff• 13 years ago

how would an example of javascript without implicit global variables work? For example, how does it get access to "Array", "require" or "window" ?

(I don't think "use strict" goes to the length of turning javascript into bracha's newspeak but I may likely have no idea what "strict javascript" actually refer to)

TheFuntastic2• 13 years ago

Can anyone point to which particular crockford talk this was inspired by? I've had the idea for scope highlighting bashing around my head for a while now, would love to know more.

jnotarstefano• 13 years ago

It's from "Monads and Gonads", a talk delivered at YUIConf 2012. Here it is: http://www.youtube.com/watch?feature=player_embedded&v=d...

TheFuntastic2• 13 years ago

Many thanks!

davvid• 13 years ago

wow, you did it!

https://news.ycombinator.com/item?id=5095837

VeejayRampay2• 13 years ago

I'm really surprised this talk didn't generate a PC outcry given all the mentions of "huevos", "gonads" and the likes...

Vivtek• 13 years ago

This is probably one of those things that's really effective if you have working color vision, right?

macca321• 13 years ago

I forked it with fonts: http://snag.gy/TnNBO.jpg

Maybe not so useful...

arianvanp• 13 years ago

Discussions between developers will be so much more jolly :) "Dude, why isn't my `this` in the comic sans scope referring to the DOM D:"

seanp2k22• 13 years ago

What if it changed based on cursor position?

phy6• 13 years ago

Wow, I'd love to have this in a Java IDE. I often have to deal with reverse engineering amateurish code in many 1000 line classes.

mateuszf• 13 years ago

Actually Intellij Idea has the same concept, here it is working in HTML: https://dl.dropbox.com/u/456905/idea.png

I think it would be great if they added it to JS, with their powerful syntax parsing it would be probably trivial to do.

Edit: probably works in their php, django and rails ide-s.

jtreminio• 13 years ago

PhpStorm has this ability - and I've turned it off.

Too much colors for my blood, and it doesn't look good against Solarized.

One thing I really enjoy about this IDE is the indentation level markers - basically lines draw down to show you where the current scope ends (braces, parens).

efnx• 13 years ago

Someone should abstract this out (for an arbitrary number of languages) into a program that would provide annotations for vim or emacs or...

VeejayRampay2• 13 years ago

That's excellent. A nice variation around this that I've been keen on for a long time and have been wanting to see in modern IDEs is using 3D (or drop shadows) to simulate the nesting of blocks/closures/scopes and give the programmer an instant understanding of the different levels and depths.

JavaScript Scope Context Coloring

Related Stories