Navigate OO JS code

Question

I do a lot of JavaScript editing, and now with Node becoming a popular server-side scripting language I can see myself using even more JS than ever. The problem I have is finding a way to navigate large amounts of Object Oriented JavaScript code.

TextMate has a way to view "symbols" but it's a flat structure that I don't find very useful. Vim has TagList but I can't seem to get it to work very well with JS. Sublime Text can search through functions very well, but again, it's a flat list.

BBEdit lists functions hierarchically, which is awesome, but the list is usually really long since you cannot collapse/fold the list.

Aptana and NetBeans have a nice outline viewer, which are about as close to perfect as I've been able to find: Hierarchical layout, search filter, folding, sorting options, etc.. My only problem with both is that they're a bit slow (at least to load), and they only show functions within an open file (not within a project).

My ideal solution would be some kind of standalone app that could be opened with a hot key. You could then see a list of all your functions inside all your files (in a project), filter the list using a search string, and then when you find the function you're after open it in your favorite editor.

In other words, I'd like to navigate by objects rather than file structure. Is this possible?

I use a Mac primarily, but I'd also be interested in hearing about solutions for Windows.

Thanks in advance for your help.

Answer 1

You want Mozilla's jsctags, built expressly for this purpose. You can use it with (e.g.) Tagbar or taglist-plus.

Answer 2

You could check WebStorm ( http://www.jetbrains.com/webstorm/ ) - I've switched to it few months ago, and it's definitely the best IDE for JS right now. It has a nice outline too, understands JS pretty well, and is fast.