JavaScript Scope Context Coloring | Hacker News Reader

JavaScript Scope Context Coloring

github.com

122 pointstemplaedhel33 comments

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.

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

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.

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

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.

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

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

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-...

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

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)

You can access global variables as normal, but you can't implicitly declare them by doing `myGlobaVar = 5` - you have to use `window.myGlobalVar`.

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

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.

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.

Now we just need a Sublime Text plugin for this.

Let's make a Kickstarter

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.

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

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.

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...

Many thanks!

wow, you did it!

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

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

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.

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).

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

Maybe not so useful...

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:"

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

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

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.

What if it changed based on cursor position?

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

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!

Reply on news.ycombinator.com